jq查看预览图实例分享
程序员文章站
2022-04-01 09:56:32
...
鼠标移到缩略图上会显示该图的大图，并且大图跟随鼠标移动；或是移动到提示文字上，也可以显示图片。并且含有方向判别功能，具体来说就是如果缩略图在页面的左半部分，则大图显示在鼠标的右侧，如果缩略图在页面的右半部分，则预览的大图在鼠标的左侧显示。
思路分析
html结构
<a href="xx.jpg">缩略图</a>
当鼠标覆盖到<a></a>时获取预览图地址
预览图结构
<p id='preview'><p>
<img src='"+$(this).attr('href')+"' />
<p>"+$(this).attr('title')+"</p></p></p>
添加到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>
<p class="page">
<p 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>
</p>
</p></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("<p id='preview'><p><img src='"+imgsrc+"' /><p>"+$(this).attr('title')+"</p></p></p>");
$('#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 > p > 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)
以上就是jq查看预览图实例分享的详细内容，更多请关注其它相关文章！