Home > Article > Web Front-end > How to use JavaScript to complete the following scroll buffer motion advertising box?

How to use JavaScript to complete the following scroll buffer motion advertising box?

黄舟Original: 2017-07-17 11:30:172153browse

This article mainly introduces in detail JavaScript to realize the following scrolling buffer motion advertising frame, and the following advertising frame on the left and right sides of the page, which has certain reference value. Interested friends can refer to it.

When we browse some web pages, we will find that there are advertising images on the edge of the page. When the scroll bar is scrolled, these advertising images will follow the movement of the page (here I call it an advertising box ). The advertising frames of some web pages are fixed on the browser, which can be achieved by using background: fixed;. Here I used JavaScript to simply create an advertising box that moves with the scroll buffer.

#The production principle is relatively simple. Everyone has a perfect js motion framework, which needs to be used for buffering motion here. The advertising box here is set to follow the scroll bar buffer movement and move to the middle position of the browser. What needs to be understood is the calculation of the movement distance and the processing of some details (prevention of some BUGs)

This is a js movement framework I use here. There is only one parameter passed, which is not a perfect movement framework. The parameter passed is the movement distance of the advertising frame, so I get the object again within the movement frame.

var timer=null;
    function startMover(iTarget){
      var op=document.getElementById(&#39;p1&#39;);
      clearInterval(timer);
      timer=setInterval(function(){
          var ispeed=(iTarget-op.offsetTop)/8;
          //速度设置为逐渐减小
          ispeed=ispeed>0?Math.ceil(ispeed):Math.floor(ispeed);
          //避免速度产生小数点
          if(op.offsetTop==iTarget){
            clearInterval(timer);
          }
          else{
          op.style.top=op.offsetTop+ispeed+"px";
          }

    },30);
    };

Style and layout code

  <style>
    #p1{
      width: 100px;
      height: 100px;
      background: #ccc;
      position: absolute;
      //使用绝对定位让其处于右上方
      right: 0;
      top: 0;
  </style>

  <body style="height: 2000px;">
    <p id="p1"></p>
  </body>

js code

The .onscroll attribute is added here for the purpose of scrolling the scroll bar. Load the page, and the advertising box will move with the scroll bar. I also added the .onresize attribute. Since I want to realize that the advertising frame always moves to the middle position of the browser, but when I change the height of the browser, I also want to implement the movement of the advertising frame, so I add this attribute. , loaded when the browser size changes.

<script>
    window.onload=window.onscroll=window.onresize=function(){

      var op=document.getElementById(&#39;p1&#39;);
      var scrolltop=document.documentElement.scrollTop||document.body.scrollTop;
"scrolltop"是滚动条滚动的距离，这里有一个兼容chrome不支持document.documentElement.scrollTop获取语句，其他浏览器支持。          
      var t=(document.documentElement.clientHeight-op.offsetHeight)/2;
"t"为让广告框处于中间位置的高度距离，（获取浏览器的总高度-广告框自身高度）/2      
      startMover(parseInt(t+scrolltop));
"parseIn"返回一个整数，避免小数生成。这里广告框的总移动距离为（t+scrolltop）    
    };

    var timer=null;
    function startMover(iTarget){
      var op=document.getElementById(&#39;p1&#39;);
      clearInterval(timer);
      timer=setInterval(function(){
          var ispeed=(iTarget-op.offsetTop)/8;

          ispeed=ispeed>0?Math.ceil(ispeed):Math.floor(ispeed);

          if(op.offsetTop==iTarget){
            clearInterval(timer);
          }
          else{
          op.style.top=op.offsetTop+ispeed+"px";
          }

    },30);
    };

  </script>

When the scroll bar scrolls to the menu position, how to fix it to the top of the browser, and when the scroll bar returns to its original position, it will stop there.
Many people on the Internet have to quote a jquery plug-in, which feels very troublesome.
How to write such an effect?

Let’s write down a rough idea. It must be more troublesome to debug by yourself than to directly reference the jQuery plug-in, so everyone will introduce the plug-in one after another.

Use the onscroll event to determine the user’s scrolling position, and use the offsetTop of the menu element Property determines its display position

If the menu is scrolled to the top, change the display of the menu to fixed

When the next menu is scrolled to an appropriate position, change the display of the original menu Change diplay back and change the new menu to fixed

The above is the detailed content of How to use JavaScript to complete the following scroll buffer motion advertising box?. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of sample code for object types (Sets) in Javascript ES6Next article：Detailed explanation of sample code for object types (Sets) in Javascript ES6

See more

How to use JavaScript to complete the following scroll buffer motion advertising box?

Related articles