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

jQuery实现图片放大原理很简单,就是将图片显示的尺寸变大后放在浏览器的一个指定位置,从而实现图片的放大预览,下面有个不错的示例,感兴趣的朋友可以参考下

对于一些比较小的图片,通过鼠标移动到图片上进行放大显示,原理很简单,就是将图片显示的尺寸变大后放在浏览器的一个指定位置,从而实现图片的放大预览。以下是代码:

复制代码 代码如下:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery图片预览</title>
<script type="text/javascript" src="https://www.jb51.net/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;
$("img").mouseover(function (e) { //鼠标移动到图片上添加事件,显示放大图片
$("#imgShow").attr("src", this.src).show();
});
$("img").mouseout(function () { //鼠标从图片移开图片隐藏
$("#imgShow").hide();
});
})

</script>
</head>
<body>
<img src="" alt=""/>
<img src="https://www.jb51.net/img1.jpg" alt=""/>
<img src="https://www.jb51.net/img2.jpg" alt=""/>
<img src="https://www.jb51.net/img3.jpg" alt=""/>
<img src="https://www.jb51.net/img4.jpg" alt=""/>

</body>
</html>


初始页面:

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

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

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

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wdzjsd.html