背景图跟随鼠标移动的Mootools插件实现代码


Posted in Javascript onDecember 12, 2011

效果演示:
背景图跟随鼠标移动的Mootools插件实现代码
源代码:

<script style="text/javascript" src="https://ajax.googleapis.com/ajax/libs/mootools/1.4.1/mootools-yui-compressed.js"></script> 
</head> 
<body id='a'> 
<h2 class='a'>Single images</h2> 
<div id='bsfdimg' style='background:url("/upload/201112/20111212204031245.jpg") no-repeat scroll -50px -50px transparent;width:260px;height:200px;' w='392' h='600'></div> 
<script type='text/javascript'> 
var MoveBKimg=new Class({ 
initialize:function(){ 
this.$L=0; 
this.$T=0; 
}, 
Todo:function(i,opt){ 
this.opt={ 
bw:opt.bw || 0, //容器宽度 
bh:opt.bh || 0, 
iw:opt.iw || 0, //图像宽度 
ih:opt.ih || 0, 
X:opt.X || 0, //鼠标的clientX坐标 
Y:opt.Y || 0 
};o=this.opt; 
if(!i || !o.iw || !o.ih || !o.bw || !o.bh){return false;} 
o.iw=o.iw-o.bw; //图像实际可被移动的x轴范围 
o.ih=o.ih-o.bh; 
var P=i.getStyle('background-position');P=P.split(" ");//取得目前背景图的position值,并拆分转为Int型 
P[0]=P[0].toInt();P[0]=(P[0].abs()>o.iw)?((P[0]<0)?-o.iw:o.iw):P[0];//背景图目前的X偏移,并对值进行2次修正 
P[1]=P[1].toInt();P[1]=(P[1].abs()>o.ih)?((P[1]<0)?-o.ih:o.ih):P[1]; 
console.log(o.X+'|'+o.Y); 
if(o.X>this.$L){//往右移鼠标图片往左跑 




this.$L=o.X; 
P[0]=(o.iw<(P[0]-10))?o.iw:(P[0]-10); 
} 
if(o.X<this.$L){//往左移鼠标图片往右跑 





this.$L=o.X; 
P[0]=((P[0]+10)>0)?0:(P[0]+10); 
} 
if(o.Y>this.$T){//往下移鼠标图片往上跑 





this.$T=o.Y; 
P[1]=(o.ih<(P[1]-10))?o.ih:(P[1]-10); 
} 
if(o.Y<this.$T){//往上移鼠标图片往下跑 





this.$T=o.Y; 
P[1]=((P[1]+10)>0)?0:(P[1]+10); 
} 
i.setStyle('background-position',''+P[0]+'px '+P[1]+'px');//重新给背景图的position赋值 
} 
}); 
El=$('bsfdimg'); 
var MoveBKimg=new MoveBKimg(); 
El.addEvent('mousemove',function(event){ 
MoveBKimg.Todo(El,{bw:260,bh:200,iw:392,ih:600,X:event.client.x,Y:event.client.y}); 
}) 
</script>
Javascript 相关文章推荐
心扬JS分页函数代码
Sep 10 Javascript
jquery提升性能最佳实践小结
Dec 06 Javascript
表单切换,用回车键替换Tab健(不支持IE)
Jul 20 Javascript
javascript针对DOM的应用实例(一)
Apr 15 Javascript
js为空或不是对象问题的快速解决方法
Dec 11 Javascript
jQuery循环滚动新闻列表示例代码
Jun 17 Javascript
jquery Validation表单验证使用详解
Sep 12 Javascript
JavaScript实现带标题的图片轮播特效
May 20 Javascript
Javascript实现图片加载从模糊到清晰显示的方法
Jun 21 Javascript
vue-cli启动本地服务局域网不能访问的原因分析
Jan 22 Javascript
Vue表单及表单绑定方法
Sep 04 Javascript
vue 父组件给子组件传值子组件给父组件传值的实例代码
Apr 15 Javascript
用Mootools获得操作索引的两种方法分享
Dec 12 #Javascript
整理8个很棒的 jQuery 倒计时插件和教程
Dec 12 #Javascript
关于event.cancelBubble和event.stopPropagation()的区别介绍
Dec 11 #Javascript
Jquery阻止事件冒泡 event.stopPropagation
Dec 11 #Javascript
远离JS灾难css灾难之 js私有函数和css选择器作为容器
Dec 11 #Javascript
EasyUI的treegrid组件动态加载数据问题的解决办法
Dec 11 #Javascript
FireFox下XML对象转化成字符串的解决方法
Dec 09 #Javascript
You might like
PHP操作XML作为数据库的类
2010/12/19 PHP
11个PHPer必须要了解的编程规范
2014/09/22 PHP
php常用的url处理函数总结
2014/11/19 PHP
JavaScript 中的事件教程
2007/04/05 Javascript
JavaScript 动态创建VML的方法
2009/10/14 Javascript
HTML颜色选择器实现代码
2010/11/23 Javascript
jQuery.Validate验证库的使用介绍
2013/04/26 Javascript
JQuery事件e参数的方法preventDefault()取消默认行为
2013/09/26 Javascript
JQuery1.8 判断元素是否绑定事件的方法
2014/07/10 Javascript
JavaScript获取网页中第一个链接ID的方法
2015/04/03 Javascript
浅谈javascript事件取消和阻止冒泡
2015/05/26 Javascript
javascript发送短信验证码实现代码
2015/11/12 Javascript
JavaScript程序中实现继承特性的方式总结
2016/06/24 Javascript
基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)
2016/09/02 Javascript
JS作用域链详解
2017/06/26 Javascript
开发Vue树形组件的示例代码
2017/12/21 Javascript
Express的HTTP重定向到HTTPS的方法
2018/06/06 Javascript
详解JavaScript的内存空间、赋值和深浅拷贝
2019/04/17 Javascript
Vue 数据绑定的原理分析
2020/11/16 Javascript
[04:44]DOTA2英雄梦之声_第12期_矮人直升机
2014/06/21 DOTA
Python 分析Nginx访问日志并保存到MySQL数据库实例
2014/03/13 Python
Python numpy实现二维数组和一维数组拼接的方法
2018/06/05 Python
django解决跨域请求的问题
2018/11/11 Python
python生成带有表格的图片实例
2019/02/03 Python
Python GUI编程完整示例
2019/04/04 Python
python使用celery实现异步任务执行的例子
2019/08/28 Python
Python执行时间的几种计算方法
2020/07/31 Python
Django DRF认证组件流程实现原理详解
2020/08/17 Python
CSS3实现圆角、阴影、透明效果并兼容各大浏览器
2014/08/08 HTML / CSS
英国领先的票务代理商之一:The Ticket Factory
2019/02/09 全球购物
2014年售票员工作总结
2014/11/19 职场文书
机关单位工作失职检讨书
2014/11/20 职场文书
趣味运动会简讯
2015/07/20 职场文书
婚礼答谢词范文
2015/09/29 职场文书
2016大学生就业指导课心得体会
2016/01/15 职场文书
Python Pandas解析读写 CSV 文件
2022/04/11 Python