原始需求:移到图片的左边，显示向左的箭头,移到图片的右边，显示向右的箭头。与QQ的相册的图片上的翻页一个特性。
明了的需求，不绕弯，直接上代码。看看便明。
<head>
<title>Js实现的图片分页导航</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="Generator" content="EditPlus" />
<meta name="Author" content="Dicky">
<meta name="Keywords" content="ENSONFLY'S BLOG:http://ensonfly.guwancun.com/">
<script language="javascript" type="text/javascript">
<!--
var ImageID = 0;
function SetImageID(e) {
var image;
if (typeof (img) != 'object') {
image = document.createElement("img");
image.src = e.src;
}
var ax = getLeft(e);
//算出鼠标离当前图片的左边缘的距离
var axa = parseInt(window.event.screenX) - ax;
// var aya = parseInt(window.event.screenY) - ay;
ImageID = axa <= image.width / 2 ? e.preImageID : e.nextImageID;
if (e.preImageID != 0 || e.nextImageID != 0) {
if (axa <= image.width / 2 && ImageID != 0) {
e.style.cursor = "url(" + "http://imgcache.qq.com/qzone/client/photo/cursor/pre.ani" + ")";
e.title = "点击跳到上一张";
}
else if (axa > image.width / 2 && ImageID != 0) {
e.style.cursor = "url(" + "http://imgcache.qq.com/qzone/client/photo/cursor/next.ani" + ")";
e.title = "点击跳到下一张";
}
}
}
//获取元素的横坐标
function getLeft(e) {
var offset = e.offsetLeft;
if (e.offsetParent != null) offset += getLeft(e.offsetParent);
return offset;
}
function GoToNewImage() {
if (ImageID != 0) {
window.location = "/shop/detail.aspx?id=" + ImageID;
}
}
//-->
</script>
</head>
<body>
<table align="center" border="1">
<tr>
<td>
<img src="http://images.cnblogs.com/logo.gif" onmousemove="SetImageID(this)"
onclick="GoToNewImage()" preimageid="2" nextimageid="3" />
</td>
</tr>
</table>
</body>
</html>
<title>Js实现的图片分页导航</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="Generator" content="EditPlus" />
<meta name="Author" content="Dicky">
<meta name="Keywords" content="ENSONFLY'S BLOG:http://ensonfly.guwancun.com/">
<script language="javascript" type="text/javascript">
<!--
var ImageID = 0;
function SetImageID(e) {
var image;
if (typeof (img) != 'object') {
image = document.createElement("img");
image.src = e.src;
}
var ax = getLeft(e);
//算出鼠标离当前图片的左边缘的距离
var axa = parseInt(window.event.screenX) - ax;
// var aya = parseInt(window.event.screenY) - ay;
ImageID = axa <= image.width / 2 ? e.preImageID : e.nextImageID;
if (e.preImageID != 0 || e.nextImageID != 0) {
if (axa <= image.width / 2 && ImageID != 0) {
e.style.cursor = "url(" + "http://imgcache.qq.com/qzone/client/photo/cursor/pre.ani" + ")";
e.title = "点击跳到上一张";
}
else if (axa > image.width / 2 && ImageID != 0) {
e.style.cursor = "url(" + "http://imgcache.qq.com/qzone/client/photo/cursor/next.ani" + ")";
e.title = "点击跳到下一张";
}
}
}
//获取元素的横坐标
function getLeft(e) {
var offset = e.offsetLeft;
if (e.offsetParent != null) offset += getLeft(e.offsetParent);
return offset;
}
function GoToNewImage() {
if (ImageID != 0) {
window.location = "/shop/detail.aspx?id=" + ImageID;
}
}
//-->
</script>
</head>
<body>
<table align="center" border="1">
<tr>
<td>
<img src="http://images.cnblogs.com/logo.gif" onmousemove="SetImageID(this)"
onclick="GoToNewImage()" preimageid="2" nextimageid="3" />
</td>
</tr>
</table>
</body>
</html>
总结:
1、obj.style.cursor中url的图片必须是.ani的图片，否则无法显示。
2、要想让IIS支持.ani文件，还需要对IIS做一点小小的改动，见下图：
注：以上代码只在IE上做过测试，其它浏览器可能不支持。
