js實現(xiàn)精美的圖片跟隨鼠標效果實例
更新時間:2015年05月16日 09:46:16 作者:休閑生活文化
這篇文章主要介紹了js實現(xiàn)精美的圖片跟隨鼠標效果,實例分析了javascript鼠標事件及頁面樣式的操作技巧,需要的朋友可以參考下
本文實例講述了js實現(xiàn)精美的圖片跟隨鼠標效果實現(xiàn)方法。分享給大家供大家參考。具體實現(xiàn)方法如下:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>精美js鼠標跟隨代碼</title> </head> <body> <script> A=document.getElementById B=document.all; C=document.layers; T1=new Array("trail1.gif",38,35,"trail2.gif",30,31,"trail3.gif",28,26,"trail4.gif",22,21,"trail5.gif",16,16,"trail6.gif",10,10) var offsetx=15 var offsety=10 nos=parseInt(T1.length/3) rate=50 ie5fix1=0; ie5fix2=0; rightedge=B? document.body.clientWidth-T1[1] : window.innerWidth-T1[1]-20 bottomedge=B? document.body.scrollTop+document.body.clientHeight-T1[2] : window.pageYOffset+window.innerHeight-T1[2] for (i=0;i<nos;i++){ createContainer("CUR"+i,i*10,i*10,i*3+1,i*3+2,"","<img src='"+T1[i*3]+"' width="+T1[(i*3+1)]+" height="+T1[(i*3+2)]+"border=0>") } function createContainer(N,Xp,Yp,W,H,At,HT,Op,St){ with (document){ write((!A && !B) ? "<layer id='"+N+"' left="+Xp+" top="+Yp+" width="+W+" height="+H : "<div id='"+N+"'"+"style='position:absolute;left:"+Xp+"; top:"+Yp+"; width:"+W+"; height:"+H+"; "); if(St){ if (C) write(" style='"); write(St+";' ") } else write((A || B)?"'":""); write((At)? At+">" : ">"); write((HT) ? HT : ""); if (!Op) closeContainer(N) } } function closeContainer(){ document.write((A || B)?"</div>":"</layer>") } function getXpos(N){ if (A) return parseInt(document.getElementById(N).style.left) else if (B) return parseInt(B[N].style.left) else return C[N].left } function getYpos(N){ if (A) return parseInt(document.getElementById(N).style.top) else if (B) return parseInt(B[N].style.top) else return C[N].top } function moveContainer(N,DX,DY){ c=(A)? document.getElementById(N).style : (B)? B[N].style : (C)? C[N] : ""; if (!B){ rightedge=window.innerWidth-T1[1]-20 bottomedge=window.pageYOffset+window.innerHeight-T1[2] } c.left=Math.min(rightedge, DX+offsetx); c.top=Math.min(bottomedge, DY+offsety); } function cycle(){ //if (IE5) if (document.all&&window.print){ ie5fix1=document.body.scrollLeft; ie5fix2=document.body.scrollTop; } for (i=0;i<(nos-1);i++){ moveContainer("CUR"+i,getXpos("CUR"+(i+1)),getYpos("CUR"+(i+1))) } } function newPos(e){ moveContainer("CUR"+(nos-1),(B)?event.clientX+ie5fix1:e.pageX+2,(B)?event.clientY+ie5fix2:e.pageY+2) } function getedgesIE(){ rightedge=document.body.clientWidth-T1[1] bottomedge=document.body.scrollHeight-T1[2] } if (B){ window.onload=getedgesIE window.onresize=getedgesIE } if(document.layers) document.captureEvents(Event.MOUSEMOVE) document.onmousemove=newPos setInterval("cycle()",rate) </script> </body> </html>
希望本文所述對大家的javascript程序設(shè)計有所幫助。
相關(guān)文章
JavaScript實現(xiàn)仿Clock ISO時鐘
這篇文章給大家分享了JavaScript實現(xiàn)仿Clock ISO時鐘的方法以及實例代碼,有興趣的朋友參考學習下下。2018-06-06ES6新數(shù)據(jù)結(jié)構(gòu)Map功能與用法示例
這篇文章主要介紹了ES6新數(shù)據(jù)結(jié)構(gòu)Map功能與用法,結(jié)合實例形式分析了Map的功能、使用方法及相關(guān)注意事項,需要的朋友可以參考下2017-03-03JS實現(xiàn)為動態(tài)添加的元素增加事件功能示例【基于事件委托】
這篇文章主要介紹了JS實現(xiàn)為動態(tài)添加的元素增加事件功能,結(jié)合實例形式分析了javascript基于事件委托實現(xiàn)針對動態(tài)添加的元素增加事件的相關(guān)操作技巧,需要的朋友可以參考下2018-03-03兩款JS腳本判斷手機瀏覽器類型跳轉(zhuǎn)WAP手機網(wǎng)站
本文通過兩款js腳本判斷手機瀏覽器類型跳轉(zhuǎn)到wap手機網(wǎng)站,感興趣的小伙伴快來學習吧2015-10-10如何編寫一個 Webpack Loader的實現(xiàn)
這篇文章主要介紹了如何編寫一個 Webpack Loader的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-10-10