当前位置: 代码迷 >> Web前端 >> 下一张上一张
  详细解决方案

下一张上一张

热度:109   发布时间:2012-11-01 11:11:31.0
上一张下一张

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

?

效果图(很喜欢的蒙奇奇):

?

 <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>
?
1 楼 twostone 2011-03-16  
没明白。下载的实例也没看明白
2 楼 tokkey 2011-12-02  
姐姐你这个标题应该改一下~!
3 楼 ice-cream 2012-05-11  
tokkey 写道
姐姐你这个标题应该改一下~!

应该怎么改
  相关解决方案