집 > 기사 > 웹 프론트엔드 > jquery는 텍스트 내용을 클릭하여 예제 공유를 확대하고 중앙에 배치합니다.

jquery는 텍스트 내용을 클릭하여 예제 공유를 확대하고 중앙에 배치합니다.

小云云원래의: 2018-01-06 10:42:111223검색

이 글은 주로 jquery를 자세히 소개하고 있으며, 텍스트나 사진 내용을 클릭하면 중앙에 표시됩니다. 관심 있는 친구들이 참고하면 도움이 될 것입니다.

우리가 달성하려는 효과는 다음과 같습니다.

작은 그림을 클릭하면 페이지 중앙에 큰 그림이 표시됩니다.

애니메이션 애니메이션 기능을 사용하면 작은 그림에서 큰 그림으로, 작은 그림 위치에서 중앙 위치로 궤적이 있습니다.

IE7 이상 브라우저, Firefox, Google Chrome을 지원합니다.

큰 그림은 중앙에 배치해야 하는데 주로 다음 코드를 사용합니다.

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="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>

코드를 복사하여 페이지에서 직접 보실 수 있습니다.

jquery는 텍스트 내용을 클릭하여 예제 공유를 확대하고 중앙에 배치합니다.

관련 기사