<!DOCTYPE HTML>

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 <title>无标题文档</title>

 <style>

 #div1 {width: 100px; height: 200px; background: red; position: absolute; left: -100px; top: 100px;}

 #div2 {width: 30px; height: 60px; background: black; position: absolute; right: -30px; top: 70px; color: white; text-align: center;}

 </style>

 <script>

 window.onload = function() {

     var oDiv1 = document.getElementById('div1');

     var oDiv2 = document.getElementById('div2');

     var iTimer = null;

     oDiv1.onmouseover = function() {

         startMove(0, 10);

     }

     oDiv1.onmouseout = function() {

         startMove(-100, -10);

     }

     function startMove(iTarget, iSpeed) {

         clearInterval(iTimer);

         iTimer = setInterval(function() {

             if (oDiv1.offsetLeft == iTarget) {

                 clearInterval(iTimer);

             } else {

                 oDiv1.style.left = oDiv1.offsetLeft + iSpeed + 'px';

             }

         }, 30);

     }

 }

 </script>

 </head>

 <body>

     <div id="div1">

         <div id="div2">分享到</div>

     </div>

 </body>

 </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. SQL Server 自定义函数（1）把某一列多行的值拼接成一个字符串

    ) SET @resultstr='' SELECT @resultstr=@resultstr+'|'+[BaseImage] FROM dbo.life_fc PRINT @resultstr 示 ...

  2. css清除浮动的处理方法

    根据<精彩绝伦的css> <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  3. shell 下的$符合

    $n        $1 the first parameter,$2 the second...$#        The number of command-line parameters.$0  ...

  4. node.js+WebStorm路径问题

    目录路径 :A文件夹下有B.C文件夹和app.js文件.B文件夹下有webserver.js文件等. A B webserver.js ...... C ...... app.js WebStorm配 ...

  5. tortoisegit教程

    tortoisegit教程: http://www.mamicode.com/info-detail-311565.html https://my.oschina.net/longxuu/blog/1 ...

  6. hdu 4602 Partition

    http://acm.hdu.edu.cn/showproblem.php?pid=4602 输入 n 和 k 首先 f(n)中k的个数 等于 f(n-1) 中 k-1的个数 最终等于 f(n-k+1 ...

  7. 从ajax获取的数据无法通过Jquery选择器来调用事件

    如果标签是动态生成的,比如说div.tr.td等,若需通过Jquery来获取事件,那么需要用live来绑定相应的事件. 比如说绑定div的click事件 $("div").live ...

  8. mouseOver与rollOver

    区别: 当父容器监听这两个事件,鼠标从父容器移到子容器再移回父容器时,会触发mouseOver.mouseout事件,但是不会触发rollover.rollout事件.

  9. Android google map 两点之间的距离

    在Android google map中,有时候会碰到计算两地的距离,下面的辅助类就可以帮助你计算距离: public class DistanceHelper { /** Names for the ...

  10. MYSQL数据库导入导出(可以跨平台)

    MYSQL数据库导入导出.sql文件 转载地址:http://www.cnblogs.com/cnkenny/archive/2009/04/22/1441297.html 本人总结:直接复制数据库, ...