<
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上做过测试,其它浏览器可能不支持。