欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jquery单击文字或图片内容放大并居中显示

程序员文章站 2022-11-19 20:56:25
我们想要实现的效果是: 点击一张小图,会在页面的居中位置显示一张大图。 使用了animate动画函数,有从小图到大图,从小图位置到居中位置的轨迹。 支持ie7及以上浏...

我们想要实现的效果是:

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

使用了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>

效果可复制代码,自行在页面中查看。

jquery单击文字或图片内容放大并居中显示

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。