Home  >  Article  >  Web Front-end  >  Dynamic effect of js floating pictures_javascript skills

Dynamic effect of js floating pictures_javascript skills

WBOY
WBOYOriginal
2016-05-16 17:29:111293browse
Copy code The code is as follows:





Floating image



style="position: absolute; left: 500px; top: 400px; border: solid 1px black; " />



Another implementation method
Copy the code The code is as follows:




浮动广告实例



     style="Z-INDEX: 100;
     LEFT: 12px;
     WIDTH: 159px;
     POSITION: absolute;
     TOP: 143px;
     HEIGHT: 161px;
 visibility: visible;">
 
 
 
 

 

<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实现气泡从水中急速上升效果








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




浮动广告







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