Maison > Article > interface Web > jq voir l'aperçu de l'image exemple de partage

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

小云云original: 2018-03-17 10:58:401300parcourir

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>

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

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(){
        ......
    }

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>

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)

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment utiliser le framework React BootStrapArticle suivant：Comment utiliser le framework React BootStrap

Articles Liés

Voir plus