溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

jquery單擊文字或圖片內(nèi)容放大并居中顯示

發(fā)布時(shí)間：2020-10-15 08:51:39 來源：腳本之家 閱讀：175 作者：小太陽zxr 欄目：web開發(fā)

我們想要實(shí)現(xiàn)的效果是：

點(diǎn)擊一張小圖，會(huì)在頁面的居中位置顯示一張大圖。

使用了animate動(dòng)畫函數(shù)，有從小圖到大圖，從小圖位置到居中位置的軌跡。

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

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

var width=$('.alert').find('img').width();//大圖得寬高
var height=$('.alert').find('img').height();
var lwidth=$(window).width();//屏幕中頁面可見區(qū)域的寬高
var lheight=$(window).height();
var x2=lwidth/2-width/2+$(window).scrollLeft();//在屏幕居中的坐標(biāo)
var y2=lheight/2-height/2+$(window).scrollTop();

這里面加上了滾動(dòng)條的寬度和高度，這樣可以在有滾動(dòng)條的情況下也是居中顯示的。

主要的代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>單擊文字或圖片內(nèi)容放大顯示</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" >
    <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" >
    <a class="close" href="javascript:;" rel="external nofollow" >關(guān)閉</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();//鼠標(biāo)點(diǎn)擊的坐標(biāo)
      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');//找到相對(duì)應(yīng)的大圖片
      $('.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();//屏幕頁面可見區(qū)域的寬高
      var lheight=$(window).height();
      var x2=lwidth/2-width/2+$(window).scrollLeft();//在屏幕居中的坐標(biāo)
      var y2=lheight/2-height/2+$(window).scrollTop();
      $('.alert img').css({width:'100%'});
      $('.alert').animate({left:x2,top:y2,width:width,height:height},300);
    })
    //這出現(xiàn)一個(gè)問題，當(dāng)alert寬度和高度都為15px時(shí)或以下，如果不加padding，img是100%，就會(huì)造成圖片不是從左上角開始的，上面就會(huì)有空白，這是因?yàn)楦冈厥菈K狀元素，有自己的行間距，二他的子元素是行內(nèi)元素，這樣就會(huì)有空隙，此時(shí)解決方法有兩個(gè)，
    // 給img加上display:block屬性，形成塊狀元素；
    // 或者img還是內(nèi)聯(lián)元素，此時(shí)使用vertical-align:top可以向上對(duì)齊。
    //把父元素的間距設(shè)置為0，或者父元素的font-size設(shè)置為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>

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

jquery單擊文字或圖片內(nèi)容放大并居中顯示

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手