预览照片的常用功能:上一张下一张
?
效果图(很喜欢的蒙奇奇):
?
<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 写道
姐姐你这个标题应该改一下~!
应该怎么改
