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 ...
随机推荐
- 设置PATH 环境变量、pyw格式、命令行运行python程序与多重剪贴板
pyw格式简介: 与py类似,我认为他们俩卫衣的不同就是前者运行时候不显示终端窗口,后者显示 命令行运行python程序: 在我学习python的过程中我通常使用IDLE来运行程序,这一步骤太过繁琐( ...
- java中new一个对象的执行过程及类的加载顺序
1,new一个对象时代码的执行顺序 (1)加载父类(以下序号相同,表明初始化是按代码从上到下的顺序来的) 1.为父类的静态属性分配空间并赋于初值 1.执行父类静态初始化块; (2)加载子类 2.为子类 ...
- 新建Eclipse工作空间，复制原有的配置(转)
方法一: File->Switch workspace->Other...,按下图选择 只复制简单的配置,如cvs之类的信息是不会复制的. 方法二: 在方法一的基础上做如下操作 将新建的w ...
- jquery weui ajax滚动加载更多
手机端使用jquery weui制作ajax滚动加载更多. 演示地址:http://wx.cnkfk.com/nuol/static/fpage.html 代码: <!DOCTYPE html& ...
- HDU Train Problem I （STL_栈）
Problem Description As the new term comes, the Ignatius Train Station is very busy nowadays. A lot o ...
- sqlplus登录提示：ORA-12162：TNS:net service name is incorrectly specified错误
[root@localhost ~]# su - oracle [oracle@localhost ~]$ sqlplus '/as sysdba' SQL*Plus: Release 11.2.0. ...
- 创建一个web user control
1.创建文件 添加,然后选择web user control 2.添加控件 在工具栏搜索button,然后拖动三个button上去 <%@ Control Language="C#&q ...
- nyoj--37--回文字符串（动态规划）
回文字符串 时间限制:3000 ms | 内存限制:65535 KB 难度:4 描述 所谓回文字符串,就是一个字符串,从左到右读和从右到左读是完全一样的,比如"aba".当然, ...
- linux怎么开启telnet服务
1>编辑telent的配置文件/etc/xinetd.d/telnet 如下: (设置disable = no,也就是开启telnet服务) service telnet { disable = ...
- NOIP 2012 T2 国王游戏 （贪心+高精）
思路: 呃呃网上那么多题解写得都不错-.. 就是高精 巨坑... 这里展出的是任氏高精(纯自己yy滴) //By SiriusRen #include <cstdio> #include ...