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

jq view preview image example sharing

小云云
Release: 2018-03-17 10:58:40
Original
1336 people have browsed it


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>
Copy after login

When the mouse covers <a></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>
Copy after login

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

    $.fn.preview=function(){
        ......
    }
Copy after login

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>
Copy after login

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)
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template