search

Home  >  Article  >  Web Front-end  >  Complete example of simple picture floating effect implemented by js_javascript skills

Complete example of simple picture floating effect implemented by js_javascript skills

WBOY
WBOYOriginal
2016-05-16 09:00:003806browse

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>

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.

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：Recommended methods to remember password and enter key to log in using JS to implement login page_javascript skillsNext article：Recommended methods to remember password and enter key to log in using JS to implement login page_javascript skills

Related articles

See more