jq voir l'aperçu de l'image exemple de partage-js tutoriel-php.cn

jq voir l'aperçu de l'image exemple de partage

小云云

Libérer： 2018-03-17 10:58:40

original

1299 Les gens l'ont consulté

Déplacez la souris sur la vignette pour afficher la grande image de l'image, et la grande image suivra le mouvement de la souris ; ou déplacez la souris sur le texte d'invite pour afficher l'image. Il contient également une fonction de discrimination de direction. Plus précisément, si la vignette est dans la moitié gauche de la page, la grande image sera affichée sur le côté droit de la souris. Si la vignette est dans la moitié droite de la page, la prévisualisation. la grande image sera sur le côté gauche de l'affichage de la souris.

Analyse des idées

Structure HTML

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

Copier après la connexion

Obtenir l'adresse de l'image d'aperçu lorsque la souris couvre <a></a>
Aperçu de la 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>

Copier après la connexion

Ajouter au corps, utiliser le positionnement absolu
- Développement de plug-ins
Parce que je voulais essayer le modèle de développement de plug-in, j'ai écrit ceci :

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

Copier après la connexion

jQuery.fn = jQuery.prototype
chaque objet jq peut être utilisé

. code source

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

Copier après la connexion

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)

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!