Mootools实现鼠标移动背景图随之移动效果

发布时间：2018-08-13 14:09:45 所属栏目：活动来源：站长网

导读：Mootools实现鼠标移动背景图随之移动效果，这是《一周学会Mootools 1.4中文系列教程》中作者完成的效果，引入了Mootools脚本，背景图随着鼠标移动而移动的东西。效果： !DOCTYPE htmlhtml xmlns=http://www.w3.org/1999/xhtmlheadmeta http-equiv=Content

　　Mootools实现鼠标移动背景图随之移动效果，这是《一周学会Mootools 1.4中文系列教程》中作者完成的效果，引入了Mootools脚本，背景图随着鼠标移动而移动的东西。

　　效果：

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <script style="text/javascript" src="/uploads/common/js/mootools-yui-compressed.js"></script> </head> <body id='a'> <h2 class='a'>Single images</h2> <div id='bsfdimg' style='background:url("/uploads/common/images/wall1.jpg") no-repeat scroll -50px -50px transparent;width:260px;height:200px;' w='392' h='600' onmousemove='Hotel_Room_MoveImage(this,event)'></div> <script type='text/javascript'> var $L=$T=0; function Hotel_Room_MoveImage(i,event){//控制背景图 var i=$(i) var imgSize=i.getProperties('w','h');//图像尺寸 //alert(imgSize) imgSize.w=imgSize.w-270; imgSize.h=imgSize.h-210; var imgBack=i.getStyle('background-position'); imgBack=imgBack.split(" "); imgBack[0]=imgBack[0].toInt();//背景图X偏移 imgBack[0]=(imgBack[0].abs()>imgSize.w)?((imgBack[0]<0)?-imgSize.w:imgSize.w):imgBack[0]; imgBack[1]=imgBack[1].toInt();//背景图Y偏移 imgBack[1]=(imgBack[1].abs()>imgSize.h)?((imgBack[1]<0)?-imgSize.h:imgSize.h):imgBack[1]; var L=event.clientX; var T=event.clientY; if(L>$L){//往右移鼠标图片往左跑 $L=L; imgBack[0]=(imgSize.w<(imgBack[0]-10))?imgSize.w:(imgBack[0]-10); } if(L<$L){//往左移鼠标图片往右跑 $L=L; imgBack[0]=((imgBack[0]+10)>0)?0:(imgBack[0]+10); } if(T>$T){//往下移鼠标图片往上跑 $T=T; imgBack[1]=(imgSize.h<(imgBack[1]-10))?imgSize.h:(imgBack[1]-10); } if(T<$T){//往上移鼠标图片往下跑 $T=T; imgBack[1]=((imgBack[1]+10)>0)?0:(imgBack[1]+10); } i.setStyle('background-position',''+imgBack[0]+'px '+imgBack[1]+'px'); } </script> </body> </html> <div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>
提示：可修改后代码再运行!

（编辑：核心网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!