有没有什么函数方法可以恢复原状态? removeAttribute是删除style的元素,我想要的是显示结果一样,但是恢复后可以继续又点击向右滑动怎么做?这个removeAttribute删除之后就不可以继续点击向右滑动了。求大神!
<!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>
</head>
<body>
<!--页面布局-->
<!--图片相关属性设置-->
<div>
<!--滑动按钮设置-->
<img style="position: absolute; left: 0; top: 0; width: 315px; height: 315px;" src="../图片的放大缩小/小黄人.jpeg" id="myImage" /><br/>
<input style="position:absolute;left:0;top:315px; " type="button" id="btn" value="向右滑动"/>
<input style="position:absolute;left:80px;top:315px;" type="button" id="Btn" value="恢复"/>
</div>
<script>
window.onload = function(){
var img = document.getElementById("myImage");
var btn = document.getElementById("btn");
var Btn = document.getElementById("Btn");
//绑定点击事件
btn.onclick = function(){
imgSlide(); //点击按钮时执行滑动函数
}
Btn.onclick = function() {
rec();//点击恢复原状态
}
var maxLeft = 700;//向右滑动的极限值
//实现滑动函数
function imgSlide(){
var endLeft = img.offsetLeft + 300;//每次点击后向右滑动300px
var slideTimer = setInterval(function(){
var imgLeft =img.offsetLeft; //现在距离左边的距离
if(imgLeft < endLeft){
if(imgLeft < maxLeft){
img.style.left=imgLeft + 20 + 'px';//将图片的左偏移(left值)增加20px,注意单位
}else{
alert("已经到达最大值");
//终止定时器函数
clearInterval(slideTimer);
}
}else{
clearInterval(slideTimer);
}
},10);
}
function rec() {
var message = confirm("是否恢复?");
if(message == true)
{
img.removeAttribute('style');
}
}
}
</script>
</body>
</html>