JQuery全屏浮动

jjklmm

浏览: 56960 次
性别:
来自: 北京

最近访客更多访客>>

jk_zero

dagf113225

zhifux868

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jquery

jquery

参考地址 http://www.leyikao.com

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>浮动广告</title>
<script    src="http://www.leyikao.com/templets/default/js/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
(function($) {
    jQuery.fn.imgFloat = function(options) {
        var own = this;
        var xD = 0;
        var yD = 0;
        var i = 1;
        var settings = {
            speed: 10,
            xPos: 0,
            yPos: 0
        };
        jQuery.extend(settings, options);
        var ownTop = settings.xPos;
        var ownLeft = settings.yPos;
        own.css({
            position: "absolute",
            cursor: "pointer"
        });
        function imgPosition() {
            var winWidth = $(window).width() - own.width();
            var winHeight = $(window).height() - own.height();
            if (xD == 0) {
                ownLeft += i;
                own.css({
                    left: ownLeft
                });
                if (ownLeft >= winWidth) {
                    ownLeft = winWidth;
                    xD = 1;
                }
            }
            if (xD == 1) {
                ownLeft -= i;
                own.css({
                    left: ownLeft
                });
                if (ownLeft <= 0) xD = 0;
            }
            if (yD == 0) {
                ownTop += i;
                own.css({
                    top: ownTop
                });
                if (ownTop >= winHeight) {
                    ownTop = winHeight;
                    yD = 1;
                }
            }
            if (yD == 1) {
                ownTop -= i;
                own.css({
                    top: ownTop
                });
                if (ownTop <= 0) yD = 0;
            }
        }
        var imgHover = setInterval(imgPosition, settings.speed);
        own.hover(function() {
            clearInterval(imgHover);
        },
        function() {
            imgHover = setInterval(imgPosition, settings.speed);
        });
    }
})(jQuery);

</script>
<script>
$(document).ready(function() {
      $("#img").imgFloat({speed:30,xPos:10,yPos:10});
});
</script>

<div id=img><a href='http://www.leyikao.com/t/beiligong/'><img src="http://www.leyikao.com/templets/default/Images/bjlgdx.gif"></a></div>

</body>
</html>

参考地址 http://www.leyikao.com

0
顶

10
踩

分享到：

div 先浮动，后固定 | 全屏浮动js

2012-07-24 10:10
浏览 1036
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论