<!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. .NET微信公众号开发-4.0公众号消息处理

    一.前言 微信公众平台的消息处理还是比较完善的,有最基本的文本消息,到图文消息,到图片消息,语音消息,视频消息,音乐消息其基本原理都是一样的,只不过所post的xml数据有所差别,在处理消息之前,我们 ...

  2. Servlet题库

    一.    填空题 Servlet中使用Session对象的步骤为:调用  HttpServletRequest.getSession()  得到Session对象,查看Session对象,在会话中保 ...

  3. java课后作业6

    一.运行TestInherits.java 结论:通过super调用基类构造方法,必须是子类构造方法中的第一个语句. 二.为什么子类的构造方法在运行之前,必须调用父类的构造方法?能不能反过来?为什么不 ...

  4. 利用android来赚钱

    看了一篇fenger 大神写的文章,受益匪浅,在此做一下记录 转载地址:http://bbs.csdn.net/topics/370249613 其他参考地址: http://bbs.gfan.com ...

  5. Codeforces Round #377 (Div. 2)D(二分)

    题目链接:http://codeforces.com/contest/732/problem/D 题意: 在m天中要考k个课程, 数组a中有m个元素,表示第a[i]表示第i天可以进行哪门考试,若a[i ...

  6. [转]嵌入式SQC文件编译

      Src Url:http://blog.csdn.net/cws1214/article/details/12996351   A.预编译部分  1.预编译DB2篇 1.1 什么是DB2预编译 在 ...

  7. vsftp详细配置（转）

    详细配置转载来自以下链接: http://yuanbin.blog.51cto.com/363003/108262 vsftp源码下载(vsftpd-3.0.2.tar.gz): http://dow ...

  8. 如何在elasticsearch中查看Logstash打到elasticsearch的数据

    # cat syslog02.conf #filename:syslog02.conf #注意这个是要用#号注释掉 input{ file{ path => ["/var/log/*. ...

  9. ASP.NET Web API 数据验证

    第一种方式单独为每一个Action做验证 // POST api/values public HttpResponseMessage Post([FromBody]UserInfo userInfo) ...

  10. Python 反编译工具uncompyle2

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