落到实处动态左边栏实例详解,JavaScript缓冲运动

作者:江苏福彩快三计算机网络

这个分享框的弹出原理是:把内层div定位到外层div最右侧紧贴,然后把外层div定位到屏幕左外测,left的值与宽度相等,刚好隐藏掉就可以。当鼠标经过时,再通过改变left的值使外层div显示出来。

图片 1

JavaScript缓冲运动实现方法(2则示例),javascript2则

本文实例讲述了JavaScript缓冲运动实现方法。分享给大家供大家参考,具体如下:

实现原理:(目标距离-当前距离) / 基数 = 速度(运动距离越大速度越小,运动距离和速度成反比)复制代码 代码如下:(500 - oDiv.offsetLeft) / 7 = iSpeed;

需要注意:当计算出来的速度有小数时需要取整;
复制代码 代码如下:(500 - oDiv.offsetLeft) / 7 = iSpeed; iSpeed = iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);

例子1:滑块缓冲运动

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>缓冲运动</title>
<style>
#div1{ width:100px; height:100px; background:red; position:absolute; top:50px; left:0;}
span{ width:1px; height:300px; background:black; position:absolute; left:300px; top:0; display:block;}
</style>
<script>
window.onload = function()
{
 var oBtn = document.getElementById('btn1');
 var oDiv = document.getElementById('div1');
 oBtn.onclick = function()
 {
  startMove(oDiv, 300);
 };
};
var timer = null;
function startMove(obj, iTarget)
{
 clearInterval(timer);
 timer = setInterval(function(){
  var iSpeed = (iTarget - obj.offsetLeft)/8;
  iSpeed = iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
  if(iTarget==obj.offsetLeft){
   clearInterval(timer);
  }else{
   obj.style.left = obj.offsetLeft   iSpeed   'px';
  }
 }, 30);
}
</script>
</head>
<body>
<input id="btn1" type="button" value="移动" />
<div id="div1"></div>

</body>
</html>

例子2:侧边栏滑动

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>侧边栏滑动</title>
<style>
#div1{ width:100px; height:100px; background:red; position:absolute; right:0; top:0;}
</style>
<script>
window.onload = window.onscroll = function()
{
 var oDiv = document.getElementById('div1');
 var iScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
 var clientHeight = document.documentElement.clientHeight;
 var iH = (clientHeight - oDiv.offsetHeight)/2   iScrollTop;
 //oDiv.style.top = iH   'px';
 startMove(oDiv, parseInt(iH));
};
var timer = null;
function startMove(obj, iTarget)
{
 clearInterval(timer);
 timer = setInterval(function(){
  var iSpeed = (iTarget - obj.offsetTop) / 8;
  iSpeed = iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
  if(obj.offsetTop == iTarget){
   clearInterval(timer);
  }else{
   obj.style.top = obj.offsetTop   iSpeed   'px';
  }
 }, 30);
}
</script>
</head>
<body style="height:2000px;">
<div id="div1"></div>
</body>
</html>

更多关于JavaScript运动效果相关内容可查看本站专题:《JavaScript运动效果与技巧汇总》

希望本文所述对大家JavaScript程序设计有所帮助。

希望本文所述对大家的javascript程序设计有所帮助。

 下面是完整代码:

1、在设置步长时,当步长不能被整除,在关闭计时器的条件上写==,会出现盒子运动不停的bug,改为>=或者修改步长来修复Bug;

复制代码 代码如下:

您可能感兴趣的文章:

  • JS运动相关知识点小结(附弹性运动示例)
  • JavaScript拖拽、碰撞、重力及弹性运动实例分析
  • 纯js模拟div层弹性运动的方法
  • javascript运动效果实例总结(放大缩小、滑动淡入、滚动)
  • javascript运动框架用法实例分析(实现放大与缩小效果)
  • javascript多物体运动实现方法分析
  • javascript匀速运动实现方法分析
  • js运动应用实例解析
  • js简单实现点击左右运动的方法
  • javascript弹性运动效果简单实现方法

本文实例讲述了JavaScript缓冲运动实现方法。分享给大家供大家参考,具体如下: 实现原理...

<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="utf-8"> 
        <title></title> 
        <style type="text/css"> 
        *{ 
            margin:0px; 
            padding:0px; 
        } 
            #div1{ 
                width:319px; 
                height: 340px; 
                border: 1px solid #FFF; 
                position: absolute; 
                top:100px; 
                left:-320px; 
                background-image: url(images/1.png); 
                background-repeat:no-repeat ; 
            } 
            #div1 span{ 
                width:30px; 
                height: 130px; 
                border: 1px solid blue; 
                position: absolute; 
                right:-23px; 
                top:95px; 
                background: red; 
                font-family: "微软雅黑"; 
                color: #FFFFFF; 
                text-align: center; 
                line-height: 40px; 
                border-radius: 0px 200px 200px 0px; 
            } 
        </style> 
        <script type="text/javascript"> 
            window.onload=function(){ 
                var oDiv=document.getElementById("div1"); 
                var oSpan=oDiv.getElementsByTagName('span')[0]; 
                var time=null; 
                var speed=8; 
                oDiv.onmouseover=function(){//这里给整个div加鼠标移入的事件 
                    clearInterval(time); 
                    time=setInterval(function(){ 
                        if(oDiv.offsetLeft>=0){clearInterval(time);} 
                        else{ 
                            oDiv.style.left=oDiv.offsetLeft speed 'px'; 
                        } 
                    },1); 
                } 
                oDiv.onmouseout=function(){//这里给整个div加鼠标移出事件
                    clearInterval(time); 
                    time=setInterval(function(){ 
                        if(oDiv.offsetLeft<=-320){clearInterval(time);} 
                        else{ 
                            oDiv.style.left=oDiv.offsetLeft-speed 'px'; 
                        } 
                    },1); 
                } 
            } 
        </script> 
    </head> 
    <body> 
        <div id="div1"> 
            <span>分享到</span> 
        </div> 
    </body> 
</html>

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

<div id="box">
 <div id="share">分享到</div>
</div>

总的来说就是利用 鼠标悬停onmouseover   和  鼠标移除onmouseout 这两个时间来完成的。

本文实例讲述了JS运动框架之分享侧边栏动画实现方法。分享给大家供大家参考。具体实现方法如下:

javascript 实现动态侧边栏

1、分析清楚offsetLeft与目标值的关系,什么时候步长为正,什么时候步长为负;

    }

您可能感兴趣的文章:

  • 博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js jquery等)
  • javascript实现动态侧边栏代码
  • javascript 实现动态侧边栏实例详解
  • 利用js编写响应式侧边栏
  • 基于slideout.js实现移动端侧边栏滑动特效
  • JS实现侧边栏鼠标经过弹出框 缓冲效果
  • JavaScript中实现无缝滚动、分享到侧边栏实例代码
  • JavaScript实现简单的隐藏式侧边栏功能示例

然后是css的样式:

<script type="text/javascript">
 window.onload=function(){
 var oBox=document.getElementById('box');
 var timer=null;
 function startmove(iTarget){
  clearInterval(timer);
  timer=setInterval(function(){
  //求步长,为正向右移动,为负向左移动,10为自定义
  var speed=(iTarget-oBox.offsetLeft)/10; 
  //对步长取整,大于0向上取整,小于0向下取整,原因就是正数越来越大,负数越来越小
  speed=speed>0?Math.ceil(speed):Math.floor(speed); 
  //设置left的值
  oBox.style.left=oBox.offsetLeft speed 'px';
  },30)
 }
 oBox.onmouseenter=function(){
  startmove(0);
 }
 oBox.onmouseleave=function(){
  startmove(-200);
 }
 }
</script>

        },30)

复制代码 代码如下:

 图片 2

本文由江苏福彩快三发布,转载请注明来源

关键词: 江苏福彩快三