jquery div滑动效果 从下到上的效果，一开始是不显示的 然后滑动上来显示
<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title>arguments</title><metaname="ke...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>arguments</title>
<meta name="keyword" content=""/>
<meta name="description" content=""/>
<meta name="viewport" content="width=device-width"/>
<style type="text/css">
#div1{width:100px;height:100px;background-color: red;position: absolute;left:800px;top:100px;}
</style>
</head>
<body>
<div id="div1">1</div>
<script type="text/javascript">
function move(){
var odiv=document.getElementById('div1');
setInterval(function () {
var speed= (300-odiv.offsetLeft)/10; // Math.ceil是向上取整。而Math.floor是向下取整。。
if (speed>0){
speed=Math.ceil(speed)
}else{
speed=Math.floor(speed)
}
odiv.style.left=odiv.offsetLeft+speed+'px';
document.title=odiv.offsetLeft+','+speed //用来验证 odiv移动的距离和速度
},30);
}
move();
</script>
</body>
</html>
div滑动效果 从下到上的效果，一开始是不显示的 然后滑动上来显示 展开
<html>
<head>
<meta charset="utf-8"/>
<title>arguments</title>
<meta name="keyword" content=""/>
<meta name="description" content=""/>
<meta name="viewport" content="width=device-width"/>
<style type="text/css">
#div1{width:100px;height:100px;background-color: red;position: absolute;left:800px;top:100px;}
</style>
</head>
<body>
<div id="div1">1</div>
<script type="text/javascript">
function move(){
var odiv=document.getElementById('div1');
setInterval(function () {
var speed= (300-odiv.offsetLeft)/10; // Math.ceil是向上取整。而Math.floor是向下取整。。
if (speed>0){
speed=Math.ceil(speed)
}else{
speed=Math.floor(speed)
}
odiv.style.left=odiv.offsetLeft+speed+'px';
document.title=odiv.offsetLeft+','+speed //用来验证 odiv移动的距离和速度
},30);
}
move();
</script>
</body>
</html>
div滑动效果 从下到上的效果，一开始是不显示的 然后滑动上来显示 展开
1个回答
展开全部
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Jay 跨锐</title>
<style type="text/css">
#div1 {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 100px;
top: 800px;
opacity: 0;
filter: alpha(opacity = 0);
}
</style>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript">
jQuery (function ($)
{
$ ('div#div1').animate (
{
top : '100px',
opacity : 1,
filter : "alpha(opacity=" + 100 + ")"
}, 1000);
});
</script>
</head>
<body>
<div id="div1">1</div>
<!-- <script type="text/javascript">
(function ()
{
var odiv = document.getElementById ('div1');
this.interval = setInterval (function ()
{
var speed = (100 - odiv.offsetTop) / 10;
if (speed > 0)
{
speed = Math.ceil (speed);
}
else if (speed < 0)
{
speed = Math.floor (speed);
}
else
{
clearInterval (this.interval);
}
odiv.style.opacity = (800 - odiv.offsetTop) / 700;
odiv.style.filter = "alpha(opacity=" + (odiv.style.opacity * 100) + ")";
odiv.style.top = odiv.offsetTop + speed + 'px';
document.title = odiv.offsetTop + ',' + speed;
}, 30);
}) ();
</script> -->
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
