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


Posted in Javascript onMay 16, 2015

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
js 获取屏幕各种宽高的方法(浏览器兼容)
May 15 Javascript
Mac/Windows下如何安装Node.js
Nov 22 Javascript
Jquery 实现弹出层插件
Jan 28 Javascript
JS经典正则表达式笔试题汇总
Dec 15 Javascript
canvas简单快速的实现知乎登录页背景效果
May 08 Javascript
微信小程序学习之数据处理详解
Jul 05 Javascript
Angular2 组件交互实例详解
Aug 24 Javascript
JS简单获取并修改input文本框内容的方法示例
Apr 08 Javascript
详解vue-cli中使用rem,vue自适应
May 06 Javascript
微信小程序云开发 搭建一个管理小程序
May 17 Javascript
Vuex中实现数据状态查询与更改
Nov 08 Javascript
Vue实现图书管理案例
Jan 20 Vue.js
js实现精美的银灰色竖排折叠菜单
May 16 #Javascript
JavaScript实现鼠标滑过处生成气泡的方法
May 16 #Javascript
JavaScript中继承用法实例分析
May 16 #Javascript
jQuery实现不断闪烁文字的方法
May 15 #Javascript
javascript实现可拖动变色并关闭层窗口实例
May 15 #Javascript
JavaScript实现简单的数字倒计时
May 15 #Javascript
JavaScript生成福利彩票双色球号码
May 15 #Javascript
You might like
php将数据库导出成excel的方法
2010/05/07 PHP
浅谈关于PHP解决图片无损压缩的问题
2017/09/01 PHP
PHP count_chars()函数讲解
2019/02/14 PHP
Thinkphp5框架实现获取数据库数据到视图的方法
2019/08/14 PHP
jQuery formValidator表单验证插件开源了 含API帮助、源码、示例
2008/08/14 Javascript
javascript addBookmark 加入收藏 多浏览器兼容
2009/08/15 Javascript
火狐下input焦点无法重复获取问题的解决方法
2014/06/16 Javascript
更快的异步执行(setTimeout多浏览器)
2014/08/12 Javascript
jQuery实现响应浏览器缩放大小并改变背景颜色
2014/10/31 Javascript
js实现类似于add(1)(2)(3)调用方式的方法
2015/03/04 Javascript
jquery自定义表格样式
2015/11/23 Javascript
基于zepto的移动端轻量级日期插件--date_picker
2016/03/04 Javascript
详解如何在Vue2中实现组件props双向绑定
2017/03/29 Javascript
angularjs $http实现form表单提交示例
2017/06/09 Javascript
Vue之Mixins(混入)的使用方法
2019/09/24 Javascript
通过高德地图API获得某条道路上的所有坐标用于描绘道路的方法
2020/08/24 Javascript
[46:42]DOTA2-DPC中国联赛正赛 Aster vs Magma BO3 第二场 3月5日
2021/03/11 DOTA
python求crc32值的方法
2014/10/05 Python
Collatz 序列、逗号代码、字符图网格实例
2017/06/22 Python
Python中的__slots__示例详解
2017/07/06 Python
python 定义给定初值或长度的list方法
2018/06/23 Python
python实现简易数码时钟
2021/02/19 Python
使用 Visual Studio Code(VSCode)搭建简单的Python+Django开发环境的方法步骤
2018/12/17 Python
python 函数内部修改外部变量的方法
2018/12/18 Python
Python : turtle色彩控制实例详解
2020/01/19 Python
浅析python表达式4+0.5值的数据类型
2020/02/26 Python
Pycharm连接gitlab实现过程图解
2020/09/01 Python
python归并排序算法过程实例讲解
2020/11/04 Python
世界领先的高品质定制产品平台:Zazzle
2017/07/23 全球购物
意大利奢侈品零售商:ilDuomo Novara
2019/09/11 全球购物
什么是接口(Interface)?
2013/02/01 面试题
诉讼代理人授权委托书
2014/10/11 职场文书
停水通知
2015/04/16 职场文书
在职证明格式样本
2015/06/15 职场文书
聘任书范文大全
2015/09/21 职场文书
python开发的自动化运维工具ansible详解
2021/08/07 Python