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);即 ...
随机推荐
- LeetCode 441 Arranging Coins
Problem: You have a total of n coins that you want to form in a staircase shape, where every k-th ro ...
- 由浅入深剖析.htaccess
转自:http://blog.csdn.net/21aspnet/article/details/6908025 [-] htaccess文件使用前提 htaccess基本语法介绍 现学现用学习正则表 ...
- Linear regression with one variable算法实例讲解（绘制图像，cost_Function ,Gradient Desent, 拟合曲线, 轮廓图绘制）_矩阵操作
%测试数据 'ex1data1.txt', 第一列为 population of City in 10,000s, 第二列为 Profit in $10,000s 1 6.1101,17.592 5. ...
- 利用 Rational ClearCase ClearMake 构建高性能的企业级构建环境
转载地址:http://www.ibm.com/developerworks/cn/rational/r-cn-clearmakebuild/ 构建管理是 IBM® Rational® ClearCa ...
- 数据存储--sqlite总结
SQLite SQLite(轻量级的数据库,关系型数据库) 辅助工具:Navicat Premium 等 原理:ios针对存储问题封装了sqlite数据库(c语言数据库). 1 app获取沙盒地址命名 ...
- Javaweb---Servlet过滤器
Servlet过滤器从字面上的字意理解为景观一层次的过滤处理才达到使用的要求,而其实Servlet过滤器就是服务器与客户端请求与响应的中间层组件,在实际项目开发中Servlet过滤器主要用于对浏览器的 ...
- Loadrunner中Throughput（吞吐量）的分析与计算
Throughput翻译为吞吐量,按照常规理解网络吞吐量表示在单位时间内通过网卡数据量之和,其中即包括本机网卡发送出去的数据量也包括本机网卡接收到的数据量,但这个理解在Loadrunner记录的Thr ...
- .net学习笔记---xml基础知识
一.XML简介 XML是一种标记语言,用于描述数据,它提供一种标准化的方式来来表示文本数据.XML文档以.xml为后缀.需要彻底注意的是XML是区分大小写的. 先从一个简单的XML例子来了解下xml基 ...
- SQL SERVER 统计信息概述(Statistics)
前言 查询优化器使用统计信息来创建可提高查询性能的查询计划,对于大多数查询,查询优化器已经为高质量查询计划生成必要的统计信息,但是在少数情况下,您需要创建附加的统计信息或者修改查询设计以得到最佳结果. ...
- android 入门-防微信拍摄视频 按钮事件处理
package com.cc.view; import com.cc.R; import com.cc.R.layout; import com.cc.R.menu; import android.o ...