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 集合系列 05 Vector详细介绍(源码解析)和使用示例

    java 集合系列目录: Java 集合系列 01 总体框架 Java 集合系列 02 Collection架构 Java 集合系列 03 ArrayList详细介绍(源码解析)和使用示例 Java ...

  2. 转载css层级优先级。

    解读CSS样式优先级(修改门户自定义样式必读) 一.什么是CSS优先级?所谓CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序.当同一个元素(或内容)被多个CSS选择符选中时,就要按照优先权取舍 ...

  3. lucene底层数据结构——底层filter bitset原理，时间序列数据压缩将同一时间数据压缩为一行

    如何联合索引查询? 所以给定查询过滤条件 age=18 的过程就是先从term index找到18在term dictionary的大概位置,然后再从term dictionary里精确地找到18这个 ...

  4. （BFS）hdoj1242-Rescue

    题目地址 初学BFS,第一次用BFS做题.题目就是一个基本的BFS模型,需要稍加注意的是遇到警卫时间要+1,以及最后比的是最短的时间而不是步数. #include<cstdio> #inc ...

  5. "琳琅满屋"调查问卷 心得体会及结果分析

    ·关于心得体会       当时小组提出这个校园二手交易市场的时候,就确定了对象范围,仅仅是面向在校大学生,而且在我们之前就已经有了很多成功的商品交易的例子可以让我们去借鉴,再加上我们或多或少的有过网 ...

  6. 自定义圆的半径layout

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:too ...

  7. C/C++文件结构

    总结者:kate (1).h 为头文件:存放 版权和版本声明,预处理块 ,函数和类结构声明 (2).cpp文件:代码文件,存放程序的实现 大都数时候,源文件和头文件是对应出现的,比如有一个A.cpp  ...

  8. linux下的deb/rpm文件的说明和安装方法

    1.    deb 是 ubuntu .debian 的格式.    rpm 是 redhat .fedora .suse 的格式. 他们不通用(虽然可以转换一下). deb是debian发行版的软件 ...

  9. c#多线程(UI线程,控件显示更新) Invoke和BeginInvoke 区别

    如果只是直接使用子线程访问UI控件,直接看内容三,如果想深入了解从内容一看起. 一.Control.Invoke和BeginInvoke方法的区别 先上总结: Control.Invoke 方法 (D ...

  10. Note_Master-Detail Application(iOS template)_02_YJYAppDelegate.m

    //YJYAppDelegate.m #import "YJYAppDelegate.h" #import "YJYMasterViewController.h" ...