1.  <!DOCTYPE HTML>
  2.  <html>
  3.  <head>
  4.  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5.  <title>无标题文档</title>
  6.  <style>
  7.  #div1 {width: 100px; height: 200px; background: red; position: absolute; left: -100px; top: 100px;}
  8.  #div2 {width: 30px; height: 60px; background: black; position: absolute; right: -30px; top: 70px; color: white; text-align: center;}
  9.  </style>
  10.  <script>
  11.  window.onload = function() {
  12.  
  13.      var oDiv1 = document.getElementById('div1');
  14.      var oDiv2 = document.getElementById('div2');
  15.      var iTimer = null;
  16.  
  17.      oDiv1.onmouseover = function() {
  18.          startMove(0, 10);
  19.      }
  20.  
  21.      oDiv1.onmouseout = function() {
  22.          startMove(-100, -10);
  23.      }
  24.  
  25.      function startMove(iTarget, iSpeed) {
  26.          clearInterval(iTimer);
  27.  
  28.          iTimer = setInterval(function() {
  29.  
  30.              if (oDiv1.offsetLeft == iTarget) {
  31.                  clearInterval(iTimer);
  32.              } else {
  33.                  oDiv1.style.left = oDiv1.offsetLeft + iSpeed + 'px';
  34.              }
  35.  
  36.          }, 30);
  37.      }
  38.  
  39.  }
  40.  </script>
  41.  </head>
  42.  
  43.  <body>
  44.      <div id="div1">
  45.          <div id="div2">分享到</div>
  46.      </div>
  47.  </body>
  48.  </html>

简单的JS运动封装实例---侧栏分享到的更多相关文章

  1. js 方法封装实例

    (function(){ if(windows.Mr_2_B){windows.Mr_2_B={};} function trim(txt){return txt.replace(/(^\s*|(\s ...

  2. dom 侧栏分享

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

  3. JS的运动1（从简单到复杂运动，从单一属性到多属性同时进行的运动过程分析）

    js运动原理 运动基础 在js中,让一个元素动起来的最简单的方式,就是点击按钮,让元素移动.下面是一个简单的案例:(下面几个案例的的html和css都是采用这个为例) <!DOCTYPE htm ...

  4. js原生设计模式——3简单工厂模式\js面向对象编程实例

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

  5. ionic js 侧栏菜单 把主要内容区域从一边拖动到另一边，来让左侧或右侧的侧栏菜单进行切换

    ionic 侧栏菜单 一个容器元素包含侧边菜单和主要内容.通过把主要内容区域从一边拖动到另一边,来让左侧或右侧的侧栏菜单进行切换. 效果图如下所示: 用法 要使用侧栏菜单,添加一个父元素<ion ...

  6. Ionic Js十七：侧栏菜单

    一个容器元素包含侧边菜单和主要内容.通过把主要内容区域从一边拖动到另一边,来让左侧或右侧的侧栏菜单进行切换. 效果图如下所示:   用法 要使用侧栏菜单,添加一个父元素,一个中间内容 ,和一个或更 ...

  7. CSS3侧栏滑出简单实现

    使用css3 的 animation 属性实现的点击滑出侧栏 <!DOCTYPE html> <html lang="en"> <head> & ...

  8. JavaScript学习总结【11】、JS 运动

    动画效果在网站中是一种非常常见的交互式体验效果,比如侧边栏分享.图片淡入淡出,我们把这种动画效果就叫做运动,也就是让物体动起来.如果想让一个物体动起来,无非就是改变它的速度,也就是改变属性值,比如 l ...

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

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

随机推荐

  1. Java List的深度克隆

    关于java List的深度克隆 List是java容器中最常用的顺序存储数据结构之一.有些时候我们将一组数据取出放到一个List对象中,但是可能会很多处程序要读取他或者是修改他.尤其是并发处理的话, ...

  2. 告别node-forever,拥抱PM2

    告别node-forever,拥抱PM2 返回原文英文原文:Goodbye node-forever,hello PM2 devo.ps团队对JavaScript的迷恋已经不是什么秘密了;node.j ...

  3. Android开发--TextView的应用

    1.概述 TextView主要用于Activity中文本的应用.其中layout中xml文件(activity)设置文本的宽度,高度,ID:values中strings.xml设置文本内容. Text ...

  4. 449. Serialize and Deserialize BST——几乎所有树的面试题目都会回到BFS或者DFS，使用BFS，None节点存#

    Serialization is the process of converting a data structure or object into a sequence of bits so tha ...

  5. 454. 4Sum II ——查找本质：hash最快，二分次之

    Given four lists A, B, C, D of integer values, compute how many tuples (i, j, k, l) there are such t ...

  6. Java 生成压缩包，ZipOutputStream的使用

    案例:根据url 获取网络资源A,B,C   将资源A,B,C放在一起生成一个xxx.zip 直接看代码 import java.io.File; import java.io.FileOutputS ...

  7. double int char 数据类型

    贴心的limits... 测试代码: #include <iostream> #include <stdio.h> #include <limits> #inclu ...

  8. java 面向对象编程-- 第十三章 反射、类加载与垃圾回收

    1.狭义JavaBean规范 Javabean必须包含一个无参数的public构造方法,方便通过反射的方式产生对象. 属性必须都是私有的. Javabean必须包含符合命名规范的get和set方法,以 ...

  9. adMob iAd整合，随机根据网络状况自动显示。

    最近找整合的代码,找到的都不对,有个大概对的,但要奔溃退出,只要两个单独弄. adMob 下载好sdk,导入进去,iAd的加入iad framework. 使用方法,在viewController v ...

  10. Quartz2D

    http://donbe.blog.163.com/blog/static/138048021201052093633776/ 详解 代码如下: DJView 绘制线段 基本图形 // // DJVi ...