zoukankan      html  css  js  c++  java
  • 漂浮广告窗

    今天有一个同学问我怎么搞一个浮动窗。结果他们没有网站的源码,也没有修改的权限。
    以下是示例

    html

    <div id="floadAD" class="floadAd">
    	<span class="close">×关闭</span>
    	<a href="mnl?id=1138" target="_blank"></a>
    </div>
    

    css

    .floadAd { 
     	position: fixed;
     	z-index: 999900; 
     	display: none;
     	250px;
     	height:194px;
     	cursor:pointer;
    	background: url("../img/piaofu.png") no-repeat;
     }
     .floadAd a{
     	display: block;
     	height: 100%;
     }
     .floadAd .close{
     	display: none;
     	position:absolute;
     	right:35px;
     	top:20px;
     	font-size:11px;
     	color: #0053a4;
     	transition : color 0.3s;
     }  
    .floadAd:HOVER .close{
    	display: block;
    }
    .floadAd .close:HOVER{
    	color: red;
    }
    .floadAd .item { 
    	padding: 5px 15px;
    	display: block; 
    	line-height: 25px;
    }
    
    

    js

    //广告漂浮窗口
    function FloatAd(selector) {
        var obj = $(selector);
        var windowHeight = $(window).height();//浏览器高度
        var windowWidth = $(window).width();//浏览器宽度
        var dirX = -1.5;//每次水平漂浮方向及距离(单位:px),正数向右,负数向左,如果越大的话就会看起来越不流畅,但在某些需求下你可能会需要这种效果
        var dirY = -1;//每次垂直漂浮方向及距离(单位:px),正数向下,负数向上,如果越大的话就会看起来越不流畅,但在某些需求下你可能会需要这种效果
                    
        var delay = 30;//定期执行的时间间隔,单位毫秒
        obj.css({ left: windowWidth / 2 - obj.width() / 2 + "px", top: windowHeight / 2 - obj.height() / 2 + "px" });//把元素设置成在页面中间
        obj.show();//元素默认是隐藏的,避免上一句代码改变位置视觉突兀,改变位置后再显示出来
        var handler = setInterval(move, delay);//定期执行,返回一个值,这个值可以用来取消定期执行
                    
        obj.hover(function() {//鼠标经过时暂停,离开时继续
            clearInterval(handler);//取消定期执行
        }, function() {
            handler = setInterval(move, delay);
        });
    
        obj.find(".close").click(function() {//绑定关闭按钮事件
            close();
        });
        $(window).resize(function() {//当改变窗口大小时,重新获取浏览器大小,以保证不会过界(飘出浏览器可视范围)或漂的范围小于新的大小
            windowHeight = $(window).height();//浏览器高度
            windowWidth = $(window).width();//浏览器宽度
        });
        function move() {//定期执行的函数,使元素移动
            var currentPos = obj.position();//获取当前位置,这是JQuery的函数,具体见:http://hemin.cn/jq/position.html
            var nextPosX = currentPos.left + dirX;//下一个水平位置
            var nextPosY = currentPos.top + dirY;//下一个垂直位置
                        
            /*if (nextPosX >= windowWidth - obj.width()) {//这一段是本站特有的需求,当漂浮到右边时关闭漂浮窗口,如不需要可删除
                close();
            }*/
    
            if (nextPosX <= 0 || nextPosX >= windowWidth - obj.width()) {//如果达到左边,或者达到右边,则改变为相反方向
                dirX = dirX * -1;//改变方向
                nextPosX = currentPos.left + dirX;//为了不过界,重新获取下一个位置
            }
            if (nextPosY <= 0 || nextPosY >= windowHeight - obj.height() - 5) {//如果达到上边,或者达到下边,则改变为相反方向。            
                dirY = dirY * -1;//改变方向
                nextPosY = currentPos.top + dirY;//为了不过界,重新获取下一个位置
            }
            obj.css({ left: nextPosX + "px", top: nextPosY + "px" });//移动到下一个位置
        }
    
        function close() {//停止漂浮,并销毁漂浮窗口
            clearInterval(handler);
            obj.remove();
        }
    }
    

  • 相关阅读:
    Spring Cloud学习笔记【二】Eureka 服务提供者/服务消费者(ribbon)
    Spring Cloud学习笔记【一】Eureka服务注册与发现
    Springboot分布式限流实践
    Springboot分布式锁实践(redis)
    Springboot2本地锁实践
    Springboot集成mybatis通用Mapper与分页插件PageHelper
    Springboot多数据源配置
    redis主从集群搭建
    assert的基本用法
    spring中BeanPostProcessor笔记
  • 原文地址:https://www.cnblogs.com/uestcman/p/9608224.html
Copyright © 2011-2022 走看看