<!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. CocoaPods安装教程

    Code4App 原创文章.转载请注明出处:http://code4app.com/article/cocoapods-install-usage CocoaPods是什么? 当你开发iOS应 用时, ...

  2. 【Python升级录】--基础知识

    创建角色成功! 正在载入python........ [python介绍] python是一门动态解释性的强类型定义语言. python的创始人为吉多·范罗苏姆(Guido van Rossum).1 ...

  3. Office文件的Open Xml 格式

    获取Office文件的Open Xml格式文件的步骤如下: 1.修改想要得到OpenXml格式文件的文件后缀名为.rar. 2.解压即可得到. 此时可以对xml文件进行操作,要想再次把这已经解压后的文 ...

  4. AFNetworking(AFN)总结

    AFNetworking(AFN) ----主要做下载上传之用 //他是干啥的?发送请求,主要做下载上传之用 (苹果自带有获取服务器数据的方法NSURLConnection send,AFNetwor ...

  5. 51nod1006(lcs)

    题目链接:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1006 题意:中文题诶- 思路:最长公共子序列模板题- 我们用d ...

  6. JVM_Bind:8080 的解决办法【131031】

    出错情况:运行 Tomcat 时报错 含义:8080 位置显示的端口被其他进程占用 解决方法: 方法1: 开始--运行--cmd 进入命令提示符 输入netstat -ano 即可看到所有连接的PID ...

  7. 攻城狮在路上（叁）Linux（十六）--- 命令与文件的查找

    一.脚本文件的查询: 1.命令格式:which [-a] command; <==通过PATH来查找. -a:列出所有的,而不是仅列出第一个. 示例: which ifconfig; 注意:由于 ...

  8. jquery获取radio和select选中值

    //jquery 获取radio选中值 <input type="radio" name="c_type" value="a" > ...

  9. NS2中trace文件分析

    ns中模拟出来的时间最终会以trace文件的形式告诉我们,虽然说一般都是用awk等工具分析trace文件,但是了解trace文件的格式也是必不可少的.下面就介绍一下无线网络模拟中trace文件的格式. ...

  10. iOS经典面试题（转）

    iOS经典面试题   前言 写这篇文章的目的是因为前两天同学想应聘iOS开发,从网上找了iOS面试题和答案让我帮忙看看.我扫了一眼,倒吸了一口冷气,仔细一看,气的发抖.整篇题目30多个没有一个答案是对 ...