Heim > Artikel > Web-Frontend > jquery Klicken Sie auf den Textinhalt, um die Beispielfreigabe zu vergrößern und zu zentrieren

jquery Klicken Sie auf den Textinhalt, um die Beispielfreigabe zu vergrößern und zu zentrieren

小云云Original: 2018-01-06 10:42:111223Durchsuche

Dieser Artikel stellt Ihnen jquery im Detail vor. Klicken Sie auf den Text oder den Bildinhalt, um ihn in der Mitte anzuzeigen. Ich hoffe, er kann jedem helfen.

Der Effekt, den wir erzielen möchten, ist:

Wenn Sie auf ein kleines Bild klicken, wird in der Mitte der Seite ein großes Bild angezeigt.

verwendet die Funktion „Animieren“, die eine Flugbahn vom kleinen Bild zum großen Bild und von der kleinen Bildposition zur zentrierten Position aufweist.

Unterstützt Browser IE7 und höher, Firefox und Google Chrome.

Um das große Bild zentriert zu bekommen, habe ich hauptsächlich den folgenden Code verwendet:

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

Die Breite und Höhe der Bildlaufleiste werden hinzugefügt hier, damit es auch mit Bildlaufleisten zentriert angezeigt werden kann.

Der Hauptcode lautet wie folgt:

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

Der Effekt kann kopiert und auf der Seite angezeigt werden.

Verwandte Empfehlungen:

jquery implementiert das Klicken, um ein Dialogfeld aufzurufen, das vergrößert, zentriert und geschlossen werden kann (mit Download des Demo-Quellcodes). )_jquery

JS-Implementierungsbeispiel für die gemeinsame Nutzung von Bildzentrierung und Floating-Effekt

CSS-Bildzentrierungsmethode mit nicht fester Größe

Das obige ist der detaillierte Inhalt vonjquery Klicken Sie auf den Textinhalt, um die Beispielfreigabe zu vergrößern und zu zentrieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Tutorial zum Erzielen eines Vergrößerungseffekts bei jQuery-MausbewegungsbildernNächster Artikel：Tutorial zum Erzielen eines Vergrößerungseffekts bei jQuery-Mausbewegungsbildern

In Verbindung stehende Artikel

Mehr sehen