1. 最近在用纯H5做边框向右和向左缓慢弹出效果
由于是保密项目，最近一个项目没有用Jquery,而用纯H5和js，实现点击红色div区域实现向左右移动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var timer;
function fun1() {
clearInterval(timer);
var odiv = document.getElementById("myDiv");
if (odiv.offsetLeft < -100 || odiv.offsetLeft === -100) {
timer = setInterval(function () {
odiv = document.getElementById("myDiv");
if (odiv.offsetLeft === 0 || odiv.offsetLeft > 0) {
clearInterval(timer);
return;
}
odiv.style.left = odiv.offsetLeft + 5 + "px";
}, 10)
}
if (odiv.offsetLeft >= 0 || odiv.offsetLeft === 0) {
timer = setInterval(function () {
odiv = document.getElementById("myDiv");
if (odiv.offsetLeft < -100 || odiv.offsetLeft === -100) {
clearInterval(timer);
return;
}
odiv.style.left = odiv.offsetLeft - 5 + "px";
}, 10)
}
}
</script>
</head>
<body>
<div style="position:relative;background: #190712;margin-left: 200px;width: 500px;height: 500px">
<div onclick="fun1()" id="myDiv" style="width: 100px;height: 100px;background: red;position: absolute;left: -100px">
</div>
</div>
</body>
</html>
2.如果用Jquery更简单，自带动画函数
下面代码是让myDiv在2s内left移动到0
$("#myDiv").animate({left: "0"}, 2000)
71
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
