首页 >web前端 >js教程 >js浮动图片的动态效果_javascript技巧

js浮动图片的动态效果_javascript技巧

WBOY
WBOY原创
2016-05-16 17:29:111316浏览
复制代码 代码如下:





浮动图片



js浮动图片的动态效果_javascript技巧 style="max-width:90%" />



另一种的实现方式
复制代码 代码如下:




浮动广告实例



     style="Z-INDEX: 100;
     LEFT: 12px;
     WIDTH: 159px;
     POSITION: absolute;
     TOP: 143px;
     HEIGHT: 161px;
 visibility: visible;">
 
 
 js浮动图片的动态效果_javascript技巧
 

 

<script><BR>var xPos = 0;<BR>var yPos = 0;<BR>var step = 3;<BR>var delay = 100;<BR>var height = 0;<BR>var Hoffset = 0;<BR>var Woffset = 0;<BR>var yon = 0;<BR>var xon = 0;<BR>var pause = true;<BR>var interval;<BR>img1.style.top = yPos;<BR>function changePos()<BR>{<BR> width = document.body.clientWidth; //获取浏览器的宽度<BR> height = document.body.clientHeight; //获取浏览器的高度<BR>Hoffset = img1.offsetHeight;<BR>Woffset = img1.offsetWidth;<BR>img1.style.left = xPos + document.body.scrollLeft;<BR>img1.style.top = yPos + document.body.scrollTop;<BR>if (yon)<BR>{yPos = yPos + step;}<BR>else<BR>{yPos = yPos - step;}<BR>if (yPos < 0)<BR>{yon = 1;yPos = 0;}<BR>if (yPos >= (height - Hoffset))<BR>{yon = 0;yPos = (height - Hoffset);}<BR>if (xon)<BR>{xPos = xPos + step;}<BR>else<BR>{xPos = xPos - step;}<BR>if (xPos < 0)<BR>{xon = 1;xPos = 0;}<BR>if (xPos >= (width - Woffset))<BR>{xon = 0;xPos = (width - Woffset); }<BR>}<BR>function start()<BR>{<BR>img1.visibility = "visible";<BR>interval = setInterval('changePos()', delay);<BR>//interval = setTimeout("changePos()", delay);<BR>}<BR>function pause_resume()<BR>{<BR>if(pause)<BR>{<BR>clearInterval(interval);<BR>pause = false;}<BR>else<BR>{<BR>interval = setInterval('changePos()',delay);<BR>pause = true;<BR>}<BR>}<BR>start();<BR></script>



JS实现气泡从水中急速上升效果
复制代码 代码如下:



JS实现气泡从水中急速上升效果








浮动广告
复制代码 代码如下:




浮动广告







声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn