<!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. JDBC题库

    一.    填空题 JDBC    ,是一种用于执行SQL语句的Java API,为多种关系数据库提供统一访问.它由一组用Java语言编写的类和接口组成. JDBC API:供程序员调用的接口与类,集 ...

  2. 用Python套接字创建HTTP客户与服务器程序

    最近在学习python,网络编程中,python寥寥几句,就可以创建一个服务端和客户端程序: 服务端: import sockets = socket.socket()host = socket.ge ...

  3. cf378C(模拟)

    题目链接:http://codeforces.com/contest/733/problem/C 思路:模拟 因为数组b里的元素是顺序对应a数组元素的和,可以开个c数组储存b数组元素对应的a数组元素区 ...

  4. Swift - 代码创建单例

    创建单例的方法 import UIKit //创建一个单例类 class SingleInstance: NSObject { //在单例类中,有一个用来共享数据的数组 var datas = [St ...

  5. sys.sysprocesses视图的使用小结

    Sys.SysProcesses 系统表是一个很重要的系统视图,主要用来定位与解决Sql Server的阻塞和死锁包含正在 SQL Server 实例上运行的进程的相关信息.这些进程可以是客户端进程或 ...

  6. 20.策略者模式(Stragety Pattern)

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  7. Redis不同数据类型的的数据结构实现

    我们知道Redis支持五种数据类型, 分别是字符串.哈希表(map).列表(list).集合(set)和有序集合,和Java的集合框架类似,不同数据类型的数据结构实也是不一样的. >>Re ...

  8. MySQL replace函数替换字符串语句的用法（mysql字符串替换）

    MySQL replace函数我们经常用到,下面就为您详细介绍MySQL replace函数的用法,希望对您学习MySQL replace函数方面能有所启迪. 最近在研究CMS,在数据转换的时候需要用 ...

  9. 设计模式学习之桥接模式（Bridge，结构型模式）（15）

    参考地址:http://terrylee.cnblogs.com/archive/2006/02/24/336652.html 概述 在软件系统中,某些类型由于自身的逻辑,它具有两个或多个维度的变化, ...

  10. Python 反编译工具uncompyle2

    如何反编译pyc uncompyle2 是一个可以将pyc文件转换为py源码的工具 下载地址:https://github.com/wibiti/uncompyle2 安装: setup.py ins ...