剛用Mootools寫了一個隨著滑鼠移動而背景圖也跟著移動的東西
阿新 • • 發佈：2019-02-17
<!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>