87,993
社区成员
发帖
与我相关
我的任务
分享求大神帮忙修改下这个js 达到这样的效果
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<meta content="yes" name="apple-mobile-web-app-capable">
</head>
<style type="text/css">
*{padding:0;margin:0;}
#cc{
background:#ccc;
width:200px;
height:200px;
position:absolute;
bottom:0;
right:0;
white-space:nowrap;
overflow:hidden;
display:none;
}
</style>
<body style="height:2000px;">
<div id="cc">111</div>
<script type="text/javascript">
var cc = document.getElementById("cc");
var time = null;
var tt = true;
var qq = true;
var num = 5;
var num1 = 5;
var zz = document.documentElement.clientHeight - cc.offsetHeight;
time = setInterval(function(){
setTimeout(function(){
cc.style.display = "block";
cc.style.right = num + "px";
cc.style.bottom = num + "px";
num++;
},3000);
},10);
</script>
</body>
</html>
这是一个三秒后 div斜着移动的效果， 大体效果已经实现了 但是想要让它斜着移动到页面正中间的位置， 然后再原路斜着回去，最后消失， 请问该怎么做了 研究了好久都不得要领。
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<meta content="yes" name="apple-mobile-web-app-capable">
</head>
<style type="text/css">
*{padding:0;margin:0;}
#cc{
background:#ccc;
width:200px;
height:200px;
position:absolute;
bottom:0;
right:0;
white-space:nowrap;
overflow:hidden;
display:none;
}
</style>
<body style="height:2000px;">
<div id="cc">111</div>
<script type="text/javascript">
var cc = document.getElementById("cc");
var time = null;
var tt = true;
var qq = true;
var num = 5;
var num1 = 5;
var zz = document.documentElement.clientHeight - cc.offsetHeight;
time = setInterval(function(){
setTimeout(function(){
cc.style.display = "block";
cc.style.right = num + "px";
cc.style.bottom = num + "px";
num++;
},3000);
},10);
</script>
</body>
</html>
这是一个三秒后 div斜着移动的效果， 大体效果已经实现了 但是想要让它斜着移动到页面正中间的位置， 然后再原路斜着回去，最后消失， 请问该怎么做了 研究了好久都不得要领。
...全文
请发表友善的回复…
发表回复
斯洛文尼亚旅游 2017-11-27
- 打赏
- 举报
var cc = document.getElementById("cc"), oW = 200, oH = 200;//对象长宽
var cW = document.documentElement.clientWidth, cH = document.documentElement.clientHeight;//视窗长宽
var cRight = Math.ceil((cW - oW) / 2), cBottom = Math.ceil((cH - oH) / 2);//计算对象移动到中间时的bottom/right
var hStep = 5, vStep = hStep * cBottom / cRight;//水平每次移动5px，等比计算垂直移动的距离
var timer, bottom = 0, right = 0;
setTimeout(function () {
cc.style.display = 'block'
timer = setInterval(function () {
right += hStep; bottom += vStep;
cc.style.right = right + "px";
cc.style.bottom = bottom + "px";
if (right > cRight) {//到中间翻转
hStep = -hStep;
vStep = -vStep;
}
if (right == 0 || bottom == 0) {
clearInterval(timer)
cc.style.display = 'none'
}
},10)
}, 3000);Web开发学习资料推荐
jqGrid一些疑难问题和解决方案
javascipt修改css级联样式表类和伪类样式
