博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JQuery全屏浮动
阅读量:5248 次
发布时间:2019-06-14

本文共 1677 字,大约阅读时间需要 5 分钟。

参考地址 

 

<!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>

 

参考地址 

转载于:https://www.cnblogs.com/jjklmm/archive/2012/07/24/2606032.html

你可能感兴趣的文章
MySQL 字符编码问题详细解释
查看>>
perl 学习笔记
查看>>
31 Days of Windows Phone
查看>>
poj 1184(聪明的打字员)
查看>>
Ubuntu下面安装eclipse for c++
查看>>
C#压缩或解压(rar和zip文件)
查看>>
让IE浏览器支持CSS3圆角属性的方法
查看>>
巡风源码阅读与分析---nascan.py
查看>>
LiveBinding应用 dataBind 数据绑定
查看>>
Linux重定向: > 和 &> 区别
查看>>
nginx修改内核参数
查看>>
【欧拉函数模板题】最大公约数
查看>>
IOS做天气预报
查看>>
C 筛选法找素数
查看>>
TCP为什么需要3次握手与4次挥手(转载)
查看>>
IOC容器
查看>>
ElasticSearch的x-pack配置查询
查看>>
织梦仿站第三课:网站的文件分割
查看>>
Windows 2003全面优化
查看>>
(转)AWK函数
查看>>