背景图跟随鼠标移动的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 相关文章推荐
读jQuery之五(取DOM元素)
Jun 20 Javascript
浅析JavaScript中的类型和对象
Nov 29 Javascript
jquery根据属性和index来查找属性值并操作
Jul 25 Javascript
jQuery对象的length属性用法实例
Dec 27 Javascript
Javascript URI 解析介绍
Mar 15 Javascript
Bootstrap每天必学之滚动监听
Mar 16 Javascript
详解JavaScript中this关键字的用法
May 26 Javascript
js生成随机数(指定范围)的实例代码
Jul 10 Javascript
JavaScript 是什么意思
Sep 22 Javascript
jquery+ajax实现省市区三级联动 (封装和不封装两种方式)
May 15 jQuery
小程序实现列表倒计时功能
Jan 29 Javascript
vue实现可移动的悬浮按钮
Mar 04 Vue.js
用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网站基础优化方法小结
2008/09/29 PHP
POSIX 风格和兼容 Perl 风格两种正则表达式主要函数的类比(preg_match, preg_replace, ereg, ereg_replace)
2010/10/12 PHP
常用的PHP数据库操作方法(MYSQL版)
2011/06/08 PHP
简单的php写入数据库类代码分享
2011/07/26 PHP
利用php下载xls文件(自己动手写的)
2014/04/18 PHP
ThinkPHP中数据操作案例分析
2015/09/27 PHP
PHP身份证校验码计算方法
2016/08/10 PHP
PHP实现文字写入图片功能
2019/02/18 PHP
用JavaScript脚本实现Web页面信息交互
2006/12/21 Javascript
JavaScript中Array 对象相关的几个方法
2006/12/22 Javascript
Javascript面向对象扩展库代码分享
2012/03/27 Javascript
jQuery 删除/替换DOM元素的几种方式
2014/05/20 Javascript
JQuery判断radio是否选中并获取选中值的示例代码
2014/10/17 Javascript
JavaScript 里的类数组对象
2015/04/08 Javascript
jQuery实现的跨容器无缝拖动效果代码
2016/06/21 Javascript
JavaScript简介_动力节点Java学院整理
2017/06/26 Javascript
Js利用prototype自定义数组方法示例
2017/10/20 Javascript
JavaScript 面向对象基础简单示例
2019/10/02 Javascript
深入学习Vue nextTick的用法及原理
2019/10/08 Javascript
vue请求数据的三种方式
2020/03/04 Javascript
JavaScript Tab菜单实现过程解析
2020/05/13 Javascript
[50:04]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第二局
2016/02/28 DOTA
python条件和循环的使用方法
2013/11/01 Python
python多线程socket编程之多客户端接入
2017/09/12 Python
详解用Python实现自动化监控远程服务器
2019/05/18 Python
keras获得某一层或者某层权重的输出实例
2020/01/24 Python
html5标记文字_动力节点Java学院整理
2017/07/11 HTML / CSS
html5的自定义data-*属性与jquery的data()方法的使用
2014/07/02 HTML / CSS
详解HTML5中的Communication API基本使用方法
2016/01/29 HTML / CSS
Python面试题:Python是如何进行内存管理的
2014/08/04 面试题
外企求职信范文分享
2013/12/31 职场文书
2015年党员创先争优公开承诺书
2015/04/27 职场文书
公司2015年终工作总结
2015/05/26 职场文书
python爬取企查查企业信息之selenium自动模拟登录企查查
2021/04/08 Python
浅谈Python魔法方法
2021/06/28 Java/Android
Python之matplotlib绘制饼图
2022/04/13 Python