Home > Article > Web Front-end > jq view preview image example sharing

jq view preview image example sharing

小云云Original: 2018-03-17 10:58:401303browse

Moving the mouse over the thumbnail will display the large image of the image, and the large image will follow the mouse movement; or move the mouse over the prompt text to display the image. It also contains a direction discrimination function. Specifically, if the thumbnail is in the left half of the page, the large image will be displayed on the right side of the mouse. If the thumbnail is in the right half of the page, the previewed large image will be on the left side of the mouse. show.

Idea analysis

html structure

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

When the mouse covers 3499910bf9dac5ae3c52d5ede7383485</a&gt ;Get the preview image address
Preview image structure

<p id=&#39;preview&#39;><p>
<img src=&#39;"+$(this).attr(&#39;href&#39;)+"&#39; />
<p>"+$(this).attr(&#39;title&#39;)+"</p></p></p>

Add to body, use absolute positioning
- Plug-in development
Because I wanted to try the plug-in development model, I wrote

    $.fn.preview=function(){
        ......
    }

jQuery.fn = jQuery.prototype. For prototype
, each jq object can be used

Source code

<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)

The above is the detailed content of jq view preview image example sharing. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to use the React BootStrap frameworkNext article：How to use the React BootStrap framework

See more

jq view preview image example sharing

Idea analysis

Source code

Related articles