1、点击让图片隐藏
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
document.getElementById('dd').onclick = function(){
document.getElementById("tt").style.display="none";
}
}
</script>
</head>
<body>
<input type="button" name="dd" id="dd" value="点击我呀" />
<br /><br />
<img src="https://www.qiquanji.com/data/img/dmj/201902131550032408323289.jpg" alt="" id="tt"/>
</body>
</html>
2、运动原理
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#dt{
position: absolute;
/*为了能获得当前图片的left值,把left值写在body里面*/
/*left: 0px;*/
top: 100px;
}
</style>
<script type="text/javascript">
window.onload = function(){
// 先抓元素
var yy =document.getElementById('yy');
var dt = document.getElementById('dt');
// 给按钮加单机事件
yy.onclick = function(){
// 设置一个定时器,每隔一秒钟,将left值变大10个像素;
setInterval(function(){
// 获得当前图片的left值
var ww = dt.style.left;
// 计算新的left值
var dd = parseInt(ww)+10;
// 将新值赋值回去
dt.style.left= dd+'px';
},1000)
}
}
</script>
</head>
<body>
<input type="button" name="yy" id="yy" value="点我呀！！" />
<br /><br />
<!--为了能获得当前图片的left值,把left值写在body里面-->
<img src="https://www.qiquanji.com/data/img/dmj/201902131550032481703463.gif" alt="" id="dt" style="left: 0px;"/>
</body>
</html>
3、停止运动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#dt{
position: absolute;
/*为了能获得当前图片的left值,把left值写在body里面*/
/*left: 0px;*/
top: 100px;
}
/*后加上去的*/
#qian{
position: absolute;
top: 0px;
left: 1035px;
}
</style>
<script type="text/javascript">
window.onload = function(){
// 先抓元素
var yy =document.getElementById('yy');
var dt = document.getElementById('dt');
// 给按钮加单机事件
yy.onclick = function(){
// 设置一个定时器,每隔十分之一秒钟,将left值变大5个像素;
// 给定时器取个名字,要不然清理不到它
var dsc= setInterval(function(){
// 获得当前图片的left值
var ww = dt.style.left;
// 计算新的left值
var dd = parseInt(ww)+5;
// 将新值赋值回去
dt.style.left= dd+'px';
// 判断图片是否停止了
if (dd==600) {
// 清理定时器,让运动停止
clearInterval(dsc);
} else{
}
},100)
}
}
</script>
</head>
<body>
<input type="button" name="yy" id="yy" value="点我呀！！" />
<br /><br />
<!--为了能获得当前图片的left值,把left值写在body里面-->
<img src="https://www.qiquanji.com/data/img/dmj/201902131550032481703463.gif" alt="" id="dt" style="left: 0px;"/>
<!--后加上去的-->
<img src="https://www.qiquanji.com/data/img/dmj/201902131550032567214401.jpg" alt="" id="qian"/>
</body>
</html>
原文链接：https://www.qiquanji.com/post/7618.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知