js动画实现侧边栏分享
<!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动画实现侧边栏分享的更多相关文章
- 【06-23】js动画学习笔记01
<html> <head> <style> * { margin:0; padding:0; } #div1{ width:200px; height:200px; ...
- 基于jquery的侧边栏分享导航
今天给大家分享一款基于jquery的侧边栏分享导航.这款分享钮一直固定于左侧,鼠标经过的时候凸出显示,这款分享按钮适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲 ...
- 高性能Web动画和渲染原理系列（1）——CSS动画和JS动画
[摘要] 介绍CSS动画和JS动画的基本特点,以及轻量级动画库velocity.js的基本用法. 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园 ...
- js动画--缓冲动画
前面讲述的动画速度都是匀速的,现实生活中的运动速度的变化不一定是恒定的,存在一定的缓冲,就像火车进站一样,速度会越来越慢. 对于改变速度措施,其实只要将动画第一课的程序稍微的改变一下就可以了,我们来看 ...
- css动画与js动画的区别
CSS动画 优点: (1)浏览器可以对动画进行优化. 1. 浏览器使用与 requestAnimationFrame 类似的机制,requestAnimationFrame比起setTimeout ...
- CSS VS JS动画，哪个更快[译]
英文原文:https://davidwalsh.name/css-js-animation 原作者Julian Shapiro是Velocity.js的作者,Velocity.js是一个高效易用的js ...
- JS动画理论
动画(Animation) 动画意味着随着时间而变化,尤其指视觉上的变化,包括位置.形态等的变化.运动基本上表现为物体随时间,发生位置上的变化:形态基本表现为大小.颜色.透明度.形状等随时间的变化. ...
- css与 js动画 优缺点比较
我们经常面临一个抉择:到底使用JavaScript还是CSS动画,下面做一下对比 JS动画 缺点:(1)JavaScript在浏览器的主线程中运行,而主线程中还有其它需要运行的JavaScript脚本 ...
- [学习笔记]js动画实现方法，作用域，闭包
一,js动画基本都是依靠setInterval和setTimeout来实现 1,setInterval是间隔执行,过一段时间执行一次代码 setInterval(function(){},500);即 ...
随机推荐
- wkwebview 代理介绍
iOS 8引入了一个新的框架——WebKit,之后变得好起来了.在WebKit框架中,有WKWebView可以替换UIKit的UIWebView和AppKit的WebView,而且提供了在两个平台可以 ...
- XStream xml to bean
<!-- pom.xml --> <dependency> <groupId>com.thoughtworks.xstream</groupId> &l ...
- IIS6与IIS7中如何设置文件过期
在IIS6中:一. 打开IIS管理器 二. 选中要设置的网站单击属性,打开站点属性菜单 三. 单击HTTP头选项卡 四. 单击 启用内容过期 如:设置30分钟后过期,此时间段后过期项中填30,单位选择 ...
- python简介
python起源 作者Guido van Rossum,荷兰人 在创建python之初,1989年12月份,Guido只是想用编程来打发圣诞的闲暇时光.Guido也希望能有一门语言既能够像C语言那样, ...
- 1.Windows安装PostgreSQL
按照下面的步骤,Windows机器上安装PostgreSQL.请确保已开启第三方防病毒,同时安装. 挑选你想要的PostgreSQL的版本号,可以点击以下链接下载 EnterpriseDB Windo ...
- I2C学习
详细的解释: 读写状态机图
- Asp.net窄屏页面 手机端新闻列表
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SearchNotice.a ...
- PHP define()的用法
define()函数理解1(着重于作用的理解) define() 函数定义一个常量. 常量的特点: 常量类似变量,不同之处在于:在设定以后,常量的值无法更改常量名,不需要开头的美元符号 ($),作用域 ...
- hdu 1556:Color the ball（第二类树状数组 —— 区间更新，点求和）
Color the ball Time Limit: 9000/3000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)To ...
- Vmware 中安装Unix
准备 1. ubuntu 14.10 下载地址: 官网下载链接 http://www.ubuntu.com/download/desktop 官方版本库 http://releases.ubuntu. ...