刚用Mootools写了一个随着鼠标移动而背景图也跟着移动的东西

最新推荐文章于 2022-08-02 22:10:01 发布

ditu7778

最新推荐文章于 2022-08-02 22:10:01 发布

阅读量239

点赞数 1

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/see7di/archive/2011/11/15/2249148.html

版权

效果演示:

源码下载:
点击下载

实现代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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="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("http://www.eg-live.com.tw/@upload/2182/07_7e4cb.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');//图像尺寸
        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>

转载于:https://www.cnblogs.com/see7di/archive/2011/11/15/2249148.html

ditu7778

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
刚用Mootools写了一个随着鼠标移动而背景图也跟着移动的东西

效果演示:源码下载:点击下载实现代码:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xh...
复制链接

扫一扫