如何在单页上仅旋转10张图像中的1张图像
如何在单页上仅旋转10张图像中的1张图像
提问于 2018-08-06 00:46:38
我试图从我的页面上的多个生成的图像中只旋转一个图像。但这样做会旋转所有图像。
每个图像都在一个模式中打开，然后用一个按钮旋转。
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog" style = "max-width:90%; max-height:90%">
<div class="modal-content">
<div class="modal-body ">
<img class="showimage img-responsive" src="" style = "max-width:90%"/>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" >Rotate</button>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$('img').on('click', function () {
var image = $(this).attr('src');
//alert(image);
$('#myModal').on('show.bs.modal', function () {
$(".showimage").attr("src", image);
});
});
});
</script>此代码位于表中的每个新行中
回答 3
Stack Overflow用户
回答已采纳
发布于 2018-08-06 01:20:38
如果图像是动态加载的，这里是一个如何实现旋转的示例。为了单独旋转图像，我创建了一个旋转变量，当您单击新的cat时将重置该变量。
var rotation = 0
$('img').on('click', function () {
var image = $(this).attr('src');
$('.showimage').attr('src', image);
rotation = 0;
rotate(0)
$('#myModal').modal('show');
});
$('.rotate').on('click', function () {
rotation += 45;
rotate(rotation)
});
function rotate(deg) {
$('.showimage').css({
'-webkit-transform' : 'rotate('+ deg +'deg)',
'-moz-transform' : 'rotate('+ deg +'deg)',
'-ms-transform' : 'rotate('+ deg +'deg)',
'transform' : 'rotate('+ deg +'deg)'
});
}.image-wrapper {
overflow: hidden;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<img src="https://placekitten.com/300/200" />
<img src="https://placekitten.com/300/150" />
<img src="https://placekitten.com/300/100" />
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog" style = "max-width:90%; max-height:90%">
<div class="modal-content">
<div class="modal-body ">
<div class="image-wrapper">
<img class="showimage img-responsive" src="" style = "max-width:90%"/>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-default rotate">Rotate</button>
</div>
</div>
</div>
</div>
Stack Overflow用户
发布于 2018-08-06 01:15:04
使用.showimage类对目标图像进行识别。
但是您的旋转按钮没有类或ID。请为该按钮添加一个标识符，并注入click事件来旋转图像。将rotate-image id添加到按钮：
<button id="rotate-image" type="button" >Rotate</button>
然后在JavaScript中：
$(document).ready(function () {
$('img').on('click', function () {
var image = $(this).attr('src');
//alert(image);
$('#myModal').on('show.bs.modal', function () {
var shownImage = $(".showimage");
shownImage.attr("src", image);
// Remove the rotation class when modal is re-opened.
shownImage.removeClass('rotated-image');
});
});
// Add rotate event.
$("#rotate-image").on('click', function () {
// Add the rotation class.
$(".showimage").addClass('rotated-image');
});
});Stack Overflow用户
发布于 2018-08-06 00:50:22
如果is是由您生成的，则将is提供给他们。
<img id="myimg1" src=""/>这样你就可以做到这一点
$('img#myimg1').on('click', function () {
var image = $(this).attr('src');
//alert(image);
$('#myModal').on('show.bs.modal', function () {
$(".showimage").attr("src", image);
});
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51696332
复制相关文章
相似问题