10-17盒子缓冲运动,显示盒子淡入淡出,offset、style.xx、的区别,页面窗口滚动
2017-10-17 20:00
525 查看
一、缓冲运动:
<script>
window.onload=function(){
var div = document.getElementsByTagName('div')[0];//盒子
var btn = document.getElementById('btn');//点击按钮让盒子移动
var timer=null;
function move(dest){//缓冲运动移到dest位置
clearInterval(timer);
timer=setInterval(function(){
//设置speed为变量,控制逐渐变慢
var speed=(dest-div.offsetLeft)/10;
//speed取整,如果speed大与0就让speed向上取整,否则向下取整
speed=speed>0?Math.ceil(speed):Math.floor(speed);
//控制盒子的left值来控制盒子移动
div.style.left=div.offsetLeft+speed+'px';
},30);
}
btn.onclick=function(){//调用
move(500);
}
}
</script>
二、淡入淡出:
<script>
window.onload=function(){
var timer=null;
var box = document.getElementById('box');
var op=10;//记录box的opacity
function changeOpcity(target){//target为设置最终的透明度
var speed=10;//变化的速度
clearInterval(timer);
timer=setInterval(function(){
if(target>op){//如果设置的最终透明度大与此时的透明度,速度为正,递增
speed=10;
}else{//如果设置的最终透明度小与此时的透明度,速度为负,开始递减
speed=-10;
}
if(target==op){//如果设置的最终透明度等于此时的透明度,则停止计时器
clearInterval(timer);
}else{
op+=speed;//设置变量透明度的变化
box.style.opacity=(op/100);//针对非IE
box.style.filter='alpha(opacity='+op+')';//兼容IE
}
},30);
}
box.onmouseover=function(){
changeOpcity(100);
}
box.onmouseout=function(){
changeOpcity(10);
}
}
</script>
三、参数:
<script type="text/javascript">
//浏览器的页面是由分辨率决定 默认的一屏 宽度:1440(会随着分辨率改变)
// style.width 获取和设置宽度 500px
// offsetWidth 500+'px' 拿到的是number型 获取 但是不能直接设置,如果设置,赋值给style.width=
// width 非行间写法
//left 非行间写法
//style.left 行间 获取和设置 设置没问题 获取(针对行间样式),非行间获取不到
//offsetLeft 能获取 设置值 style.left=offsetLeft(拿到它初始位置,改变原来位置)
// 内容区 自定义 再大不会是整个浏览器的宽度
// 可视区 clientWidth 浏览器的可视区 不包括浏览器默认边距
// 500px 1200px
//var oClient=document.body.clientWidth;
var oClient=document.body.clientHeight;
//alert(oClient);//1440
var oBox=document.getElementById('box');
//alert(oBox.style.width);//style.width就只能获取得到行间样式
//alert(oBox.offsetWidth); // 获取值 ,不能直接设置值
</script>
四、滚动事件:
<script type="text/javascript">
//scrollTop 被网页卷去的部分
//记得,只要用到scrollTop就一定有滚动事件(onscroll)
window.onscroll=function(){ //滚动事件,只有鼠标滚动才会加载
var oBox=document.getElementById('box');
var oCon=document.getElementById('con');
var scroll=document.documentElement.scrollTop||document.body.scrollTop;//获取窗口滚动距离
//oBox.style.top=document.documentElement.clientHeight-oBox.offsetHeight+scroll+'px'; //匀速运动的写法
move(document.documentElement.clientHeight-oBox.offsetHeight+scroll);
}
var timer=null;
function move(target){
var oBox=document.getElementById('box');
clearInterval(timer);
timer=setInterval(function(){//缓冲运动三部曲: 缓冲公式 取整 设置值
var speed=(target-oBox.offsetTop)/10;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
oBox.style.top=oBox.offsetTop+speed+'px';
},30);
}
</script>
<script>
window.onload=function(){
var div = document.getElementsByTagName('div')[0];//盒子
var btn = document.getElementById('btn');//点击按钮让盒子移动
var timer=null;
function move(dest){//缓冲运动移到dest位置
clearInterval(timer);
timer=setInterval(function(){
//设置speed为变量,控制逐渐变慢
var speed=(dest-div.offsetLeft)/10;
//speed取整,如果speed大与0就让speed向上取整,否则向下取整
speed=speed>0?Math.ceil(speed):Math.floor(speed);
//控制盒子的left值来控制盒子移动
div.style.left=div.offsetLeft+speed+'px';
},30);
}
btn.onclick=function(){//调用
move(500);
}
}
</script>
二、淡入淡出:
<script>
window.onload=function(){
var timer=null;
var box = document.getElementById('box');
var op=10;//记录box的opacity
function changeOpcity(target){//target为设置最终的透明度
var speed=10;//变化的速度
clearInterval(timer);
timer=setInterval(function(){
if(target>op){//如果设置的最终透明度大与此时的透明度,速度为正,递增
speed=10;
}else{//如果设置的最终透明度小与此时的透明度,速度为负,开始递减
speed=-10;
}
if(target==op){//如果设置的最终透明度等于此时的透明度,则停止计时器
clearInterval(timer);
}else{
op+=speed;//设置变量透明度的变化
box.style.opacity=(op/100);//针对非IE
box.style.filter='alpha(opacity='+op+')';//兼容IE
}
},30);
}
box.onmouseover=function(){
changeOpcity(100);
}
box.onmouseout=function(){
changeOpcity(10);
}
}
</script>
三、参数:
<script type="text/javascript">
//浏览器的页面是由分辨率决定 默认的一屏 宽度:1440(会随着分辨率改变)
// style.width 获取和设置宽度 500px
// offsetWidth 500+'px' 拿到的是number型 获取 但是不能直接设置,如果设置,赋值给style.width=
// width 非行间写法
//left 非行间写法
//style.left 行间 获取和设置 设置没问题 获取(针对行间样式),非行间获取不到
//offsetLeft 能获取 设置值 style.left=offsetLeft(拿到它初始位置,改变原来位置)
// 内容区 自定义 再大不会是整个浏览器的宽度
// 可视区 clientWidth 浏览器的可视区 不包括浏览器默认边距
// 500px 1200px
//var oClient=document.body.clientWidth;
var oClient=document.body.clientHeight;
//alert(oClient);//1440
var oBox=document.getElementById('box');
//alert(oBox.style.width);//style.width就只能获取得到行间样式
//alert(oBox.offsetWidth); // 获取值 ,不能直接设置值
</script>
四、滚动事件:
<script type="text/javascript">
//scrollTop 被网页卷去的部分
//记得,只要用到scrollTop就一定有滚动事件(onscroll)
window.onscroll=function(){ //滚动事件,只有鼠标滚动才会加载
var oBox=document.getElementById('box');
var oCon=document.getElementById('con');
var scroll=document.documentElement.scrollTop||document.body.scrollTop;//获取窗口滚动距离
//oBox.style.top=document.documentElement.clientHeight-oBox.offsetHeight+scroll+'px'; //匀速运动的写法
move(document.documentElement.clientHeight-oBox.offsetHeight+scroll);
}
var timer=null;
function move(target){
var oBox=document.getElementById('box');
clearInterval(timer);
timer=setInterval(function(){//缓冲运动三部曲: 缓冲公式 取整 设置值
var speed=(target-oBox.offsetTop)/10;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
oBox.style.top=oBox.offsetTop+speed+'px';
},30);
}
</script>
相关文章推荐
- xx.offsetLeft与xx.style.left的区别
- JS实现随页面滚动显示/隐藏窗口固定位置元素
- 随页面滚动显示/隐藏窗口固定位置元素
- 随页面滚动显示/隐藏窗口固定位置元素
- JS实现随页面滚动显示/隐藏窗口固定位置元素
- 如何将不同信息的数据对象合并显示到同一个页面上或者滚动窗口中
- 基于jquery实现页面滚动时顶部导航显示隐藏
- 整个页面滚动显示不同的内容
- element.offsetWidth 与 element.style.width的区别
- offsetLeft与style.left的区别
- Android页面布局时定义控件ID时@id/XX和@+id/xx 有什么区别
- struts1(10)----重数据库中取出数据显示在jsp页面上
- [知识点滴]HTML页面元素显示&隐藏方式及区别
- SpringMVC(10):配置静态资源访问(前端页面的元素显示)及实例
- 多盒子的运动---用目标值减去对象的变量属性(target - obj.offsetWidth)
- NgStyle和NgIf控制HTML标签显示的区别
- 源生实现滚动页面显示悬浮导航
- JSF中如何在弹出窗口中显示编辑页面
- offsetTop 与style.top之间的区别
- asp.net 图片批量上传预览,在Silverlight页面中读取并滚动显示