您的位置：首页 > 其它

运动---第二课时

2013-05-28 20:21 274 查看
渐变的图片---代码写完了，结果提示没有预料的错误，可能是哪个位置的符号或者字母写错了，大致的代码都是正确的，检查了半天没看出来。

<!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>
<style>
#img1{filter:alpha(opacity:30);opacity:0.3;width:500px;height:500px;}
</style>
<script>
window.onload=function ()
{
var oImg=document.getElementById('img1');

oImg.onmouseover=function ()
{
startMove(100);
}

oImg.onmouseout=function ()
{
startMove(30);
}
}

var timer=null;
var alpha=30;
function startMove(iTarget){
clearInterval(timer);
var oImg=document.getElementById('img1');
timer=setInterval(function(){
var iSpeed=0;
if(alpha<iTarget){
iSpeed=1;//可以修改速度的快慢
}
else{
iSpeed=-1;
}

if(alpha==iTarget){
clearInterval(timer);
}
else{
alpha=+iSpeed;//这里是最重要的，把透明度来累加或者累减；
oImg.style.filter='alpha(opacity'+alpha+')';//IE6的兼容情况
oImg.style.opacity=alpha/100;//表达的透明度不一样，表示为0.X
document.title=alpha;//改变标题
}
},30);

};
}
</script>
</head>

<body>
<img id="img1" src="1.jpg" />
</body>
</html>


数字取整

<script>
//alert(Math.ceil('2.3'));向上取整
//alert(Math.floor('2.3'));向下取整----顾名思义，按照数字的排列顺序进行取舍
</script>


缓冲运动的div

<!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>
<style>
#div1 {width:100px; height:100px; position:absolute; background:red; left:0; top:50px;}
</style>
<script>
var timer=null;
function startMove(iTarget){
clearInterval(timer);
var oDiv=document.getElementById('div1');
timer=setInterval(function(){
var iSpeed=(iTarget-oDiv.offsetLeft)/8;//计算距离终点的距离，速度越来越小
if(iSpeed>0)
{
iSpeed=Math.ceil(iSpeed);//向上取整----如果div从左向右移动，速度是正的----由于一个一个的做除法会出现小数点，不能到达指定的300像素的位置，所以要取整
}
else
{
iSpeed=Math.floor(iSpeed);//向下取整----如果div从右向左，那么速度是负的
}
if(oDiv.offsetLeft==iTarget)
{
clearInterval(timer);
}
else{
oDiv.style.left=oDiv.offsetLeft+iSpeed+'px';//当前左边距+移动的速度
}
},30);
}
</script>
</head>

<body>
<input type="button" value="缓冲运动" onclick="startMove(300)" />
<div id="div1"></div>
<span style="width:1px;height:500px;background:#000000;position:absolute;left:300px;"></span>//参照物
</body>
</html>


上下滚动的侧边栏

<!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>
<style>
#div1{width:100px;height:100px;background:#0033CC;border:2px solid dashed;position:absolute;right:0;}
</style>
<script>
window.onscroll=function(){ 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//鼠标的滚动事件
var oDiv=document.getElementById('div1');
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;//scrollTop就是元素的顶部到滚动条的顶部的距离；
var a=scrollTop+(document.documentElement.clientHeight-oDiv.offsetHeight)/2;        //oDiv.style.top=scrollTop+(document.documentElement.clientHeight-oDiv.offsetHeight)/2+'px';　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//距离=不可见的scrollTop+（可视区的高度-div的高度）/2
startMove(a);
};
var timer=null;
function startMove(iTarget){
var oDiv=document.getElementById('div1');
clearInterval(timer);
timer=setInterval(function(){
var iSpeed=(iTarget-oDiv.offsetTop)/8;　　　　　　　　　　　　　　　　　　　　//运动系数可以适当的改变，offsetTop就是div顶部距离浏览器顶部的距离
iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);　　　　　　　　　　　//三目----简写if else判断句
if(iSpeed==iTarget){
clearInterval(timer);
}
else{
oDiv.style.top=iSpeed+oDiv.offsetTop+'px';　　　　　　　　　　　　　　　　//速度+即时的高度
}
},30);
}
</script>
</head>

<body style="height:3000px;">
<div id="div1">

</div>
</body>
</html>


关于一些Top,Height,Left的区别


去绝对值

<script>
alert(Math.abs(-6.3));
</script>


匀速运动实例

<!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>
<style>
#div1 {width:100px; height:100px; position:absolute; background:red; left:0; top:50px;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
var timer=null;

function startMove(iTarget)
{
var oDiv=document.getElementById('div1');

clearInterval(timer);
timer=setInterval(function (){
var iSpeed=0;

if(oDiv.offsetLeft<iTarget)//如果左边的距离小于目标值，那么就增加距离。
{
iSpeed=7;
}
else
{
iSpeed=-7;//反之，减少距离
}

if(Math.abs(oDiv.offsetLeft-iTarget)<7)    //使用取绝对值的方法就不用判断，而是增加最后一次不完整的距离，这个距离大于0，小于7；是否到达终点
{
clearInterval(timer);    //到达终点

oDiv.style.left=iTarget+'px';//强制性的执行最后的一步运动
}
else
{
oDiv.style.left=oDiv.offsetLeft+iSpeed+'px';    //到达之前
}
}, 30);
}

</script>
</head>

<body>
<input type="button" value="开始运动" onclick="startMove(300)" />
<div id="div1"></div>
<span style="width:1px; height:300px; background:black; position:absolute; left:300px; top:0;"></span>
</body>
</html>



参考效果图
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航