jq查看预览图实例分享

来源：懂视网责编：小采时间：2020-11-27 19:59:22

jq查看预览图实例分享

jq查看预览图实例分享:鼠标移到缩略图上会显示该图的大图，并且大图跟随鼠标移动；或是移动到提示文字上，也可以显示图片。并且含有方向判别功能，具体来说就是如果缩略图在页面的左半部分，则大图显示在鼠标的右侧，如果缩略图在页面的右半部分，则预览的大图在鼠标的左侧显示。思

推荐度：

点击下载本文 文档为doc格式

导读jq查看预览图实例分享:鼠标移到缩略图上会显示该图的大图，并且大图跟随鼠标移动；或是移动到提示文字上，也可以显示图片。并且含有方向判别功能，具体来说就是如果缩略图在页面的左半部分，则大图显示在鼠标的右侧，如果缩略图在页面的右半部分，则预览的大图在鼠标的左侧显示。思

鼠标移到缩略图上会显示该图的大图，并且大图跟随鼠标移动；或是移动到提示文字上，也可以显示图片。并且含有方向判别功能，具体来说就是如果缩略图在页面的左半部分，则大图显示在鼠标的右侧，如果缩略图在页面的右半部分，则预览的大图在鼠标的左侧显示。

思路分析

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查看预览图实例分享

推荐度：

点击下载本文 文档为doc格式

标签：图片分享图片查看

热门焦点

jq查看预览图实例分享

jq查看预览图实例分享

思路分析

源码

jq查看预览图实例分享

最新推荐

猜你喜欢

热门推荐