效果演示:
源码下载:
点击下载
实现代码:
<!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;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>