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

posted @ 2012-07-24 10:15  通海口  阅读(743)  评论(0编辑  收藏  举报