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的更多相关文章

  1. 【06-23】js动画学习笔记01

    <html> <head> <style> * { margin:0; padding:0; } #div1{ width:200px; height:200px; ...

  2. css动画与js动画的区别

    CSS动画 优点: (1)浏览器可以对动画进行优化.   1. 浏览器使用与 requestAnimationFrame 类似的机制,requestAnimationFrame比起setTimeout ...

  3. CSS VS JS动画，哪个更快[译]

    英文原文:https://davidwalsh.name/css-js-animation 原作者Julian Shapiro是Velocity.js的作者,Velocity.js是一个高效易用的js ...

  4. JS动画理论

    动画(Animation) 动画意味着随着时间而变化,尤其指视觉上的变化,包括位置.形态等的变化.运动基本上表现为物体随时间,发生位置上的变化:形态基本表现为大小.颜色.透明度.形状等随时间的变化. ...

  5. css与 js动画 优缺点比较

    我们经常面临一个抉择:到底使用JavaScript还是CSS动画,下面做一下对比 JS动画 缺点:(1)JavaScript在浏览器的主线程中运行,而主线程中还有其它需要运行的JavaScript脚本 ...

  6. [学习笔记]js动画实现方法，作用域，闭包

    一,js动画基本都是依靠setInterval和setTimeout来实现 1,setInterval是间隔执行,过一段时间执行一次代码 setInterval(function(){},500);即 ...

  7. 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 首 ...

  8. js动画（四）

    终于到了最后了,这里要告一段落了,整了个js运动框架,咳咳咳,好冷 啊啊啊啊啊啊,这天气.妈的,工资怎么也不发,啊,说好的 人与人之间的信任呢?哎,气诶,不到150字啊,又是这个梗..怎么办?说些什么 ...

  9. css动画特效与js动画特效（一）------2017-03-24

    1.用css做动画效果: 放鼠标才会发生 利用hover <head> <style> #aa{ background-color: red; width: 100px; he ...

  10. JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能

    摘要: 理解浏览器渲染. 原文:JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 这是专门探索 J ...

随机推荐

  1. 归档 SCP SFTP RSYNC（数据同步）

    tar 选项  目标文件  源文件(1 2 3) tar cf **.tar file1 file2 file3 (默认情况下 cf选项只有归档没有压缩) tar xf 从归档中提取 创建tar的存档 ...

  2. [luogu] P4364 [九省联考2018]IIIDX（贪心）

    P4364 [九省联考2018]IIIDX 题目背景 Osu 听过没?那是Konano 最喜欢的一款音乐游戏,而他的梦想就是有一天自己也能做个独特酷炫的音乐游戏.现在,他在世界知名游戏公司KONMAI ...

  3. SQL在线学习网站

    1.在线编写网页:http://sqlfiddle.com/ 2.SQL菜鸟教程:http://www.runoob.com/sql/sql-intro.html 3.SQL语句在线练习 http:/ ...

  4. 解决ORA-28002: 密码7天之后过期办法

    https://www.douban.com/group/topic/46177516/ https://yq.aliyun.com/ziliao/42484 http://blog.csdn.net ...

  5. jquery-常用插件集合

    001.弹出消息插件toastr https://github.com/CodeSeven/toastr 002.弹出页面全屏插件 https://github.com/sindresorhus/sc ...

  6. 【转】工具系列：IntelliJ IDEA (Mac) 运行速度优化

    转自工具系列:IntelliJ IDEA (Mac) 运行速度优化 感谢该作者解决了我使用idea debug很慢的问题 背景 IDEA 下运行程序,经常假死 5 s,作为 Mac 怎么能允许暂停 5 ...

  7. 用​M​y​E​c​l​i​p​s​e​ ​打​包​J​A​R文件

    用​M​y​E​c​l​i​p​s​e​ ​将自己定义标签打​成​J​A​R​包 1.新建一个javaproject 2.将标签有关的java代码拷贝到新建javaproject的一个包中,这时会报错 ...

  8. 使用Modernizr检测支持CSS3

    使用Modernizr检测支持CSS3 如果支持某个属性,会增加一个class,名字就是该属性: 不支持,名字是no-某属性 还提供了一个全局Modernizr对象,使用如下: <script ...

  9. &quot;singleTask&quot;模式 切换到新的栈中

    本文截取了网络资源的结论部分 对singletask 启动模式做笔记记录. 尽管SubActivity的launchMode被设置为"singleTask"模式,可是它并不像官方文 ...

  10. 三个获取浏览器URL中参数值的方法

    这三个是一般的获取浏览器传的参数值的方法,之前有用unescape()解码的方法,但是遇到汉字会产生乱码,所以用decodeURI(); 方法一: function getQueryString(na ...