js 动画1
div速度 运动：
代码例如以下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>速度 运动</title>
<style>
body{paddiing:0;margin:0}
#div1{width:200px; height:200px;background-color:red; position:relative;left:-200px; top:0;}
#div1 span{width:20px;height:50px; background-color:blue;position:absolute; left:200px; top:75px}
</style>
<script> window.onload = function(){
var oDiv = document.getElementById('div1');
oDiv.onmouseout = function(){
startMove(-200);
}
oDiv.onmouseover = function(){
startMove(0);
}
}
var timer = null;
function startMove(seat){
clearInterval(timer);
var oDiv = document.getElementById('div1');
timer = setInterval(function(){
if(oDiv.offsetLeft > seat){
speed = -10;
}
else{
speed = 10;
}
if(oDiv.offsetLeft == seat){
clearInterval(timer)
}
else{
oDiv.style.left = oDiv.offsetLeft + speed +'px';
}
},30) }
</script>
</head> <body>
<div id="div1"><span id="share">分享</span></div>
</body>
</html>
透明度运动：
代码例如以下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>透明度运动</title>
<style>
body{
padding:0;
margin:0
}
#div1{
width:200px;
height:200px;
background:red;
filter:alpha(opacity:30);
opacity:0.3;
}
</style>
<script> window.onload = function(){
var oDiv = document.getElementById('div1');
oDiv.onmouseover = function(){
startMove(100);
}
oDiv.onmouseout = function(){
startMove(30);
}
}
var timer = null;
var alpha = 30;
function startMove(seat){
clearInterval(timer);
var oDiv = document.getElementById('div1');
timer = setInterval(function(){
if(alpha > seat){
speed = -10;
}
else{
speed = 10;
}
if(alpha == seat){
clearInterval(timer);
}
else{
alpha += speed;
oDiv.style.filter = 'alpha(opacity:'+alpha+')';
oDiv.style.opacity = alpha/100;
}
},30)
} </script>
</head> <body>
<div id="div1"></div>
</body>
</html>
js 动画1的更多相关文章
- 【06-23】js动画学习笔记01
<html> <head> <style> * { margin:0; padding:0; } #div1{ width:200px; height:200px; ...
- 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);即 ...
- css3动画与js动画的一些理解
http://zencode.in/19.CSS-vs-JS%E5%8A%A8%E7%94%BB%EF%BC%9A%E8%B0%81%E6%9B%B4%E5%BF%AB%EF%BC%9F.html 首 ...
- js动画（四）
终于到了最后了,这里要告一段落了,整了个js运动框架,咳咳咳,好冷 啊啊啊啊啊啊,这天气.妈的,工资怎么也不发,啊,说好的 人与人之间的信任呢?哎,气诶,不到150字啊,又是这个梗..怎么办?说些什么 ...
- css动画特效与js动画特效（一）------2017-03-24
1.用css做动画效果: 放鼠标才会发生 利用hover <head> <style> #aa{ background-color: red; width: 100px; he ...
- JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能
摘要: 理解浏览器渲染. 原文:JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 这是专门探索 J ...
随机推荐
- com.jasson.im.api.APIClient jar包 下载
包名:ImApi2.3.jar 链接: https://pan.baidu.com/s/1SgeufcaH6y_K-AJEKDZDtw 提取码: 3v78 复制这段内容后打开百度网盘手机App,操作更 ...
- .conf、.bak是什么格式
1..conf 是config的简写,也就是配置文件,多用于存取硬件驱动程序的安装配置信息.内容一般是一些硬件的版本号呀,支持什么样的系统等信息.本质上来说就是TXT文件,里面的格式没有统一标准,各个 ...
- 【【henuacm2016级暑期训练】动态规划专题 J】Red-Green Towers
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 显然最多1000行的样子. 从上到小做dp 设f[i][j]为前i行,使用了j个红色方块的方案数. f[1][r] = 1;如果r& ...
- Mysql学习总结（34）——Mysql 彻底解决中文乱码的问题
mysql 中常常出现对中文支持不友好的情况 常见的错误 "Illegal mix of collations for operation" 下面我们规整一下 mysql 数据库中 ...
- angular-事件
ng-click事件 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 <div ng-app="myApp ...
- HDU 2865
和上题一样,但K较大,不能直接用矩阵来写.这个矩阵必定是这个形式的. 0 1 1 1 1 0 1 1 1 1 0 1 1 1 1 0 分成对角线上元素B与非对角线上元素A k: 1 2 3 4 ... ...
- NOIP2017提高组模拟赛 7（总结）
NOIP2017提高组模拟赛 7(总结) 第一题 斯诺克 考虑这样一个斯诺克球台,它只有四个袋口,分别在四个角上(如下图所示).我们把所有桌子边界上的整数点作为击球点(除了4个袋口),在每个击球点我们 ...
- apiCloud中Frame框的操作，显示与隐藏Frame
Frame是一层一层的概念, 有的位于上层,有的位于下层. 1.加载菜单 2.加载页面层 3.首页拆分出内容层,这个时候内容层位于页面层的上方,当点击其他页面的时候,内容层遮挡住了他们 解决方案一 判 ...
- ubuntu 搜狗输入法的安装
本文主要解决的是,通过安装搜狗网站提供的*.deb安装文件,使用ctrl+shift/space无法切换搜狗输入法的问题. 搜狗输入法 for linux:搜狗输入法 for linux,这还不算完: ...
- PyCharm基本设置、常用快捷键
1. 下载安装 PyCharm官方下载地址: https://www.jetbrains.com/pycharm/download/index.html#section=windows 安装完成后在 ...