知识大全 js浮动图片的动态效果

Posted 2022-07-20 知

篇首语：你不勇敢，没人替你坚强。本文由小常识网(cha138.com)小编为大家整理，主要介绍了知识大全 js浮动图片的动态效果相关的知识，希望对你有一定的参考价值。

这篇文章介绍了几种JS的动态效果实例有需要的朋友可以参考一下复制代码代码如下: <!DOCTYPE PUBLIC " //W C//DTD HTML Transitional//EN" " <> <head> <meta equiv="Content Type" content="text/; charset=UTF "> <title>浮动图片</title> <script type=text/javascript> var step=; // 移动的像素 var y=; // 垂直移动的方向表示向上表示向下 var x=; // 水平移动的方向表示向左表示向右 function myFloat() var img=document getElementById("myImg"); // 获取图片和当前浏览器窗口上边距由于img style top获取的值带px单位 var top=img style top replace("px" ""); // top=top ; // img style top=top + "px"; // 获取图片和当前浏览器窗口左边距 var left=img style left replace("px" ""); // left=left ; // img style left=left + "px"; // 上下移动 if(top <=) y=; if(top >=document body clientHeight) y=; top=(top* ) + (step * y); img style top=top + "px"; // 左右移动 if(left <=) x=; // alert(img clientWidth); if(left >=(document body clientWidth img clientWidth)) x=; left=(left* ) + (step * x); img style left=left + "px"; setTimeout("myFloat()" ); </script> </head> <body onload="myFloat();" > <img id="myImg" src=" /> </body> </>

　　另一种的实现方式

复制代码代码如下: <> <head> <meta equiv="Content Type" content="text/; charset=gb " /> <title>浮动广告实例</title> <script type=text/javascript> var pos = ; function toueme() document getElementById("toubiao") style display = "none"; function initArray() this length = initArray arguments length; for (var i = ; i < this length; i++) this[i] = initArray arguments[i]; var col = new initArray(" b" " b" " b" " b"); col[ ] = "yellow"; col[ ] = "coral"; col[ ] = "orange"; col[ ] = "red"; col[ ] = "greenyellow"; col[ ] = "lime"; col[ ] = "turquoise"; col[ ] = "coral"; col[ ] = "blueviolet"; col[ ] = "violet"; function chgCol() pos++; if (pos < || pos > ) pos = ; document bgColor = col[pos]; setTimeout("chgCol()" ); </script> </head> <body bgColor="#ffffff" onload="chgCol();pingpong();"> <DIV id=img > <div id=toubiao> <a onClick=toueme()> <img src=close gif width= height= hspace=" " border= ></a> </div> <a href="#" target="_blank"> <img src= jpg width= height= border= > </a> </DIV> <SCRIPT> var xPos = ; var yPos = ; var step = ; var delay = ; var height = ; var Hoffset = ; var Woffset = ; var yon = ; var xon = ; var pause = true; var interval; img style top = yPos; function changePos() width = document body clientWidth; //获取浏览器的宽度 height = document body clientHeight; //获取浏览器的高度 Hoffset = img offsetHeight; Woffset = img offsetWidth; img style left = xPos + document body scrollLeft; img style top = yPos + document body scrollTop; if (yon) yPos = yPos + step; else yPos = yPos step; if (yPos < ) yon = ;yPos = ; if (yPos >= (height Hoffset)) yon = ;yPos = (height Hoffset); if (xon) xPos = xPos + step; else xPos = xPos step; if (xPos < ) xon = ;xPos = ; if (xPos >= (width Woffset)) xon = ;xPos = (width Woffset); function start() img visibility = "visible"; interval = setInterval( changePos() delay); //interval = setTimeout("changePos()" delay); function pause_resume() if(pause) clearInterval(interval); pause = false; else interval = setInterval( changePos() delay); pause = true; start(); </SCRIPT> </body> </>

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

复制代码代码如下: <> <head> <title>JS实现气泡从水中急速上升效果</title> <style type=text/css> body cursor:crosshair;margin: ; padding: ; position:absolute; overflow:hidden; background:#FFF; left: ; top: ; width: %; height: %; </style> <script type=text/javascript> var object = new Array(); nbfm = ; var xm = ; var ym = ; var nx = ; var ny = ; function movbulb() with (this) if(ec < ) if(Math abs(x xm) < && Math abs(y ym) < ) xx = (xm x ) / ; yy = (ym y ) / ; ec++; xx *= ; yy *= ; x = Math round(x + Math cos(y / ) * p) + xx; y += yy v; if(y < h * || x < w * || x > nx + w * ) y = ny + N + h * ; x = nx/ + Math random() * ; ec = ; obj style top = y h; obj style left = x w; function CObj(N img w h) this obj = document createElement("img"); this obj src = img src; this obj style position = "absolute"; this obj style left = ; document body appendChild(this obj); this N = N; this x = ; this y = ; this v = + Math round(( / h) * Math random()); this p = + Math round((w / ) * Math random()); this xx = ; this yy = ; this ec = ; this w = w; this h = h; this movbulb = movbulb; function resize() nx = document body offsetWidth; ny = document body offsetHeight; onresize = resize; document onmousemove = function(e) if (window event) e = window event; xm = document body scrollLeft+(e x || e clientX); ym = document body scrollTop+(e y || e clientY); function run() for(i in object)object[i] movbulb(); setTimeout(run ); onload = function() PIC = document getElementById("bubbles") getElementsByTagName("img"); resize(); for(nbf= ;nbf<nbfm;nbf++) sf = PIC[nbf%PIC length]; object[nbf] = new CObj(nbf sf sf width/ sf height/ ); run(); </script> </head> <body> <div id="bubbles" > <img src=smile gif> <img src=biggrin gif> <img src=eek gif> <img src=rolleyes gif> </div> </body> </>

　　浮动广告

复制代码代码如下: cha138/Article/program/Java/JSP/201311/20253