像在按钮onclick功能中从右向左翻转一样水平旋转图像。 我试图通过简单的功能翻转图像。
var looper;
var degrees = 0;
function SetTransform(el,speed)
{
degrees = 0;
Transform(el,speed);
}
function Transform(el,speed){
var cog1 = document.getElementById(el);
cog1.style.WebkitTransform = "rotate("+degrees+"deg)";
if(degrees <=359)
{
looper = setTimeout('Transform(\''+el+'\','+speed+')',speed);
}
degrees++;
document.getElementById("status").innerHTML = "rotate("+degrees+"deg)";
}
答案 0 :(得分:2)
您可以使用tranform
属性通过简单的事件处理程序和单一样式来实现相同的目的
此处的示例
const myFunction=()=>{
document.getElementById('target').style.transform='scaleX(-1)';
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2>Flip an Image</h2>
<button onclick="myFunction()">Click to Flip the Image</button>
<div>
<img src="https://www.cameraegg.org/wp-content/uploads/2015/06/canon-powershot-g3-x-sample-images-1.jpg" alt="Paris" width="400" height="300" id="target">
</div>
</body>
</html>
也:如果您希望图像从右向左翻转,反之亦然,则每次单击按钮时,您可以添加一个 Js中的简单情况如下所示。
const myFunction=()=>{
var styles=document.getElementById('target').style;
if(styles.transform==='scaleX(-1)')
styles.transform='scaleX(1)';
else
styles.transform='scaleX(-1)';
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2>Flip an Image</h2>
<button onclick="myFunction()">Click to Flip the Image</button>
<div>
<img src="https://www.cameraegg.org/wp-content/uploads/2015/06/canon-powershot-g3-x-sample-images-1.jpg" alt="Paris" width="400" height="300" id="target">
</div>
</body>
</html>
请告诉我我是否有帮助:)
答案 1 :(得分:1)
正如我上面所说的,只需在点击时使用transfrom: scaleX(-1);
注意:如果您不希望过渡,则将其从图像中删除。
document.getElementById('flip').onclick = function(){
document.getElementById('img').classList.toggle("flipped");
}
img.flipped {transform: scaleX(-1)}
/*just for demo purpose*/
button {margin-left: 30px;}
body {display: flex; align-items: center;}
img {height: 180px; width: 270px; transition: transform 1s;}
<img id="img" src="https://images.freeimages.com/images/large-previews/7bc/bald-eagle-1-1400106.jpg">
<button id="flip">Flip Image</button>
答案 2 :(得分:0)
快速简单:
function flip(el) {
el.classList.toggle('flipped');
}
.flipped {
transform: scaleX(-1);
}
<img src="https://source.unsplash.com/random/500x500" onclick="flip(this)">
答案 3 :(得分:0)
var rotate_interval;
document.addEventListener("DOMContentLoaded", function() {
var button = document.getElementById("rotate_button");
button.addEventListener("click", function() {
var rotate = parseInt(this.dataset.rotate, 10);
if (rotate == 0) {
this.dataset.rotate = 1;
this.innerText = "Stop rotate";
rotate_interval = setInterval(rotateElement, 10);
} else {
this.dataset.rotate = 0;
this.innerText = "Start rotate";
clearInterval(rotate_interval);
}
});
});
function rotateElement() {
var img = document.getElementById("rotate_img");
var angle = parseFloat(img.dataset.angle, 10);
var speed = parseFloat(img.dataset.speed);
var new_angle = angle + speed;
if (new_angle < -1 || new_angle > 1){
speed = -speed;
new_angle = angle + speed;
}
img.dataset.angle = new_angle;
img.dataset.speed = speed;
img.style.transform = 'scaleX(' + new_angle + ')';
}
img#rotate_img {
width: 100px;
height: 100px;
}
<img src="https://lh3.googleusercontent.com/-_Zp3yhfoB3w/AAAAAAAAAAI/AAAAAAAAAAA/ACHi3rftojcGs3QomG3vHceiX8VtM98v6g/photo.jpg" id="rotate_img" data-angle="1.0" data-speed="-0.01" />
<button type="button" id="rotate_button" data-rotate="0">Start rotate</button>
您可以将当前角度存储在data-
属性中,并通过element.dataset.ATTRIBUTE_NAME