jQuery实现图片放大预览实现原理及代码

对于一些比较小的图片，通过鼠标移动到图片上进行放大显示，原理很简单，就是将图片显示的尺寸变大后放在浏览器的一个指定位置，从而实现图片的放大预览。以下是代码：复制代码代码如下：DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' head titlejQuery图片预览/title脚本类型=' text/JAVAScript ' src=' http : js/jquery-1。10 .2 .量滴js /脚本样式类型=' text/CSS '正文{ font-size :12 pxpadding:50px }。clsImg { padding-top :300 px；} .imgAttr { position : absolute height :225 px宽度宽度：300像素边界：1像素固体# ccc左边距left :135 pxdisplay : none }/style脚本类型=' text/JavaScript ' $(function(){ var x=0；var y=0；$('img ').鼠标悬停（函数(e) { //鼠标移动到图片上添加事件，显示放大图片$('#imgShow ').attr('src '，this.src).show()；});$('img ').mouseout(函数(){ //鼠标从图片移开图片隐藏$('#imgShow ').hide()；});})/script/head body img class=' imgAttr ' id=' imgShow ' src=' http : ' alt=' '/img class=' Clsimg ' src=' http : img 1。jpg ' alt=' '/img class=' Clsimg ' src=' http : img 2。jpg ' alt=' '/img class=' Clsimg ' src=' http 3360 img 3。jpg ' alt=' '/img初始页面

鼠标放到第三个图片的效果