jquery點擊文字內容放大並居中實例分享-js教程-PHP中文網

首頁

web前端

js教程

jquery點擊文字內容放大並居中實例分享

小云云

Jan 06, 2018 am 10:42 AM

jquery內容放大

本文主要為大家詳細介紹了jquery點擊文字或圖片內容放大並居中顯示，具有一定的參考價值，有興趣的小伙伴們可以參考一下，希望能幫助到大家。

我們想要實現的效果是：

點擊一張小圖，會在頁面的居中位置顯示一張大圖。

使用了animate動畫函數，有從小圖到大圖，從小圖位置到居中位置的軌跡。

支援IE7以上瀏覽器，火狐、Google瀏覽器。

大圖得居中位置，我主要使用瞭如下程式碼：

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

這裡面加上了滾動條的寬度和高度，這樣可以在有捲軸的情況下也是居中顯示的。

主要的程式碼如下：

<!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="/static/imghwm/default1.png"  data-src="mm1.jpg"  class="lazy"   alt="jquery點擊文字內容放大並居中實例分享" ></li>
    <li><img  src="/static/imghwm/default1.png"  data-src="mm2.jpg"  class="lazy"   alt="jquery點擊文字內容放大並居中實例分享" ></li>
    <li><img  src="/static/imghwm/default1.png"  data-src="mm3.jpg"  class="lazy"   alt="jquery點擊文字內容放大並居中實例分享" ></li>
    <li><img  src="/static/imghwm/default1.png"  data-src="mm4.jpg"  class="lazy"   alt="jquery點擊文字內容放大並居中實例分享" ></li>
  </ul>
  <p class="bigpic" style="display:none;">
    <p class="pic-one"><img  src="/static/imghwm/default1.png"  data-src="m1.jpg"  class="lazy"   alt="jquery點擊文字內容放大並居中實例分享" ></p>
    <p class="pic-two"><img  src="/static/imghwm/default1.png"  data-src="m2.jpg"  class="lazy"   alt="jquery點擊文字內容放大並居中實例分享" ></p>
    <p class="pic-three"><img  src="/static/imghwm/default1.png"  data-src="m3.jpg"  class="lazy"   alt="jquery點擊文字內容放大並居中實例分享" ></p>
    <p class="pic-four"><img  src="/static/imghwm/default1.png"  data-src="m4.jpg"  class="lazy"   alt="jquery點擊文字內容放大並居中實例分享" ></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="/static/imghwm/default1.png"  data-src="+bigpic+"  class="lazy"   alt="jquery點擊文字內容放大並居中實例分享" >");//添加大图
      $(&#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>

效果可複製程式碼，自行在頁面中查看。