<!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. Java 之 I/O 系列 02 ——序列化（二）

    Java 之 I/O 系列 目录 Java 之 I/O 系列 01 ——基础 Java 之 I/O 系列 02 ——序列化(一) Java 之 I/O 系列 02 ——序列化(二) 继续上篇的第二个问 ...

  2. 使用cnblogs.com的用户体验和提出来的建议

    1.是否提供良好的体验给用户(同时提供价值)? 我是很久以前就有CN的账号了的,因为这个网站有很多有用的信息,和比较活跃的论坛.很多不懂的问题可以求助上面的大神.但是,我第一次登陆主页面的时候我是懵逼 ...

  3. LSM树——放弃读能力换取写能力，将多次修改放在内存中形成有序树再统一写入磁盘

    LSM树(Log-Structured Merge Tree)存储引擎 代表数据库:nessDB.leveldb.hbase等 核心思想的核心就是放弃部分读能力,换取写入的最大化能力.LSM Tree ...

  4. Oracle存储过程写法

    create or replace procedure QIANFEIGL_JIAOKUANDY( cebenh varchar2, kehuh varchar2, hetongh varchar2, ...

  5. BZOJ3689 异或之

    我们需要知道一个事实,trie树上是可以要求第k大的! 我们每个节点记个size值然后像其他数据结构一样维护就可以了 然后我们再搞个priority_queue什么的就好了,注意每个值会出现两次只要记 ...

  6. java面向对象编程——第六章 数组

    1.数组概述 数组是存储在一个连续的内存块中的元素集合.数组中的每个元素必须是相同的数据类型,并且通过索引进行区分.数组中的第一个元素的索引为0. 在java中,创建数组有两个步骤: 声明一个对数组的 ...

  7. cf731E

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

  8. 二模 （1） day2

    第一题: 题目大意: N层楼,K个人,M个箱子在1楼,给出K个人的初始状态(在第几楼,正在向上走还是向下走,向上走的人手里已经有箱子),每次移动一层楼,求把所有箱子(手里拿着的不算在M里)全部搬到顶楼 ...

  9. python 字典排序 关于sort()、reversed()、sorted()

    一.Python的排序 1.reversed() 这个很好理解,reversed英文意思就是:adj. 颠倒的:相反的:(判决等)撤销的 print list(reversed(['dream','a ...

  10. C语言：文件操作

    以附加方式打开文件,输入数据,关闭文件. #include<stdio.h> #include<stdlib.h> int main() { FILE *fp = NULL; ...