<!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. 【linux】进程不要开太多，否则系统会卡死！

    今天在跑一个任务,大概像下面这样 python task.py -s input/ input文件夹下有两百多个文件,比如1.txt, 2.txt等等,task.py会顺序读取并做操作. 我想,这不是 ...

  2. LeetCode 453 Minimum Moves to Equal Array Elements

    Problem: Given a non-empty integer array of size n, find the minimum number of moves required to mak ...

  3. IOS - SDWebImage 非ARC 问题

    非arc项目中使用SDWebImage类库 1.添加类库引用    (1)ImageIO.framework    (2)MapKit.framework 2.在targets->build P ...

  4. JavaScript prototype应用

    //JavaScript自定义功能 //1,去除字符串两端空格 String.prototype.trim = function() { var start, end; start = 0; end  ...

  5. Oracle读写分离架构

    读写分离是架构分布式系统的一个重要思想.不少系统整体处理能力并不能同业务的增长保持同步,因此势必会带来瓶颈,单纯的升级硬件并不能一劳永逸.针对业务类型特点,需要从架构模式上进行一系列的调整,比如业务模 ...

  6. Swift - 让程序挂起后，能在后台继续运行任务

    1,程序的挂起和退出 由于iOS设备资源有限.当用户点击了home键,或者另一个应用程序启动了.那么原先那个程序便进入后台被挂起,不是退出,只是停止执行代码,同时它的内存被锁定.当应用程序恢复时,它会 ...

  7. Xcode开发中的6个小技巧

    Xcode是iPhone和iPad开发者用来编码或者开发iOS app的IDE.Xcode有很多小巧但很有用的功能,很多时候我们可能没有注意到它们,也或者我们没有在合适的水平使用这些功能简化我们的iO ...

  8. Jpinyin笔记

  9. Linux性能分析工具的安装和使用

    转自:http://blog.chinaunix.net/uid-26488891-id-3118279.html Normal 0 7.8 磅 0 2 false false false EN-US ...

  10. devices-list

    转自:https://www.kernel.org/pub/linux/docs/lanana/device-list/devices-2.6.txt LINUX ALLOCATED DEVICES ...