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 相关文章推荐
jQuery文本框(input textare)事件绑定方法教程
Apr 24 Javascript
js实现最短的XML格式化工具实例
Mar 12 Javascript
JavaScript每天定时更换皮肤样式的方法
Jul 01 Javascript
BootStrap中按钮点击后被禁用按钮的最佳实现方法
Sep 23 Javascript
AngularJS实现给动态生成的元素绑定事件的方法
Dec 14 Javascript
JS实现淡入淡出图片效果的方法分析
Dec 20 Javascript
JS判断数组那点事
Oct 10 Javascript
vue.js 2.*项目环境搭建、运行、打包发布的详细步骤
May 01 Javascript
vue的路由映射问题及解决方案
Oct 14 Javascript
js刷新页面location.reload()用法详解
Dec 09 Javascript
微信小程序自定义联系人弹窗
May 26 Javascript
Vue + ts实现轮播插件的示例
Nov 10 Javascript
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动态变静态原理
2006/11/25 PHP
smarty半小时快速上手入门教程
2014/10/27 PHP
分享php分页的功能模块
2015/06/16 PHP
laravel框架 api自定义全局异常处理方法
2019/10/11 PHP
jquery 弹出层实现代码
2009/10/30 Javascript
javascript 通用简单的table选项卡实现
2010/05/07 Javascript
js 编程笔记 无名函数
2011/06/28 Javascript
基于jquery实现图片广告轮换效果代码
2011/07/07 Javascript
javascript学习笔记(十一) 正则表达式介绍
2012/06/20 Javascript
jQuery中:selected选择器用法实例
2015/01/04 Javascript
Javascript中prototype属性实现给内置对象添加新的方法
2015/05/14 Javascript
Bootstrap文件上传组件之bootstrap fileinput
2016/11/25 Javascript
nodejs构建本地web测试服务器 如何解决访问静态资源问题
2017/07/14 NodeJs
JS基于设计模式中的单例模式(Singleton)实现封装对数据增删改查功能
2018/02/06 Javascript
JavaScript原型继承和原型链原理详解
2020/02/04 Javascript
js、jquery实现列表模糊搜索功能过程解析
2020/03/27 jQuery
javascript 函数的暂停和恢复实例详解
2020/04/25 Javascript
[00:19]CN DOTA NEVER DIE!VG夺冠rOtK接受采访
2019/12/23 DOTA
python 截取 取出一部分的字符串方法
2017/03/01 Python
Python django框架开发发布会签到系统(web开发)
2020/02/12 Python
python判断字符串以什么结尾的实例方法
2020/09/18 Python
高清安全摄像头系统:Lorex Technology
2018/07/20 全球购物
巴黎欧莱雅法国官网:L’Oreal Paris
2019/04/30 全球购物
飞利浦西班牙官方网站:Philips西班牙
2020/02/17 全球购物
建筑自我鉴定
2013/10/19 职场文书
小学教师师德感言
2014/02/10 职场文书
酒店秘书求职信范文
2014/02/17 职场文书
保险公司晨会主持词
2014/03/22 职场文书
安全生产计划书
2014/05/04 职场文书
导航工程专业自荐信
2014/09/02 职场文书
乡镇党的群众路线教育实践活动总结报告
2014/10/30 职场文书
2014小学二年级班主任工作总结
2014/12/05 职场文书
大学生入党自荐书
2015/03/05 职场文书
2015年学校减负工作总结
2015/05/19 职场文书
经典格言警句:没有热忱,世间便无进步
2019/11/13 职场文书
MySQL infobright的安装步骤
2021/04/07 MySQL