脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js实现精美的图片跟随鼠标效果

js实现精美的图片跟随鼠标效果实例

 更新时间：2015年05月16日 09:46:16   作者：休闲生活文化  
这篇文章主要介绍了js实现精美的图片跟随鼠标效果,实例分析了javascript鼠标事件及页面样式的操作技巧,需要的朋友可以参考下

本文实例讲述了js实现精美的图片跟随鼠标效果实现方法。分享给大家供大家参考。具体实现方法如下：

<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程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • 一些很实用且必用的小脚本代码

    一些很实用且必用的小脚本代码

    一些很实用且必用的小脚本代码...
    2006-08-08
  • 老生常谈原生JS执行环境与作用域

    老生常谈原生JS执行环境与作用域

    下面小编就为大家带来一篇老生常谈原生JS执行环境与作用域。小编觉得挺不错的，希望对大家有所帮助。一起跟随小编过来看看吧，祝大家游戏愉快哦
    2016-11-11
  • HTML中使背景图片自适应浏览器大小实例详解

    HTML中使背景图片自适应浏览器大小实例详解

    这篇文章主要介绍了HTML中使背景图片自适应浏览器大小实例详解的相关资料,需要的朋友可以参考下
    2017-04-04
  • 详解微信小程序支付流程与梳理

    详解微信小程序支付流程与梳理

    这篇文章主要介绍了详解微信小程序支付流程与梳理，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-07-07
  • JavaScript内存管理与闭包实例详解

    JavaScript内存管理与闭包实例详解

    不管什么样的编程语言,在代码的执行过程中都是需要给它分配内存的,下面这篇文章主要给大家介绍了关于JavaScript内存管理与闭包的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-06-06
  • 说明你的Javascript技术很烂的五个原因

    说明你的Javascript技术很烂的五个原因

    Javascript在互联网上名声很臭，但你又很难再找到一个像它这样如此动态、如此被广泛使用、如此根植于我们的生活中的另外一种语言。
    2011-04-04
  • JS将秒换成时分秒实现代码

    JS将秒换成时分秒实现代码

    将秒换成时分秒的方法有很多，在本文将为大家介绍下，使用js的具体的实现思路，有需要的朋友可以参考下，希望对大家有所帮助
    2013-09-09
  • Javascript实现视频轮播在pc端与移动端均可

    Javascript实现视频轮播在pc端与移动端均可

    用Javascript实现视频轮播，毕竟是客户的需求吗？所以尽量实现下,下面有个实现视频轮播的示例，pc端与移动端均可以实现，感兴趣的朋友可以了解下
    2013-09-09
  • 只出现一次的提示信息(js+cookies)

    只出现一次的提示信息(js+cookies)

    只显示一次的提示信息，刷新一页面或第二次来到这个页面，就不会再弹出提示窗口了，用在网页上是想当实用的吧，因为很多人都不希望经常弹出什么窗口，本效果因此会提升用户体验，让用户喜欢你的网页
    2013-03-03
  • JavaScript字符串的长度问题

    JavaScript字符串的长度问题

    这篇文章主要介绍了JavaScript字符串的长度问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-02-02

最新评论