jQuery实现图⽚放⼤预览实现原理及代码
对于⼀些⽐较⼩的图⽚，通过⿏标移动到图⽚上进⾏放⼤显⽰，原理很简单，就是将图⽚显⽰的尺⼨变⼤后放在浏览器的⼀个指定位置，从⽽实现图⽚的放⼤预览。以下是代码：
复制代码代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/1999/xhtml">
<head>
<title>jQuery图⽚预览</title>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<style type="text/css">
body{font-size:12px; padding:50px;}
.clsImg{padding-top:300px;}
.imgAttr{position:absolute; height:225px; width:300px; border:1px solid #ccc; margin-left:135px; display:none;}
</style>
<script type="text/javascript">
$(function () {
var x = 0;
var y = 0;jquery在线图片
$("img").mouseover(function (e) { //⿏标移动到图⽚上添加事件，显⽰放⼤图⽚
$("#imgShow").attr("src", this.src).show();
});
$("img").mouseout(function () { //⿏标从图⽚移开图⽚隐藏
$("#imgShow").hide();
});
})
</script>
</head>
<body>
<img class="imgAttr" id="imgShow" src="" alt=""/>
<img class="clsImg" src="img1.jpg" alt=""/>
<img class="clsImg" src="img2.jpg" alt=""/>
<img class="clsImg" src="img3.jpg" alt=""/>
<img class="clsImg" src="img4.jpg" alt=""/>
</body>
</html>
初始页⾯：
⿏标放到第三个图⽚的效果：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。