上一张下一张

预览照片的常用功能：上一张下一张

 

效果图（很喜欢的蒙奇奇）：

 

 <script type="text/javascript">
	  $(function(){
	    viewClick();
	  })
      function viewClick(){
        var x = 10;//定义x的偏移量
        var y = 10;//定义y的偏移量
        $("img").mousemove(function(e){
          var positionX=e.originalEvent.x-$(this).offset().left||e.originalEvent.layerX-$(this).offset().left||0;//获取当前鼠标相对img的x坐标        
          var tipText;//定义提示标题
          if(positionX<=$(this).width()/2)//当当前鼠标相对x坐标小于图片宽度的一半时执行
          {
            $('p').remove();//移除p标签
            $('a').attr('href','http://www.google.com');//修改a标签的href属性以改变链接
            tipText="google";
          }
          else
          {
            $('p').remove();
            $('a').attr('href','http://ice-cream.iteye.com/');
            tipText="ice-cream";
          }
          $("body").append("<p id='view-click'>"+ tipText +"</p>");//在body标签里添加这个p标签，实现提示功能
          $("#view-click").css({"top":(e.pageY + y) + "px","left":(e.pageX + x) + "px"}).fadeIn("fast");//为id为view-click的元素设置css样式
        },
        function(){
          $("#view-click").remove();//鼠标移动时移除view-click，实现提示和鼠标的相对位置不变
        });
        $("img").mouseout(function(e){
          $("#view-click").remove();//鼠标移出img标签时不再显示view-click，用remove函数将其移除
        });
      };
    </script>

 

<style>
      *{margin:0;padding:0;border:0;}
      body{padding:100px;}
      #view-click{position:absolute;border:1px solid #000;padding:3px 5px;background:#fff;display:none;}
</style>
<a href="" class="view-click"><img src="demo.jpg"  /></a>

 

评论

3 楼 ice-cream 2012-05-11  

tokkey 写道

姐姐你这个标题应该改一下~！

应该怎么改

2 楼 tokkey 2011-12-02  

姐姐你这个标题应该改一下~！

1 楼 twostone 2011-03-16  

没明白。下载的实例也没看明白