基本信息
源码名称:jquery 弹出放大图片例子源码下载
源码大小:0.43M
文件格式:.zip
开发语言:js
更新时间:2015-03-24
   友情提示:(无需注册或充值,赞助后即可获取资源下载链接)

     嘿,亲!知识可是无价之宝呢,但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下,绝对物超所值哦!如有下载和支付问题,请联系我们QQ(微信同号):813200300

本次赞助数额为: 2 元 
   源码介绍

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>可以重叠的鼠标点击图片放大,再次点击关闭</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.magnifier.js"></script>
</head>
<body>

<div style="width:500px; text-align:center; margin:0 auto">
<img src="img/1.jpg" class="magnify" style="width:200px; height:150px" />
<img src="img/2.jpg" class="magnify" style="width:200px; height:150px" />
<img src="img/3.jpg" class="magnify" style="width:200px; height:150px" />
<img src="img/4.jpg" class="magnify" style="width:200px; height:150px" />
</div>

<form>
<select id="imageselect">
<option>选择一张图片点击放大</option>
<option>图 1</option>
<option>图 2</option>
<option>图 3</option>
<option>图 4</option>
</select>
</form>

<img id="imagebox" src="img/1.jpg" class="magnify" data-magnifyby="2" style="width:200px" />
<script type="text/javascript">
var imagebox=document.getElementById("imagebox")
var imageselect=document.getElementById("imageselect")
var imagelist=["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg"]
imageselect.onchange=function(){
if (this.selectedIndex!=0){
imagebox.src=imagelist[this.selectedIndex-1]
jQuery(imagebox).imageMagnify({
magnifyby: 2
})
}
}
</script>



</body>
</html>