jquery單擊文字或圖片內容放大并居中顯示

2019-11-19 16:15:54

字體：大中小

來源：轉載

供稿：網友

我們想要實現的效果是：

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

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

支持IE7及以上瀏覽器，火狐、谷歌瀏覽器。

大圖得居中位置，我主要使用了如下代碼：

var width=$('.alert').find('img').width();//大圖得寬高var height=$('.alert').find('img').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="mm1.jpg"></li>    <li><img src="mm2.jpg"></li>    <li><img src="mm3.jpg"></li>    <li><img src="mm4.jpg"></li>  </ul>  <div class="bigpic" style="display:none;">    <div class="pic-one"><img src="m1.jpg"></div>    <div class="pic-two"><img src="m2.jpg"></div>    <div class="pic-three"><img src="m3.jpg"></div>    <div class="pic-four"><img src="m4.jpg"></div>  </div>  <div class="alert" style="display:none;">    <a class="close" href="javascript:;" rel="external nofollow" >關閉</a>  </div>  <script>    var x=0;    var y=0;    $('ul li').click(function(e){      var index=$(this).index();      x= e.pageX|| e.clientX+$(window).scrollLeft();//鼠標點擊的坐標      y= e.pageY|| e.clientY+$(window).scrollTop();      $('.alert').css({position:'absolute',top:y,left:x,width:'1px',height:'1px',overflow:'hidden'});      var bigpic=$('.bigpic').find('div').eq(index).find('img').attr('src');//找到相對應的大圖片      $('.alert').find('img').remove();      $('.alert').append("<img src="+bigpic+">");//添加大圖      $('.alert').show();      var width=$('.alert').find('img').width();//大圖得寬高      var height=$('.alert').find('img').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();      $('.alert img').css({width:'100%'});      $('.alert').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    $('.alert a.close').click(function(){      //console.log(x+'```'+y);      $('.alert').animate({left:x,top:y,width:'1px',height:'1px'},300);  //全局變量      $('.alert').fadeOut(100);    })  </script></body></html>

效果可復制代碼，自行在頁面中查看。