Maison >interface Web >js tutoriel >jquery cliquez sur le contenu du texte pour agrandir et centrer l'exemple de partage

jquery cliquez sur le contenu du texte pour agrandir et centrer l'exemple de partage

小云云original: 2018-01-06 10:42:111259parcourir

Cet article vous présente principalement jquery en détail. Cliquez sur le contenu du texte ou de l'image pour l'agrandir et l'afficher au centre. Les amis intéressés peuvent s'y référer.

L'effet que nous souhaitons obtenir est :

Cliquez sur une petite image et une grande image s'affichera au centre de la page.

utilise la fonction d'animation animée, qui a une trajectoire de la petite image à la grande image, et de la position de la petite image à la position centrée.

Prend en charge les navigateurs IE7 et supérieurs, Firefox et Google Chrome.

Pour centrer la grande image, j'ai principalement utilisé le code suivant :

var width=$(&#39;.alert&#39;).find(&#39;img&#39;).width();//大图得宽高
var height=$(&#39;.alert&#39;).find(&#39;img&#39;).height();
var lwidth=$(window).width();//屏幕中页面可见区域的宽高
var lheight=$(window).height();
var x2=lwidth/2-width/2+$(window).scrollLeft();//在屏幕居中的坐标
var y2=lheight/2-height/2+$(window).scrollTop();

La largeur et la hauteur de la barre de défilement sont ajoutées ici, il peut donc être affiché centré même avec des barres de défilement.

Le code principal est le suivant :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>单击文字或图片内容放大显示</title>
  <script src="../jquery-1.8.3.min.js"></script>
  <style>
    *{margin:0;padding:0;}
    ul{overflow:hidden;list-style:none;margin:1000px auto;}
    ul li{float:left;height:150px;width:130px;margin:0 10px;}
    .bigpic{position:absolute;display:none;}
    .alert{background:#fff;border:solid #ccc 1px;padding:10px;}
    .alert a.close{position:absolute;top:0;right:0;}
  </style>
</head>
<body>
  <ul>
    <li><img src="mm1.jpg"></li>
    <li><img src="mm2.jpg"></li>
    <li><img src="mm3.jpg"></li>
    <li><img src="mm4.jpg"></li>
  </ul>
  <p class="bigpic" style="display:none;">
    <p class="pic-one"><img src="m1.jpg"></p>
    <p class="pic-two"><img src="m2.jpg"></p>
    <p class="pic-three"><img src="m3.jpg"></p>
    <p class="pic-four"><img src="m4.jpg"></p>
  </p>
  <p class="alert" style="display:none;">
    <a class="close" href="javascript:;" rel="external nofollow" >关闭</a>
  </p>
  <script>
    var x=0;
    var y=0;
    $(&#39;ul li&#39;).click(function(e){
      var index=$(this).index();
      x= e.pageX|| e.clientX+$(window).scrollLeft();//鼠标点击的坐标
      y= e.pageY|| e.clientY+$(window).scrollTop();
      $(&#39;.alert&#39;).css({position:&#39;absolute&#39;,top:y,left:x,width:&#39;1px&#39;,height:&#39;1px&#39;,overflow:&#39;hidden&#39;});
      var bigpic=$(&#39;.bigpic&#39;).find(&#39;p&#39;).eq(index).find(&#39;img&#39;).attr(&#39;src&#39;);//找到相对应的大图片
      $(&#39;.alert&#39;).find(&#39;img&#39;).remove();
      $(&#39;.alert&#39;).append("<img src="+bigpic+">");//添加大图
      $(&#39;.alert&#39;).show();
      var width=$(&#39;.alert&#39;).find(&#39;img&#39;).width();//大图得宽高
      var height=$(&#39;.alert&#39;).find(&#39;img&#39;).height();
      var lwidth=$(window).width();//屏幕页面可见区域的宽高
      var lheight=$(window).height();
      var x2=lwidth/2-width/2+$(window).scrollLeft();//在屏幕居中的坐标
      var y2=lheight/2-height/2+$(window).scrollTop();
      $(&#39;.alert img&#39;).css({width:&#39;100%&#39;});
      $(&#39;.alert&#39;).animate({left:x2,top:y2,width:width,height:height},300);
    })
    //这出现一个问题，当alert宽度和高度都为15px时或以下，如果不加padding，img是100%，就会造成图片不是从左上角开始的，上面就会有空白，这是因为父元素是块状元素，有自己的行间距，二他的子元素是行内元素，这样就会有空隙，此时解决方法有两个，
    // 给img加上display:block属性，形成块状元素；
    // 或者img还是内联元素，此时使用vertical-align:top可以向上对齐。
    //把父元素的间距设置为0，或者父元素的font-size设置为0yekeyi
    $(&#39;.alert a.close&#39;).click(function(){
      //console.log(x+&#39;"&#39;+y);
      $(&#39;.alert&#39;).animate({left:x,top:y,width:&#39;1px&#39;,height:&#39;1px&#39;},300);  //全局变量
      $(&#39;.alert&#39;).fadeOut(100);
    })
  </script>
</body>
</html>

L'effet peut être copié et visualisé sur la page.

Recommandations associées :

jquery implémente un clic pour faire apparaître une boîte de dialogue qui peut être agrandie, centrée et fermée (avec téléchargement du code source de la démo )_jquery

Exemple d'implémentation JS partage du centrage d'image et de l'effet flottant

Méthode de centrage d'image CSS avec taille non fixe

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：Tutoriel sur la façon d'obtenir un effet de grossissement sur les images animées de la souris jQueryArticle suivant：Tutoriel sur la façon d'obtenir un effet de grossissement sur les images animées de la souris jQuery

Articles Liés

Voir plus