jq查看预览图实例分享

小云云 原创: 2018-03-17 10:58:40 894浏览

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

思路分析

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查看预览图实例分享的详细内容，更多请关注php中文网其它相关文章！

分享实例预览 PHP课程 HTML视频教程 CSS视频 JS视频教程 Vue视频教程

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。

上一条：React BootStrap框架如何使用下一条：JavaScript移除匿名事件处理函数的方法