鼠标移到缩略图上会显示该图的大图，并且大图跟随鼠标移动；或是移动到提示文字上，也可以显示图片。并且含有方向判别功能，具体来说就是如果缩略图在页面的左半部分，则大图显示在鼠标的右侧，如果缩略图在页面的右半部分，则预览的大图在鼠标的左侧显示。
思路分析
html结构
缩略图
登录后复制
当鼠标覆盖到时获取预览图地址
预览图结构
"+$(this).attr('title')+"
登录后复制
添加到body，使用绝对定位
– 插件开发
因为想试下插件开发的模式，所以这样写了
$.fn.preview=function(){ ...... }
登录后复制
jQuery.fn = jQuery.prototype.对prototype
每一个jq对象都可以用
源码
.imgbox{ margin-top: 150px; text-align: center;}.imgbox img { display: inline-block; width: 250px; height: 144px;} $(function(){ $("a.preview").preview(); //页面加载完后执行 });
登录后复制
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("![jq查看预览图实例分享]()
![jq查看预览图实例分享]()
"+$(this).attr('title')+"
"); $('#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
登录后复制
以上就是jq查看预览图实例分享的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2781604.html
