jq查看預覽圖實例分享-js教程-PHP中文網

jq查看預覽圖實例分享

小云云

發布： 2018-03-17 10:58:40

原創

1337 人瀏覽過

滑鼠移到縮圖上會顯示該圖的大圖，大圖跟著滑鼠移動；或是移動到提示文字上，也可以顯示圖片。並且含有方向判別功能，具體來說就是如果縮圖在頁面的左半部分，則大圖顯示在滑鼠的右側，如果縮圖在頁面的右半部分，則預覽的大圖在滑鼠的左側顯示。

思路分析

html結構

<a href="xx.jpg">缩略图</a>

登入後複製

當滑鼠覆蓋到<a></a&gt ;時取得預覽圖位址
預覽圖結構

<p id=&#39;preview&#39;><p>
<img src=&#39;"+$(this).attr(&#39;href&#39;)+"&#39; />
<p>"+$(this).attr(&#39;title&#39;)+"</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)){
                    $(&#39;body&#39;).append("<p id=&#39;preview&#39;><p><img src=&#39;"+imgsrc+"&#39; /><p>"+$(this).attr(&#39;title&#39;)+"</p></p></p>");
                    $(&#39;#preview&#39;).css({
                        width:&#39;325px&#39;,
                        position:&#39;absolute&#39;,
                        left:e.pageX+xOffset+&#39;px&#39;,
                        top:e.pageY+yOffset+&#39;px&#39;,
                        backgroundColor:"#eeeeee",
                        padding:"4px",
                        border:"1px solid #f3f3f3",
                        zIndex:1000
                    }),
                    $(&#39;#preview > p > img&#39;).css({
                        width:&#39;100%&#39;,
                        height:&#39;100%&#39;
                    })
                }
            },function () {
                $(&#39;#preview&#39;).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中文網其他相關文章！