html和css写在一起方便看,div通过定位设置为-200隐藏,span也是通过定位定在div靠左的中间

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <style type="text/css">

         * {

             margin: 0;

             padding: 0;

             font-size: 12px;

         }

         div {

             width: 200px;

             height: 200px;

             background: green;

             position: relative;

             left: -200px;

         }

         span {

             width: 30px;

             height: 30px;

             line-height: 30px;

             background: red;

             position: absolute;

             left: 200px;

             top: 85px;

             text-align: center;

             cursor: pointer;

         }

     </style>

 </head>

 <body>

     <div id="div">

         <span id="show">show</span>

     </div>

  </body>

 </html>

js部分是通过添加定时器设置offsetLeft值的自增和自减，来达到div显示和隐藏的效果

 <script>

         function $(id) {

             return typeof id === "string" ? document.getElementById(id) : id;

         }

         window.onload = function() {

             //定义了隐藏的div为pto

             var pto = $("div");

             //定义了按钮span为 btn

             var btn = $("show");

             //定义一个空的定时器

             var timer = null;

             //按钮绑定一个鼠标移进事件

             btn.onmouseenter = start;

             //自定义函数用于自动增加

             function start() {

                 //防止自加速,每次开始前都要清除定时器

                 clearInterval(timer);

                 //定义一个定时器

                 timer = setInterval(show, 30);

             }

             //自定义函数,直到offsetLeft的值为0,否则offsetLeft的值从-200一直自增5

             function show() {

                 if (pto.offsetLeft == 0) {

                     clearInterval(timer);

                 } else {

                     pto.style.left = pto.offsetLeft + 5 + 'px';

                 }

             }

             //绑定一个鼠标移出事件

             btn.onmouseleave = back;

             //自定义函数,用于自动减少

             function back() {

                 clearInterval(timer);

                 timer = setInterval(clear, 30);

             }

             //自定义函数，直到offsetLeft的值为-200，否则offsetLeft的值一直自减5

             function clear() {

                 if (pto.offsetLeft == -200) {

                     clearInterval(timer);

                 } else {

                     pto.style.left = pto.offsetLeft - 5 + 'px';

                 }

             }

         }

     </script>

javascript动画效果之匀速运动的更多相关文章

  1. javascript动画效果之匀速运动(修订版)

    在编写多块同时触发运动的时候,发现一个BUG, timer = setInterval(show, 30);本来show是一个自定义函数,当设为timer = setInterval(show(one ...

  2. Javascript动画效果（一）

    Javascript动画效果(一) 前面我们介绍了Javascript的回到顶部效果,今天呢,我们对Javascript动画做进一步的研究.在这篇博文中我们只介绍简单的匀速运动.简单的缓冲运动和简单的 ...

  3. Javascript动画效果（三）

    Javascript动画效果(三) 前面我们已经介绍了速度动画.透明度动画.多物体运动和任意值变化,并且我们在Javascript动画效果(二)中介绍到我们封装了一个简单的插件雏形,接下来我们对前面的 ...

  4. Javascript动画效果（二）

    Javascript动画效果(二) 在前面的博客中讲了简单的Javascript动画效果,这篇文章主要介绍我在改变之前代码时发现的一些问题及解决方法. 在前面的多物体宽度变化的例子中,我们给其增加代码 ...

  5. Javascript动画效果（四）

    Javascript动画效果(四) 前面我们自己写了一个小小的关于js动画的插件,下面我们来使用之前的框架来完成我们想要的动画效果.我们经常在淘宝网中看到,鼠标经过某一图片时,该图片有从上滚出而又从下 ...

  6. javascript动画效果之缓冲动画(修改版)

    在编写多块同时触发运动的时候,发现一个BUG, timer = setInterval(show, 30);本来show是一个自定义函数,当设为timer = setInterval(show(one ...

  7. javascript动画效果之透明度(修改版)

    在编写多块同时触发运动的时候,发现一个BUG, timer = setInterval(show, 30);本来show是一个自定义函数,当设为timer = setInterval(show(one ...

  8. 【BOOM】一款有趣的Javascript动画效果

    实践出真知,有的时候看到一些有趣的现象就想着用自己所学的知识复现一下.    boomJS 缘起 前几天在 github 上看到同事的一个这样的小项目,在 IOS 上实现了这样一个小动画效果,看上去蛮 ...

  9. javascript动画效果

    之前工作项目中,运用了缓动动画的效果,在网上看到其他大牛写的相关公式,结合工作需要,进行了整理,拿出来跟大家分享下,js代码中,只运用了一个小功能进行了测试 <!DOCTYPE html> ...

随机推荐

  1. 【IE6的疯狂之五】div遮盖select的解决方案

    IE6以及一下版本下,选择框Select会覆盖Div中的内容一般情况下,可以将显示的内容放到Iframe中,然后再显示框架内的内容.由于Iframe的可以显示在Select上层,就可以解决这个问题.不 ...

  2. 前端知识点-CSS相关知识点

    1.解释一下CSS的盒子模型? 回答一: a.标准的css盒子模型:宽度=内容的宽度+边框的宽度+加上内边具的宽度 b.网页设计中常听的属性名:内容(content).填充(padding).边框(b ...

  3. 前端知识点-JS相关知识点

    1.谈谈你对Ajax的理解?(概念.特点.作用) AJAX全称为"Asynchronous JavaScript And XML"(异步JavaScript和XML) 是指一种创建 ...

  4. zabbix 布署实践【1 server安装】

    通过openstack环境,开通了2台只有根分区的虚拟机,   目的是为了监控公司所有的物理机,网络设备,虚拟机,总计300个台以上,推荐配置,zabbix官方文档是有给出指引的   环境:CentO ...

  5. java中使用数组和链表简单实现SJBMap

    import java.util.LinkedList; public class SJBMap { private Object[] elementData; private int size; p ...

  6. wpf 遍历listview 时 传入指定类型 得到指定类型控件info

    private ChildType FindVisualChild<ChildType>(DependencyObject obj) where ChildType : Dependenc ...

  7. centos 设置删除提示

    centos 设置删除.覆盖提示 相信好多用linux的同学都用过cp这个命令来覆盖文件,但是新建的普通用户不会有任何提示,这时候心里就咯噔一下,赶紧看看新文件的是不是传上去了.如果加上提示,是不是就 ...

  8. C++友元

    通过friend关键字,我们可以将不属于当前类的一个函数在当前类中加以声明,该函数便可以成为当前类的友元函数. 例1: #include<iostream>using namespace ...

  9. 七天学会ASP.NET MVC (四)——Layout页面使用和用户角色管理 （代码下载）

    中文翻译链接: http://www.cnblogs.com/powertoolsteam/p/MVC_four.html 360云盘: https://yunpan.cn/cYuEeLtXUvrgC ...

  10. 使用webview加载html图片、表单超屏幕问题

    webView加载html代码时,使用webView自带的 scalesPageToFit 可以解决图片所带来的超过屏幕问题:但是,所带来的问题就是文字变小了,怎样让图片边小,并且文字还是原来html ...