我们想要实现的效果是：

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

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

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

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

var width=$(' .警报').查找(' img ').宽度();//大图得宽高var height=$(' .警报').查找(' img ').高度();var lwidth=$(窗口)。宽度();//屏幕中页面可见区域的宽高var LH三=$(窗口)。高度();var x2=lwidth/2-width/2 $(window ).scrolleft()；//在屏幕居中的坐标变量y2=左侧h8/2-高度/2 $(窗户)。滚动顶部()；这里面加上了滚动条的宽度和高度，这样可以在有滚动条的情况下也是居中显示的。

主要的代码如下：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 '标题单击文字或图片内容放大显示/title脚本src='http:/jquery-1。8 .3 .量滴js /脚本样式* {边际：0划水：0;} ul { overflow : hidden list-style : none；margin :1000 px auto } ul Li { float : left高度：150 px宽度宽度width:130pxmargin:0 10px }。big pic { position : absolutedidisplay : none }。警报{ background : # fffborder : solid # CCC 1 xpadding :10 px }。警报a .关闭{绝对位置：top :0 right :0 }/style/head body ul liimg src=' http :mm 1。jpg '/Li liimg src=' http :mm 2。jpg '/Li liimg src=' http :mm 3。jpg '/Li liimg src=' http :mm 4。jpg '/Li/ul div class=' big pic ' style=' display : none；div class=' pic-one ' img src=' http : m1。jpg '/div class=' pic-two ' img src=' http : m2。jpg '/div class=' pic-three ' img src=' http : m3。jpg '/div class=' http : m3。jpg '/div/div class=' alert ' style=' display : one ' a class=' close ' href=' JavaScript :rel='外部' nofollow '关闭/a /div脚本var x=0；var y=0；$('ul li ').点击（函数(e){ var索引=$(this)).index()；x=e.pageX|| e.clientX $(窗口)。scrolleft()；//鼠标点击的坐标y=e.pageY|| e.clientY $(窗口)。滚动顶部()；$('.警报').css({position:'absolute '，top:y，left:x，width:'1px '，height:'1px '，overflow : ' hidden ' })；var bigpic=$(' .bigpic ').查找(' div ').eq(指数)。查找(' img ').attr(' src ')；//找到相对应的大图片$('.警报').查找(' img ').移除();$('.警报').追加(' img src=' http : big pic ' ')；//添加大图$('.警报').show()；var width=$(' .警报').查找(' img ').宽度();//大图得宽高var height=$(' .警报').查找(' img ').高度();var lwidth=$(窗口)。宽度();//屏幕页面可见区域的宽高var LH三=$(窗口)。高度();var x2=lwidth/2-width/2 $(window ).scrolleft()；//在屏幕居中的坐标变量y2=左侧h8/2-高度/2 $(窗户)。滚动顶部()；$('.警报img ').CSS({ width : ' 100% ' })；$('.警报').动画({left:x2，top:y2，width:width，height:height}，300)；}) //这出现一个问题，当警报宽度和高度都为15px时或以下，如果不加填充，img是100%,就会造成图片不是从左上角开始的，上面就会有空白，这是因为父元素是块状元素，有自己的行间距，二他的子元素是行内元素，这样就会有空隙，此时解决方法有两个， //给img加上显示：块属性，形成块状元素；//或者img还是内联元素，此时使用垂直对齐：top可以向上对齐。 //把父元素的间距设置为0,或者父元素的字体大小设置为0yekeyi $(' .警报a . close ').单击(function(){//console。log(x ` ` y))；$('.警报').动画({left:x，top:y，width:'1px '，height:'1px'}，300)；//全局变量$('.警报').淡出(100)；})/脚本/正文/html效果可复制代码，自行在页面中查看。

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