<!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. div中的字符换行

    div中的字符换行 转载自:http://blog.sina.com.cn/s/blog_6a79bc480100tizi.html   1.强制不换行,同时以省略号结尾. <div style ...

  2. 三级菜单---zhufeng

    <!doctype html><html><head><meta charset="utf-8"><title>无标题文 ...

  3. Asp.Net 导出Excel数据文件

    表格例子如下: <table id="tableExcel" width="100%" border="1" cellspacing= ...

  4. div在固定高的文字垂直居中

    <div style='display:table; height:100px;'> <div style='display:table-cell; vertical-align:  ...

  5. qml json 解析到 ListView

    https://github.com/kromain/qml-utils/tree/master/JSONListModel 非常棒!! 实现的原理如下文: http://goessner.net/a ...

  6. 使用ContentObserve监听用户发出的短信

    import android.net.Uri;import android.os.Bundle;import android.os.Handler;import android.app.Activit ...

  7. cf731E

    题意:一个游戏,由n张贴纸组成.贴纸排成一排,并且纸条上标有数字,玩家轮流揭下m张从左到右连续的纸条(m大等2),揭下后玩家得分累加这些纸条的sum,并且在剩下纸条最左边贴上新的纸条,数值为揭下纸条的 ...

  8. js循环

    $('.xcarcoin_tb').each(function(i){ var aika='爱卡币';                if(data[i]==0){                }e ...

  9. jmeter之json数据参数化 断言等

    在 http Load Testing 中,json 数据的提交是个让人头疼的问题.本文详细介绍如何进行 JMeter 的 json 测试提交,以及如何将其参数化.Step 1 http json 请 ...

  10. WP8.1 Study3：WP8.1中Animation应用

    WP8.1上的Animation动画的API和WIN8/WIN8.1上的差不多,网上可以找到很多资料,同时可以去MSDN看官方文档. 下面是我参考一些资料,写出来的例子,希望以后有用. xaml代码如 ...