<!DOCTYPE HTML>

<html>

<head>

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

<title>分享</title>

<style>

body,div,span{

    margin:0;

    padding:0;

    }

.div{

    background:red;

    width:200px;

    height:200px;

    position:relative;

    left:-200px;

    top:10px;

    }

.a{

    padding:2px;

    width:20px;

    height:50px;

    position:absolute;

    left:200px;

    top:20px;

    background:blue;

    color:white;

    text-decoration:none;

    }

</style>

<script>

window.onload = function (){

    var div = document.getElementById('div');

    div.onmouseover = function (){

        display(10,0);

        }

    div.onmouseout = function (){

        display(-10,-200);

        }

    }

    var stop = null;

function display(speed, targetLeft){

    clearInterval(stop);

    var div = document.getElementById('div');

    stop = setInterval(function(){

        if(div.offsetLeft == targetLeft){

            clearInterval(stop);

        }

        else{

            div.style.left = div.offsetLeft + speed + 'px';

            }

        }, 30);

    }

</script>

</head>

<body>

<div class="div" id="div">

<a href="#" class="a" id="a">分享</a>

</div>

</body>

</html>

动画总结：写js函数时，如果两个函数差不多，可以把相同的地方提出来当参数穿进去。对于计时器要想到清空它。

js动画实现侧边栏分享的更多相关文章

  1. 【06-23】js动画学习笔记01

    <html> <head> <style> * { margin:0; padding:0; } #div1{ width:200px; height:200px; ...

  2. 基于jquery的侧边栏分享导航

    今天给大家分享一款基于jquery的侧边栏分享导航.这款分享钮一直固定于左侧,鼠标经过的时候凸出显示,这款分享按钮适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲 ...

  3. 高性能Web动画和渲染原理系列（1）——CSS动画和JS动画

    [摘要] 介绍CSS动画和JS动画的基本特点,以及轻量级动画库velocity.js的基本用法. 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园 ...

  4. js动画--缓冲动画

    前面讲述的动画速度都是匀速的,现实生活中的运动速度的变化不一定是恒定的,存在一定的缓冲,就像火车进站一样,速度会越来越慢. 对于改变速度措施,其实只要将动画第一课的程序稍微的改变一下就可以了,我们来看 ...

  5. css动画与js动画的区别

    CSS动画 优点: (1)浏览器可以对动画进行优化.   1. 浏览器使用与 requestAnimationFrame 类似的机制,requestAnimationFrame比起setTimeout ...

  6. CSS VS JS动画，哪个更快[译]

    英文原文:https://davidwalsh.name/css-js-animation 原作者Julian Shapiro是Velocity.js的作者,Velocity.js是一个高效易用的js ...

  7. JS动画理论

    动画(Animation) 动画意味着随着时间而变化,尤其指视觉上的变化,包括位置.形态等的变化.运动基本上表现为物体随时间,发生位置上的变化:形态基本表现为大小.颜色.透明度.形状等随时间的变化. ...

  8. css与 js动画 优缺点比较

    我们经常面临一个抉择:到底使用JavaScript还是CSS动画,下面做一下对比 JS动画 缺点:(1)JavaScript在浏览器的主线程中运行,而主线程中还有其它需要运行的JavaScript脚本 ...

  9. [学习笔记]js动画实现方法，作用域，闭包

    一,js动画基本都是依靠setInterval和setTimeout来实现 1,setInterval是间隔执行,过一段时间执行一次代码 setInterval(function(){},500);即 ...

随机推荐

  1. db2中报SQLCODE=-530, SQLSTATE=23503错误

    今天在写一个增加操作时,报错信息如下:SQLCODE=-530, SQLSTATE=23503,该sqlcode说明:“对特定的约束名指定了无效的外健值”. 项目中用的框架是SSH,新增的主对象有多个 ...

  2. ios NSLayoutConstraint

    为了让我们的应用在不同尺寸的屏幕下都能 “正常”的表示,我们尽量不要把数据写死.大多数可视元素都是一个矩形区域,当然这个矩形区域有坐标的,我们有了这个区域坐标就能确定可视元素的现实位置了.但是ipho ...

  3. ssh自动登陆

    突然碰到有人问ssh再传输密钥时候能不手动输入密码,由于没有碰到过这种情况,所以查了一下发现可以用sshpass做到. sshpass [参数] ssh命令: 参数: -p password  #将参 ...

  4. [Android Pro] 网络流量安全测试工具Nogotofail

    reference to : http://www.freebuf.com/tools/50324.html 从严重的HeartBleed漏洞到苹果的gotofail 漏洞,再到最近的SSL v3 P ...

  5. Linux vmstat字段解析

    vmstat命令是最常见的Linux/Unix监控工具,可以展现给定时间间隔的服务器的状态值,包括服务器的CPU使用率,内存使用,虚拟内存交换情况,IO读写情况.这个命令是我查看Linux/Unix最 ...

  6. 【转】深入Windows内核——C++中的消息机制

    上节讲了消息的相关概念,本文将进一步聊聊C++中的消息机制. 从简单例子探析核心原理 在讲之前,我们先看一个简单例子:创建一个窗口和两个按钮,用来控制窗口的背景颜色.其效果 图1.效果图  Win32 ...

  7. UbuntuLinux安装Mysql

    1.安装Mysql5.7 方法:手动安装5.7 One:     $ wget http://dev.mysql.com/get/mysql-apt-config_0.6.0-1_all.deb 下载 ...

  8. iOS - UIButton设置图片文字上图下文排列

    经查阅资料及尝试,最终解决了在图片和文字垂直排列的情况下,如果文字长度变化会导致图片位置变动的问题,最开始采用了网上比较多的做法,做法如下: @interface UIButton (UIButton ...

  9. iOS开发人员不容错过的10大工具

    内容简介 1.iOS简介 2.iOS开发十大实用工具之开发环境 3.iOS开发十大实用工具之图标设计 4.iOS开发十大实用工具之原型设计 5.iOS开发十大实用工具之演示工具 6.iOS开发十大实用 ...

  10. sqlite建表语句(特别是外键问题)

    原创  sqlite建表语句(特别是外键问题) 下面图表示两个表关系: //表1User_invitecreate table User_invite(Invite_id INTEGER PRIMAR ...