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);即 ...
随机推荐
- [javascript]获取系统时间函数
var oDate=new Date(); //初始化系统时间函数 alert(oDate.getHours()); //获取时 alert(oDate.getMinutes()); //获取分 al ...
- IOS - 消息推送原理和实现
一.消息推送原理: 在实现消息推送之前先提及几个于推送相关概念,如下图1-1: 1.Provider:就是为指定IOS设备应用程序提供Push的服务器,(如果IOS设备的应用程序是客户端的话,那么Pr ...
- Myeclipse for Mac快捷键
myeclipse for mac 的快捷键汇总 快键键 作用 备注 Command+1 快速修复(自动导包等) 比如与Syso配合,与main配合可快速构造方法签名 Alt+/ 自动补全 Comma ...
- 创建DLL、Lib以及使用DLL、Lib
1.要在生成DLL文件的同时生成Lib文件,函数声明时前面要加__declspec(dllexport). 可在头文件中如下定义: #ifndef __MYDLL_H#define __MYDLL_H ...
- Linux(CentOS)系统下设置nginx开机自启动
Nginx 是一个很强大的高性能Web和反向代理服务器.下面介绍在linux下安装后,如何设置开机自启动.首先,在linux系统的/etc/init.d/目录下创建nginx文件,使用如下命令:vi ...
- hadoop namenode ha--手动切换(转）
1.hadoop的dfs.nameservices如何配置?2.集群配置中hdfs://mycluster的作用是什么?3.如何将namenode2切换为active状态? 在参考本手册前请确保Had ...
- 20145206《Java程序设计》实验二Java面向对象程序设计实验报告
20145206<Java程序设计>实验二Java面向对象程序设计实验报告 实验内容 初步掌握单元测试和TDD 理解并掌握面向对象三要素:封装.继承.多态 初步掌握UML建模 熟悉S.O. ...
- Android5.0如何正确启用isLoggable(二) 理分析
转自:http://www.it165.net/pro/html/201506/43374.html 概要 在上文<Android 5.0 如何正确启用isLoggable(一)__使用详解&g ...
- 6-05使用SQL语句删除数据
删除数据语法: DELETE FROM 表名 WHERE 删除条件. TRUNCATE TABLE 表名. --[1]基本删除,省略WHERE条件,将删除表中的所有数据 DELETE FROM ...
- 【leetcode】Reverse Words in a String
今天第一次在leetcode上提交了一个题目,据说这个网站基本上都是名企面试笔试题,今天无意一进去就看到第一题居然就是昨天的腾讯实习生笔试题,赶紧注册了个账号做题. 题目描述: Given an in ...