定时器及运动函数的使用。

<!--

Author: XiaoWen

Create a file: 2016-12-14 09:41:11

Last modified: 2016-12-14 10:11:53

Start to work:

Finish the work:

Other information:

-->

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>分享到</title>

  <style>

    *{

      margin: 0;

      padding: 0;

    }

    #box{

      width: 100px;

      height: 100px;

      position: fixed;

      top: 40px;

      left: -100px;

      background: #ccc;

    }

    #box .share{

      width: 20px;

      height: 60px;

      background: #f00;

      position: absolute;

      right: -20px;

      top: 20px;

    }

  </style>

</head>

<body>

  <div id="box">

    <div class="share">分享到</div>

  </div>

  <script>

    var box=document.getElementById("box");

    var share=box.getElementsByClassName("share")[0];

    box.onmouseover=function(){

      move(box,'left',0)

    }

    box.onmouseout=function(){

      move(box,'left',-100)

    }

    function getStyle(obj,attr){

      if(obj.currentStyle){

        return obj.currentStyle[attr];

      }else{

        return getComputedStyle(obj)[attr];

      }

    }

    var timer=null;

    function move(obj,attr,iTarget){

      clearInterval(obj.timer)

      obj.timer=setInterval(function(){

        var speed=(iTarget-parseInt(getStyle(obj,attr)))/8;

        speed=speed>0 ? Math.ceil(speed) : Math.floor(speed);

        if(iTarget==parseInt(getStyle(obj,attr))){

          clearInterval(obj.timer);

        }else{

          obj.style[attr]=parseInt(getStyle(obj,attr))+speed+'px';

        }

      },10)

    }

  </script>

</body>

</html>

js运动：分享到的更多相关文章

  1. js运动 分享到

    <!doctype html> <html> <head> <meta charset = "utf-8"> <title&g ...

  2. JS运动从入门到兴奋1

    hello,我是沐晴,一个充满了才华,却靠了照骗走江湖的前端妹子.在这个充满PS的年代,这你们都信,哈哈,废话不多说,今天要分享的是关注JS运动的知识.楼主一直认为,不管学习什么,核心思想才是王道,掌 ...

  3. 第八节 JS运动基础

    运动基础 让Div运动起来 速度——物体运动的快慢 运动中的Bug 不会停止 速度取某些值会无法停止 到达位置后再点击还会运动 重复点击速度加快 匀速运动(速度不变) 运动框架及应用: 运动框架: 在 ...

  4. 解析JS运动

    解析JS运动 物体运动原理:通过改变物体的位置,而发生移动变化. 任何运动都是相对的,就像物理中的运动公式:s(要达到的)=s0(当前的样式值)+vt. 方法:      1.运动的物体使用绝对定位 ...

  5. 带无缝滚动的轮播图（含JS运动框架）

    今天学习了一下轮播图的写作,想到前一阵学过的无缝滚动得思想,所以就把轮播与滚动结合了一下.不过我的代码的神逻辑我自己都不敢恭维,在没网没参照的情况下,只能硬着头皮往下写,希望跟大家共勉吧. js运动框 ...

  6. js运动框架之一条乱跑的虫子

    克隆与运动框架的联合应用 效果:点击元素块后,元素块开始随机的向任何方向移动,并附带一堆颜色随机的"尾巴".每个方向运动3秒后改变方向,同时笑脸变哭脸. 如图所示: 朝某个方向运动 ...

  7. JS微信分享不好写？来封装一下

    微信开发这块,作为开发工程师来说,一般是避免不了的,也好像发现一些朋友写微信分享都是在每个页面一大把一大把的代码. 代码冗余,即便是复制过来再改也很麻烦. 之前自己封装了一下js,今天来分享一下,希望 ...

  8. 关于js运动的一些总结

    js运动实现,有两种.一种是速度版,另一种是时间版. 速度版是通过对速度的加减乘除,得出元素的运动数据.时间版是通过对时间进行Tween公式运算,得出元素的运动数据. 速度版运动优点:容易在运动过程中 ...

  9. JS运动学习笔记 -- 任意值的运动框架（高/宽度，背景颜色，文本内容，透明度等）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. js运动动画

    原文:js运动动画 今天简单的学了一下js运动动画,再此感谢慕课网的这位老师http://www.imooc.com/view/167,讲的很不错. 下面是我整理出来的结果. 知识点一:速度动画. 1 ...

随机推荐

  1. 解决winrar压缩软件弹出广告

    最近winrar每次打开压缩包就会弹出一个广告,那是因为winrar是收费软件,注册了就没有广告了.下面我教大家怎么注册来屏蔽广告. 解决方法 1.新建一个txt文件并命名为"rarreg. ...

  2. sqlite中的replace、insert、update之前的区别

    本文转自http://www.ithao123.cn/content-933827.html,在此感谢作者 android数据库操作,有两种方式,一种用android提供给我们的数据库操作函数inse ...

  3. ue4 SNew背后的逻辑

    ue4的ui库Slate体系非常庞大,即使是在创建对象这一小事上,也是相当复杂: SLATECORE_API TSharedRef<SWidget> SNullWidget::NullWi ...

  4. python 生产者消费者模型

    import time def consumer(name): print("%s开始吃包子了"%name) while True: ret = yield time.sleep( ...

  5. freeCodeCamp:Truncate a string

    截断一个字符串! 如果字符串的长度比指定的参数num长,则把多余的部分用...来表示. 切记,插入到字符串尾部的三个点号也会计入字符串的长度. 但是,如果指定的参数num小于或等于3,则添加的三个点号 ...

  6. 浅谈Android 6.0之Runtime Permissions

    前言 Android6.0发布后,其一系列新特新足够让我们这些Android程序员兴奋一段时间了.首先我们先看看具体有哪些新特性: -锁频下语音搜索 -指纹识别 -更完整的应用权限管理 -Doze电量 ...

  7. noip2010-t2

    题目大意:小明过生日的时候,爸爸送给他一副乌龟棋当作礼物.乌龟棋的棋盘是一行 N个格子,每个格子上一个分数(非负整数).棋盘第 1 格是唯一 的起点,第 N格是终点,游戏要求玩家控制一个乌龟棋子从起点 ...

  8. C++调用动态库中的虚基类成员函数时总是进错函数

    原创文章,转载请注明作者与本文原始URL. 问题描述:最近遇到这样一个问题,在调用C++的一个成员函数时,总是进错函数.在调用 pMsg->GetMsgContent() 的时候,总是进入到 p ...

  9. JAVA程序提示错误：需要class，interface或enum解决方法

    错误详情: 解决办法:主要是用非记事本编写代码文件,存在编码格式转换问题.重新先建一个记事本程序,然后把源代码粘贴到该文件下,用javac 类名.java编译,java 文件名运行该程序即可

  10. Spring MVC 指导文档解读（一）

    22.1 指导文档章节 In the Web MVC framework, each DispatcherServlet has its own WebApplicationContext, whic ...