首页 > 文章 > web前端 > jquery单击文字内容放大并居中实例分享

jquery单击文字内容放大并居中实例分享

小云云原创: 2018-01-06 10:42:111220浏览

本文主要为大家详细介绍了jquery单击文字或图片内容放大并居中显示，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。

我们想要实现的效果是：

点击一张小图，会在页面的居中位置显示一张大图。

使用了animate动画函数，有从小图到大图，从小图位置到居中位置的轨迹。

支持IE7及以上浏览器，火狐、谷歌浏览器。

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

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单击文字内容放大并居中实例分享

相关文章