功能
鼠标移到缩略图上会显示该图的大图,并且大图跟随鼠标移动;或是移动到提示文字上,也可以显示图片。并且含有方向判别功能,具体来说就是如果缩略图在页面的左半部分,则大图显示在鼠标的右侧,如果缩略图在页面的右半部分,则预览的大图在鼠标的左侧显示。
思路分析
- html结构
<a href="xx.jpg">缩略图</a>
当鼠标覆盖到<a></a>
时获取预览图地址
预览图结构
<div id='preview'><div><img src='"+$(this).attr('href')+"' /><p>"+$(this).attr('title')+"</p></div></div>
添加到body,使用绝对定位
- 插件开发
因为想试下插件开发的模式,所以这样写了
$.fn.preview=function(){
......
}
jQuery.fn = jQuery.prototype.对prototype
每一个jq对象都可以用
源码
<style>
.imgbox{
margin-top: 150px;
text-align: center;
}
.imgbox img {
display: inline-block;
width: 250px;
height: 144px;
}
</style>
<script>
$(function(){
$("a.preview").preview(); //页面加载完后执行
});
</script>
<body>
<div class="page">
<div class="imgbox">
<a class="preview" href="./img/cool_couple_dark.jpg" title="cool cuple"><img src="./img/cool_couple_dark.jpg" alt="cool couple"></a>
<a class="preview" href="./img/cool_couple_dark.jpg" title="cool cuple"><img src="./img/cool_couple_dark.jpg" alt="cool couple"></a>
<a class="preview" href="./img/cool_couple_dark.jpg" title="cool cuple"><img src="./img/cool_couple_dark.jpg" alt="cool couple"></a>
<a class="preview" href="./img/cool_couple_dark.jpg" title="cool cuple"><img src="./img/cool_couple_dark.jpg" alt="cool couple"></a>
<a class="preview" href="./img/cool_couple_dark.jpg" title="cool cuple">查看</a>
</div>
</div>
</body>
jquery-imgpreview.js
(function($){
$.fn.preview=function () {
$(this).each(function () { var xOffset = 10; var yOffset = 20; var screenW =$(window).width(); $(this).hover(function (e) { var imgsrc= $(this).attr("href") if(/.png$|.gif$|.jpg$|.bmp$/.test(imgsrc)){ $('body').append("<div id='preview'><div><img src='"+imgsrc+"' /><p>"+$(this).attr('title')+"</p></div></div>"); $('#preview').css({ width:'325px', position:'absolute', left:e.pageX+xOffset+'px', top:e.pageY+yOffset+'px', backgroundColor:"#eeeeee", padding:"4px", border:"1px solid #f3f3f3", zIndex:1000 }), $('#preview > div > img').css({ width:'100%', height:'100%' }) } },function () { $('#preview').remove(); }).mousemove(function(e){ $("#preview").css("top",e.pageY+ "px") if(e.pageX < screenW/2){ $("#preview").css("left",(e.pageX + xOffset) + "px").css("right","auto"); }else{ $("#preview").css("right",(screenW - e.pageX + xOffset) + "px").css("left","auto"); } }); })
}
})(jQuery)