javascript 图片滚动效果代码一例

发布时间:2020-06-30编辑:脚本学堂
本篇文章介绍了,javascript实现的图片滚动效果的代码一例,有需要的朋友,可以参考下。

代码如下:
 

复制代码 代码示例:

 <html> 
 <head> 
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 <title>javascript图片滚动效果-www.jb200.com</title> 
 <style> 
 div{ 
  position:absolute; 
 } 
 </style> 
 </head> 
 <body> 
 <div id="divimg">
 <!--实际测试时,请将以下图片替换为真实图片路径-->
 <img src="http://www.jb200.com/images/12s31649450-234b6.png" width="150" height="150"> 
 </div> 
 <script language="javascript" type="text/javascript"> 
 //获取图片div对象 
 var img=document.getElementById("divimg"); 

 //设置div左上角 起始点坐标 
 var x=0,y=0; 
  
 //设置图片的行进速度 
 var xSpeed=5,ySpeed=5; 
  
 //设置图片的最大浮动高度和宽度 
 var w=document.body.clientWidth-150,h=document.body.clientHeight-150; 
  
  
 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"; 
  
 setTimeout("floatimg()",50); 
  
 } 
 floatimg(); 
 </script> 
 </body> 
 </html>