javascript现实类似QQ相册相片间的导航

javascript现实类似QQ相册相片间的导航

原始需求:移到图片的左边，显示向左的箭头,移到图片的右边，显示向右的箭头。与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 >

总结:

1、obj.style.cursor中url的图片必须是.ani的图片，否则无法显示。

2、要想让IIS支持.ani文件，还需要对IIS做一点小小的改动，见下图：

注：以上代码只在IE上做过测试，其它浏览器可能不支持。

posted on 2009-04-30 02:13  加冰的可乐 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/jun-person/archive/2009/04/30/1446633.html