首页 技术 正文
技术 2022年11月21日
0 收藏 877 点赞 4,071 浏览 2206 个字

总结一下自己今天学习运动的基本思想:‘

【1】对于移动的div,使其在某一个位置停止将其封装成一个函数,仅仅改变speed的正负即可

涉及到问题包括:

var time=null;

function  startMove(target)

{

var oDiv=document.getElementById(‘div’);

clearInteral(time);//清除定时器

time=setInteral(function()

{

var speed=0;

if(oDiv.offsetLeft<target){speed=正数;}

else{speed=负数;}  //考虑刚开始的div在目标值的左边还是右边

if(oDiv.offsetLeft==target){clearInteral(time);}

else{oDiv.style.Left=oDiv.offsetLeft+speed+’px’;}

},30);

}

【2】淡入淡出图片的制作,借助变量存储值。

var alpha=30;//存储变量值
var time=null;
function startMove(target)
{
var img=document.getElementById(‘img1’);
clearInterval(time);
time=setInterval(function()
{
var speed=0;
if(alpha<target){speed=1;}
else{speed=-1;}
if(alpha==target){clearInterval(time);}
else{
alpha+=speed;
img.style.opacity=alpha/100;//火狐下为opacity:0-1之间的值   而IE为:filter:alpha(opacity=30);0-100之间的数值
document.title=alpha;
}

},30);
}

【3】侧边栏分享的制作过程,同上面【1】一样,主要是改变Left的值  设为0或-100,添加鼠标移入移出事件。

【4】缓慢运动的基本思想和上面差不多,但speed是个变值,speed=目标值-原值

var time=null;

function  startMove(target)

{

var oDiv=document.getElementById(‘div’);

clearInteral(time);//清除定时器

time=setInteral(function()

{

var speed=(target-oDiv.setoffLeft)/固定系数;//这里固定系数可以为任意数如:7,8…………………等

speed=speed>0?Math.ceil(speed):Math.floor(speed);//ceil 是向上取整  floor是向下取整   之所以取整是避免与目标值出现小偏差。

if(oDiv.offsetLeft==target){clearInteral(time);}

else{oDiv.style.Left=oDiv.offsetLeft+speed+’px’;}

},30);

}

【5】右边栏的分享div保持与滚动条替丁的距离,缓慢停止的过程。

1:首先得到滚动条的距离:scrollTop=document.documentElement.scrollTop||document.body.scrollTop

2:得到div与可视区之间的距离:var t=(document.documentElement.clientHeight-oDiv.offsetHeight)/2

3:div的高为:oDiv.style.top=t+scrollTop+’px’;这里需要使用paresint()函数将高转换为整数

window.onscroll=function ()——注意这里涉及到滚动条是windon.onscroll事件
{
var oDiv=document.getElementById(‘div1’);
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
var t=scrollTop+(document.documentElement.clientHeight-oDiv.offsetHeight)/2+’px’;
startMove(parseInt(t));  //将其转换为整数,避免滚动条上下抖动
}
var time=null;
function startMove(target)
{
var oDiv=document.getElementById(‘div1’);
clearInterval(time);
time=setInterval(function()
{
var speed=(target-oDiv.offsetTop)/8;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(oDiv.style.top==target){clearInterval(time);}
else{oDiv.style.top=oDiv.offsetTop+speed+’px’;}
txt1.value=oDiv.offsetTop+’,目标:’+target;
},30);
}

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:8,953
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,478
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,290
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,107
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,739
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,773