js实现居中延迟广告弹框

最新推荐文章于 2021-05-24 16:56:15 发布

岁月如歌_

最新推荐文章于 2021-05-24 16:56:15 发布

阅读量575

点赞数

分类专栏： js javascript

本文链接：https://blog.csdn.net/namechenfl/article/details/83010043

版权

javascript 同时被 2 个专栏收录

24 篇文章 1 订阅

订阅专栏

15 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
		*{padding: 0;margin: 0;}
        #box1{width: 300px;height: 155px;position: absolute;right: 50%;top: 50%;margin-right:-150px;border:1px solid #528FCC;display: none;
        }
        #span1{
            display: block;height: 25px;background: url("./img/acc_t_bg.gif" ) repeat-x;width: 100%;font-size: 12px;text-indent: 2em;line-height: 25px;
        }
        .kefu_btn{
            background:url("./img/ivt_bg.gif") no-repeat top left;
            width: 300px;
            height: 130px;
        }
        .kefu_btn button{
            cursor: pointer;
            font-size: 12px;
            width: 80px;
            height: 22px;
            border: none;
            position: absolute;
            bottom: 20px;
            right: 10px;
        }
        .bt1{
            background: url("./img/ivt_but1_cn.gif");
            right: 100px!important;
        }
        .bt2{
            background: url("./img/ivt_but2_cn.gif");
        }
        .kefu_btn p{
            width: 140px;
            position: absolute;
            bottom: 60px;
            right: 10px;
            font-size: 12px;
            color: #528FCC;
        }
		</style>
	</head>
	<body>
	
	<div id="box1" onselectstart="return false">
	   <span id="span1">上海网络科技</span>
       <div class="kefu_btn">
           <p>您好，有什么能够帮助您的么？</p>
           <button class="bt1"></button>
           <button class="bt2"></button>
       </div>	
	</div>
    <p id="pp1">上课不要睡觉，好好学习</p>
        </body>

    <script type="text/javascript">
    var timer=null;
function startMove(obj,json,fn){
	      clearInterval(timer);
	      timer =setInterval(function(){
	            var flag=true;           //假设全部为真
	            for(let attr in json){   //遍历对象
	            if(attr =="opacity"){
	            var cur1 =parseInt(getStyle(obj,"opacity")*100)
	            }else{
	            var cur1 =parseInt(getStyle(obj,attr));
	              }
	                
	                target1=json[attr];
	                speed= (target1-cur1)/6;  //减速运动
	                var speed=speed>0?Math.ceil(speed):Math.floor(speed);    //判断speed的正负值
	                if(attr == "opacity"){
				obj.style.opacity = (cur1+speed)/100;
				obj.style.filter = "alpha(opacity="+(cur1+speed)+")";
			}else{
	                obj.style[attr]=cur1+speed+"px"; 
	                }
	                //console.log(cur1)
	                if(target1!=cur1){   //判断若有一处未完成 ，flag为假
	                    flag=false;
	                }
	              }
	                if(flag){
	                clearInterval(timer); 
	                if(fn){
	                      fn();
	                        }
	                }
	                
	      },30)
	     
}
function getStyle(obj,attr){
 	if(obj.currentStyle){      //支持IE
 		return obj.currentStyle[attr]
 	}else{                   //不支持IE
 		return getComputedStyle(obj,null)[attr]
 	}
 }



	var Pp1 =document.getElementById("pp1");
	for(let i=0;i<=40;i++){
	     var p1= Pp1.cloneNode();
	        var text1 =document.createTextNode("上课不要睡觉，好好学习");
	        p1.appendChild(text1);
	        document.body.appendChild(p1)
	}
	
	
	  var oSpan=document.getElementById("span1");
      var oBox =document.getElementById("box1");
      setTimeout(function(){
        oBox.style.display="block";
      },3000)

      var oBtn1 =document.getElementsByClassName("bt1")[0];
      var oBtn2 =document.getElementsByClassName("bt2")[0];

	   window.onscroll=function(){
	   var Scroll =document.documentElement.scrollTop||document.body.scrollTop;
	            var cH=document.documentElement.clientHeight;
	            var tag=Math.floor((cH-oBox.offsetHeight)/2)+Scroll;
	            startMove(oBox,{top:tag});
               }
               oBtn2.onclick=function(){
                oBox.style.display="none";
               }
               oBtn1.onclick=function(){
                oBox.style.display="none";
               }
	</script>

</html>

图片：