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

时间：2021-05-26

我们想要实现的效果是：

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

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

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

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

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章