Home >Web Front-end >JS Tutorial >Implementing full-screen floating ads based on javascript_javascript skills

Implementing full-screen floating ads based on javascript_javascript skills

WBOYOriginal: 2016-05-16 15:07:191764browse

The example in this article is to share with you how to implement full-screen floating ads using javascript for your reference. The specific content is as follows

Main methods of use

Visible area width of web page: document.body.clientWidth;
The height of the visible area of the web page: document.body.clientHeight;

Width of the visible area of the web page: document.body.offsetWidth (including the width of the side lines);
The height of the visible area of the web page: document.body.offsetHeight (including the width of the edge);

setInterval

The setInterval action is used to call functions, methods or objects at certain intervals when playing animation. You can use this action to update variables from the database or update the time display.

The syntax format of the setInterval action is as follows:

 setInterval(function,interval[,arg1,arg2,......argn])
   setInterval(object,methodName,interval[,arg1,arg2,.....argn])

The first format is the default syntax of the setInterval function in the standard action panel, and the second format is the method used in expert mode actions.
The parameter function is a function name or a reference to an anonymous function.
The object parameter specifies an object derived from the Object object. methodName specifies the method to be called in the object parameter.
Interval specifies the time between two calls to function or methodName, in milliseconds. The following arg1 and so on are optional parameters, used to specify the parameters passed to function or methodName.
The time interval setInterval sets is less than the animation frame rate (such as 10 frames per second, equivalent to 100 milliseconds), and the function is called at a time interval as close as possible to interval. And the updateAfterEvent action must be used to ensure that the screen is refreshed with sufficient frequency. If interval is greater than the animation frame rate, it is only called every time the playhead enters a certain frame to reduce the impact of each screen refresh.

clearInterval

The role of the clearInterval action is to clear the call to the setInterval function

Its syntax format is as follows:
ClearInterval(intervalid);

Advertising mobile effect examples

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>简单JS动画实例 广告移动效果</title>
  </head>
  <body>
    <div id="one" style="background-color:red; position:absolute; left:0; top:0; height:100px; height:100px; ">
      移动广告
    </div>
 
    <script type="text/javascript">
      var x=0;    //对象X轴位置
      var y=0;    //对象Y轴位置
      var xs = 10;  //对象X轴移动速度
      var ys = 10;  //对象Y轴移动速度
 
      var one = document.getElementById('one'); 
 
      function move(){
        x += xs; 
        y += ys; 
        one.style.left = x; 
        one.style.top = y; 
        if (x > document.body.clientWidth - one.offsetWidth-20 || x<0) {
          xs = -1*xs;     //速度取反
        }
 
        if (y > document.body.clientHeight - one.offsetHeight-20 || y<0){
          ys = -1*ys; 
        }
      }
      var obj = setInterval('move()', 100); 
 
      one.onmouseover = function(){  //
        clearInterval(obj); 
      }
 
      one.onmouseout = function (){
        obj = setInterval('move()', 100); 
      }
 
    </script>
  </body>
</html>

The above is the entire content of this article, I hope it will be helpful to everyone’s study.

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：JS implementation code to determine whether an element is within an array_javascript skillsNext article：JS implementation code to determine whether an element is within an array_javascript skills

See more

Implementing full-screen floating ads based on javascript_javascript skills

Related articles