管理后台,jQuery图片点击放大和旋转

最新推荐文章于 2022-04-03 07:55:53 发布

疯狂的小码哥

最新推荐文章于 2022-04-03 07:55:53 发布

阅读量583

点赞数

分类专栏：日常学习纪要文章标签：图片点击放大旋转

本文链接：https://blog.csdn.net/m0_37856386/article/details/87162810

版权

日常学习纪要专栏收录该内容

9 篇文章 0 订阅

订阅专栏

放大链接参考:https://www.cnblogs.com/antis/p/7053991.html
旋转代码如下:

<!DOCTYPE html>
<html> 
<head> 
<meta charset="utf-8" /> 
<meta name="author" content="zp" /> 
<title>图片旋转</title> 
<style type="text/css"> 
.img{ border: 1px solid #000; display: block; 
/*width:400px;*/
max-height:400px;
max-width: 100%;
cursor: -webkit-zoom-in;
} 
.button{
margin-top: 100px;
}
.big-bg{
position: absolute;
left: 0;
top: 0;
width: 100%;
z-index: 10000;
text-align: center;
line-height: 0;
font-weight: normal;
}
.big1{
/*position: absolute;*/
margin-top: 100px;
cursor: -webkit-zoom-out;
}
.button-l{
cursor: pointer;
}
.button-r{
cursor: pointer;
}
#img-mask{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
z-index:9;
background-color:#000;
display:none;
opacity:0.8; -moz-opacity:0.8; filter:alpha(opacity=80);
}
.big-bg img{
max-width: 800px;
max-height: 550px;
display: inline-block;
margin: 0 auto;
margin-top: 150px;
}
</style> 
</head> 
<body> 
<div id="img-mask"></div>
<img src="http://bj-img2017.oss-cn-beijing.aliyuncs.com/bjadmin/5/27/ca04f38930e14579a6b4615e1beb8817.jpg" class="img" /> 
<div class="big-bg">
<img style='display:none' class='big1' src='city.jpg'>
</div>
<div class="button">
<button class="button-l">左转</button> 
<button class="button-r">右转</button> 
</div>

<script src="http://cre-card.oss-cn-beijing.aliyuncs.com/rem.js"></script>
<script src="http://cre-card.oss-cn-beijing.aliyuncs.com/jquery.js"></script>
<script type="text/javascript">
$(function(){
var deg=0;
$(".button-r").click(function(){
deg += 90;
$(".img").css("transform","rotate(" + deg + "deg)");
});
$(".button-l").click(function(){
deg -= 90;
$(".img").css("transform","rotate(" + deg + "deg)");
});
$(".img").click(function(){
$(".big1").css("transform","rotate(" + deg + "deg)").show();
$(".big-bg").show();
$("#img-mask").fadeIn();
})
$(".big1").click(function(){
$(".big1").css("transform","rotate(" + deg + "deg)").hide();
$(".big-bg").hide();
$("#img-mask").fadeOut();
})

})
</script>

</body>
</html>

效果如下

图片旋转