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 相关文章推荐
《JavaScript高级程序设计》阅读笔记(三) ECMAScript中的引用类型
Feb 27 Javascript
Jquery获取元素的父容器对象示例代码
Feb 10 Javascript
js使用for循环查询数组中是否存在某个值
Aug 12 Javascript
jQuery修改li下的样式以及li下的img的src的值的方法
Nov 02 Javascript
node.js中的fs.fsyncSync方法使用说明
Dec 15 Javascript
AngularJS折叠菜单实现方法示例
May 18 Javascript
jQuery EasyUI的TreeGrid查询功能实现方法
Aug 08 jQuery
利用JavaScript的%做隔行换色的实例
Nov 25 Javascript
MVVM框架下实现分页功能示例
Jun 14 Javascript
layui异步加载table表中某一列数据的例子
Sep 16 Javascript
微信小程序开发中var that =this的用法详解
Jan 18 Javascript
解决vue页面刷新,数据丢失的问题
Nov 24 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
反射调用private方法实践(php、java)
2015/12/21 PHP
PHP基于imagick扩展实现合成图片的两种方法【附imagick扩展下载】
2017/11/14 PHP
php中关于换行的实例写法
2019/09/26 PHP
jquery 获取json数据实现代码
2009/04/27 Javascript
jQuery 入门级学习笔记及源码
2010/01/22 Javascript
js 省地市级联选择
2010/02/07 Javascript
解读JavaScript中 For, While与递归的用法
2013/05/07 Javascript
js遍历、动态的添加数据的小例子
2013/06/22 Javascript
基于jQuery实现的扇形定时器附源码下载
2015/10/20 Javascript
this,this,再次讨论javascript中的this,超全面(经典)
2016/01/05 Javascript
JS阻止事件冒泡行为和闭包的方法
2016/06/16 Javascript
jQuery文字提示与图片提示效果实现方法
2016/07/04 Javascript
jQuery实现边框动态效果的实例代码
2016/09/23 Javascript
Node.js中路径处理模块path详解
2016/11/14 Javascript
利用JS实现简单的瀑布流加载图片效果
2017/04/22 Javascript
详谈jQuery中使用attr(), prop(), val()获取value的异同
2017/04/25 jQuery
详谈js原型继承的一些问题
2017/09/06 Javascript
Angular2+如何去除url中的#号详解
2017/12/20 Javascript
8个有意思的JavaScript面试题
2019/07/30 Javascript
在Node.js中将SVG图像转换为PNG,JPEG,TIFF,WEBP和HEIF格式的方法
2019/08/22 Javascript
iSlider手机端图片滑动切换插件使用详解
2019/12/24 Javascript
在Python中用has_key()方法查找键是否存在的教程
2015/05/21 Python
解决Python出现_warn_unsafe_extraction问题的方法
2016/03/24 Python
Python基于PyGraphics包实现图片截取功能的方法
2017/12/21 Python
python实现简易版计算器
2020/06/22 Python
Python实现手写一个类似django的web框架示例
2018/07/20 Python
python通过txt文件批量安装依赖包的实现步骤
2019/08/13 Python
python3 常见解密加密算法实例分析【base64、MD5等】
2019/12/19 Python
5个你不知道的HTML5的接口介绍
2013/08/07 HTML / CSS
养殖项目策划书范文
2014/01/13 职场文书
遗体告别仪式答谢词
2014/01/23 职场文书
财务管理职业生涯规划书
2014/02/26 职场文书
会议主持词
2014/03/17 职场文书
服装设计专业毕业生求职信
2014/04/09 职场文书
2020年元旦晚会策划书模板
2019/12/30 职场文书
详解redis分布式锁的这些坑
2021/05/19 Redis