实现点击单张图片时要求可放大
1.官网jquery压缩版引用地址:
3.1.1版本:
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
3.0.0版本:
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
2.1.4版本:
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
2.百度压缩版引用地址:
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>3.微软压缩版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script>
亲测都可用,谷歌的不太好用,便不再加进去.
点击图片变大
<div class="right col-sm-9">
<div class="box col-sm-4">
<img class="img-responsive" src="/Theme/default/image/1.JPG" alt="" style="margin-top: 25px;">
</div>
<div class="box col-sm-4">
<img class="img-responsive" src="/Theme/default/image/2.JPG" alt="" style="margin-top: 34px;">
</div>
<div class="box col-sm-4">
<img class="img-responsive" src="/Theme/default/image/3.JPG" alt="" style="margin-top: 34px;">
</div>
<div class="box col-sm-4">
<img class="img-responsive" src="/Theme/default/image/4.JPG" alt="" style="margin-top: 34px;">
</div>
<div class="box col-sm-4">
<img class="img-responsive" src="/Theme/default/image/5.jpg" alt="" style="margin-top: 34px;">
</div>
<div class="box col-sm-4">
<img class="img-responsive" src="/Theme/default/image/6.jpg" alt="">
</div>
<div class="box col-sm-4">
<img class="img-responsive" src="/Theme/default/image/7.jpg" alt="" style="margin-top: 34px;">
</div>
</div>
</div>
</div>
</div>
<div id="model" style="width: 100%;height: 100%;position: fixed;top: 0;left: 0;background-color: rgba(0,0,0,0.46);display: none;z-index: 999"></div>
<div id="imgmodel" style="width: auto;height: auto;position: fixed;top: 50%;left: 50%;transform: translate3d(-50%,-50%,0);display: none;z-index: 1000">
<img style="width: 150%;height: 150%;" src=""/>
</div>
<script type="text/javascript">
$(".right .box img").click(function () {
$("#model,#imgmodel").css("display","block");
$("#imgmodel").find("img").attr("src",$(this).attr("src"))
})
$("#model").click(function(){
$("#model,#imgmodel").css("display","none");
})
$("#imgmodel").click(function(){
$("#model,#imgmodel").css("display","none");
})
</script>
鼠标移动上去,图片放大
<div class="model" style="width: 100%;height: 100%;position: fixed;top: 0;left: 0;background-color: rgba(0,0,0,0.1);display: none;z-index: 999"></div>
<div class="imgmodel" style="width: auto;height: auto;position: fixed;top: 50%;left: 50%;transform: translate3d(-50%,-50%,0);display: none;z-index: 1000">
<img style="width: 150%;height: 150%;" src=""/>
<span class="closed">X</span>
</div>
<script>
$(".product_box").mouseover(function(e){
var timer,thate = e;
return function(thate){
if(timer)clearTimeout(timer);
timer = setTimeout(function(){
if(thate.target.nodeName.toLowerCase()==="img"){
$(".model,.imgmodel img").attr("src",thate.target.src)
$(".model,.imgmodel").css("display","block");
}
},400)
}
}())
$(".imgmodel .closed").click(()=>{
$(".model,.imgmodel").css("display","none");
})
</script>