背景图跟随鼠标移动的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 学习 几种常用方法
Jun 11 Javascript
JS打印gridview实现原理及代码
Feb 05 Javascript
中文路径导致unitpngfix.js不正常的解决方法
Jun 26 Javascript
jquery实现向下滑出的二级导航下滑菜单效果
Aug 25 Javascript
jQuery基于扩展实现的倒计时效果
May 14 Javascript
jQuery实现鼠标选中文字后弹出提示窗口效果【附demo源码】
Sep 05 Javascript
elemetUi 组件--el-upload实现上传Excel文件的实例
Oct 27 Javascript
关于vue项目中搜索节流的实现代码
Sep 17 Javascript
Vue 中使用富文本编译器wangEditor3的方法
Sep 26 Javascript
JavaScript碰撞检测原理及其实现代码
Mar 12 Javascript
原生JavaScript实现贪吃蛇游戏
Nov 04 Javascript
微信小程序中target和currentTarget的区别小结
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
ThinkPHP中Session用法详解
2014/11/29 PHP
php中session_id()函数详细介绍,会话id生成过程及session id长度
2015/09/23 PHP
php使用Header函数,PHP_AUTH_PW和PHP_AUTH_USER做用户验证
2016/05/04 PHP
thinkphp5+layui实现的分页样式示例
2019/10/08 PHP
jquery插件jbox使用iframe关闭问题
2009/02/09 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器(优化篇)
2013/06/28 Javascript
无刷新上传文件并返回自定义值
2015/06/11 Javascript
Backbone.js的Hello World程序实例
2015/06/19 Javascript
jquery+CSS3实现3D拖拽相册效果
2016/07/18 Javascript
jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】
2016/09/21 Javascript
JavaScript原生节点操作小结
2017/01/17 Javascript
详解VueJs异步动态加载块
2017/03/09 Javascript
vue源码学习之Object.defineProperty对象属性监听
2018/05/30 Javascript
jsonp跨域获取数据的基础教程
2018/07/01 Javascript
微信小程序时间标签和时间范围的联动效果
2019/02/15 Javascript
每天学点Vue源码之vm.$mount挂载函数
2019/03/11 Javascript
vxe-table vue table 表格组件功能
2019/05/26 Javascript
vue-cli创建的项目中的gitHooks原理解析
2020/02/14 Javascript
[47:31]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第一场 12.12
2020/12/16 DOTA
python使用mailbox打印电子邮件的方法
2015/04/30 Python
Python实现批量修改文件名实例
2015/07/08 Python
Python中集合的内建函数和内建方法学习教程
2015/08/19 Python
Python计算字符宽度的方法
2016/06/14 Python
python smtplib模块实现发送邮件带附件sendmail
2018/05/22 Python
python requests 测试代理ip是否生效
2018/07/25 Python
python 判断linux进程,并杀死进程的实现方法
2019/07/01 Python
python join方法使用详解
2019/07/30 Python
PyQt5+python3+pycharm开发环境配置教程
2020/03/24 Python
咖啡厅创业计划书范本
2014/01/22 职场文书
中学劳技课教师的自我评价
2014/02/05 职场文书
旅游市场营销方案
2014/03/09 职场文书
和谐拯救危机观后感
2015/06/15 职场文书
标准版个人借条怎么写?以及什么是借条?
2019/08/28 职场文书
Vue3.0 手写放大镜效果
2021/07/25 Vue.js
使用CSS连接数据库的方式
2022/02/28 HTML / CSS
Vue操作Storage本地化存储
2022/04/29 Vue.js