背景图跟随鼠标移动的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 相关文章推荐
javascript 数组排序函数
Aug 20 Javascript
实现png图片和png背景透明(支持多浏览器)的方法
Sep 08 Javascript
jQuery的三种$()
Dec 30 Javascript
JavaScript基础篇之变量作用域、传值、传址的简单介绍与实例
Jun 29 Javascript
让新消息在网页标题闪烁提示的jQuery代码
Nov 04 Javascript
js实现网页随机切换背景图片的方法
Nov 01 Javascript
node.js中的fs.renameSync方法使用说明
Dec 16 Javascript
JavaScript仿百度图片浏览效果
Nov 23 Javascript
jQuery实现动态添加tr到table的方法
Dec 26 Javascript
微信通过页面(H5)直接打开本地app的解决方法
Sep 09 Javascript
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
Sep 20 jQuery
vue自定义过滤器创建和使用方法详解
Nov 06 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 显示客户端IP与服务器IP的代码
2010/10/12 PHP
PHP字符编码问题之GB2312 VS UTF-8解决方法
2011/06/23 PHP
CodeIgniter实现更改view文件夹路径的方法
2014/07/04 PHP
PHP实现的mysql主从数据库状态检测功能示例
2017/07/20 PHP
使用jQuery轻松实现Ajax的实例代码
2010/08/16 Javascript
JQuery 1.3.2以上版本中出现pareseerror错误的解决方法
2011/01/11 Javascript
浅谈javascript回调函数
2014/12/07 Javascript
浅谈JavaScript中小数和大整数的精度丢失
2016/05/31 Javascript
AngularJS实现单独作用域内的数据操作
2016/09/05 Javascript
Javascrip实现文字跳动特效
2016/11/27 Javascript
vue中用H5实现文件上传的方法实例代码
2017/05/27 Javascript
最基础的vue.js双向绑定操作
2017/08/23 Javascript
vue使用vue-i18n实现国际化的实现代码
2018/04/08 Javascript
Layui 数据表格批量删除和多条件搜索的实例
2019/09/04 Javascript
[06:24]DOTA2 2015国际邀请赛中国区预选赛第二日TOP10
2015/05/27 DOTA
Python合并多个装饰器小技巧
2015/04/28 Python
基于python的字节编译详解
2017/09/20 Python
Linux下python与C++使用dlib实现人脸检测
2018/06/29 Python
python selenium自动上传有赞单号的操作方法
2018/07/05 Python
python实现京东秒杀功能
2018/07/30 Python
Python 忽略warning的输出方法
2018/10/18 Python
使用coverage统计python web项目代码覆盖率的方法详解
2019/08/05 Python
python中的subprocess.Popen()使用详解
2019/12/25 Python
利用Pytorch实现简单的线性回归算法
2020/01/15 Python
香港No.1得奖零食网:香港零食大王
2016/07/22 全球购物
日本著名化妆品零售网站:Cosme Land
2019/03/01 全球购物
茱莉蔻美国官网:Jurlique美国
2020/11/24 全球购物
土木工程师岗位职责
2013/11/24 职场文书
英文导游词
2015/02/13 职场文书
2015学习委员工作总结范文
2015/04/03 职场文书
导游词之吉林吉塔
2019/11/11 职场文书
Python 读写 Matlab Mat 格式数据的操作
2021/05/19 Python
Python爬取用户观影数据并分析用户与电影之间的隐藏信息!
2021/06/29 Python
JavaWeb 入门篇(3)ServletContext 详解 具体应用
2021/07/16 Java/Android
使用canvas对video视频某一刻截图功能
2021/09/25 HTML / CSS
一文搞懂Golang 时间和日期相关函数
2021/12/06 Golang