Complete example of simple picture floating effect implemented by js

Complete example of simple picture floating effect implemented by js_javascript skills

WBOY

Release： 2016-05-16 09:00:00

Original

3831 people have browsed it

the example in this article describes the simple image floating effect implemented by js. share it with everyone for your reference, the details are as follows:

use the window object to achieve the floating effect of a picture

1. there is an existing advertising div, which we want to control, its starting point (0,0)

2. set the horizontal and vertical speed

3. control the movement of advertising div

1) whether the advertising div reaches the border
2) if we reach the boundary, we set the speed to move in the opposite direction

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
div{
 position:absolute;
}
img{
 position:absolute; 
 filter:alpha(opacity=100);/* IE */
 -moz-opacity:1;/* Moz + FF */
 opacity: 1;/* 支持CSS3的浏览器（FF 1.5也支持）*/
}
</style>
</head>
<body>
<div id="divimg"><img  src="123.jpg"    style="max-width:90%"  style="max-width:90%" alt="Complete example of simple picture floating effect implemented by js_javascript skills" ></div>
<script language="JavaScript" type="text/javascript">
 //获取图片所在的div对象
 var img=document.getElementById("divimg");
 //设置div 左上角坐标 ，起始点的坐标
 var x=10,y=10;
 //设置图片的行进速度
 var xSpeed=2,ySpeed=1;
 //设置图片的最大浮动的高度和宽度
 var w=document.documentElement.clientWidth-110,h=document.documentElement.clientHeight-160;
 function floatimg(){
  //比较图盘是否到达边界 
  //如果到达边界以后，我们控制图片改变方向
  if(x>w||x<0){ xSpeed= -xSpeed; }
  if(y>h||y<0){ ySpeed= -ySpeed; }
  //如果没有达到边界，设置图片的左上角的坐标
  //设置坐标值 起始坐标+速度
  x+=xSpeed;
  y+=ySpeed;
 img.style.top=y+"px";
 img.style.left=x+"px";
 //延迟调用函数floatimg()，每个40毫秒调用一次
 setTimeout("floatimg()",40);
 }
 floatimg();
</script>
</body>
</html>

Copy after login

readers who are interested in more javascript-related content can check out the special topics on this site: "summary of javascript switching effects and techniques" "javascript search algorithm skills summary", "javascript summary of animation special effects and techniques", "summary of javascript errors and debugging techniques", "summary of javascript data structures and algorithm techniques", "summary of javascript traversal algorithms and techniques" and "summary of javascript mathematical operations usage"

i hope this article will be helpful to everyone in javascript programming.