zoukankan      html  css  js  c++  java
  • js添加广告模块,随页面移动而移动

    实现如下的效果,一般用于广告,

    这是通过运动来实现的,大家可以先自己写写,再看看和小编我写的是不是同一个思想

    <style>
        #div1{
            100px;
            height:100px;
            background:red;
            position:absolute;
            bottom:0;
            right:0;
        }
    </style>
    
    
    <body style="height:2000px;">
        <div id="div1"></div>
    </body>
    

    js代码部分

    <script>
        window.onscroll=function()
        {
              var div=document.getElementById("div1");
              var scrollTop=document.documentElement.scrollTop ||document.body.scrollTop;
    
              // div.style.top=document.documentElement.clientHeight-div.offsetHeight+scrollTop+'px';
              startmove (parseInt((document.documentElement.clientHeight-div.offsetHeight)/2+scrollTop))         
              //offsetHeight是div的高度
              //document.documentElement.clientHeight是到窗口的顶部
        };
        var timer=null;
        function startmove(iTarget)
        {
            var div=document.getElementById('div1');
            clearInterval(timer);
            timer=setInterval(function()
            {
                 var speed =(iTarget-div.offsetTop)/4;
                 speed=speed>0?Math.ceil(speed):Math.floor(speed);  
                 if (div.offsetTop==iTarget)   
                 {
                    clearInterval(timer);
                 }
                 else
                 {
                    div.style.top=div.offsetTop+speed+'px';
                 }
            }
                , 30)   
    
        }
    
    </script>
    

      

  • 相关阅读:
    2019 ECfianl
    Codeforces Round #610 (Div. 2)
    IOS设计模式之三:MVC模式
    MVC3快速搭建Web应用(二)
    IOS设计模式之四:观察者模式
    MVC3快速搭建Web应用(一)
    Three20 NetWork
    IOS设计模式之一:单例模式
    IOS设计模式之二:Delegate模式
    写博客的意义
  • 原文地址:https://www.cnblogs.com/biyongyao/p/5847797.html
Copyright © 2011-2022 走看看