js 运动框架及实例
<!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>
<title>运动框架</title>
<script src="move.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById("div1");
var oBtn = document.getElementById("btn1"); oBtn.onclick = function(){
move(oDiv,'right',300); //可使
//move(oDiv,'left',300); //可使
//move(oDiv,'top',300); //可使
//move(oDiv,'width',300); //可使
//move(oDiv,'height',300); //可使
} oDiv.onmouseover = function(){
move(oDiv,'opacity',100);
} oDiv.onmouseout = function(){
move(oDiv,'opacity',30);
} }
</script>
</head>
<body>
<input type="button" id="btn1" value="运动" />
<div id="div1" style="width:200px;height:200px;position:absolute;background:red;filter:alpha(opacity=30);opacity:0.3;">
</div>
</body>
</html>
js:
//height,left , top ,right ,opacity
var timer = null
function move(obj,attr,target)
{
//开启定时器
timer = setInterval(function(){
var current = 0;
if(attr=="opacity")
{
current = Math.round(parseFloat(getStyle(obj,attr))*100);
}
else
{
current = parseInt(getStyle(obj,attr));
} var speed = target>current ? 6 :-6; if(Math.abs(current-target)<6)
{
//清除定时器
clearInterval(timer);
}
else
{
if(attr=="opacity")
{
obj.style.filter = "alpha(opacity:"+(current + speed) +")";
obj.style.opacity = (current + speed) /100; }
else
{
obj.style[attr] = current + speed +"px";
}
} },30); } function getStyle(obj,attr)
{
if(obj.currentStyle) //用于IE
{
return obj.currentStyle[attr];
}
else
{
//document.defaultView.getComputedStyle 该方法时DOM2中才出现的方法
return document.defaultView.getComputedStyle(obj, null)[attr];
//getComputedStyle DOM1中的方法
//return getComputedStyle(obj,false)[attr];
}
}
js 运动框架及实例的更多相关文章
- 带无缝滚动的轮播图(含JS运动框架)
今天学习了一下轮播图的写作,想到前一阵学过的无缝滚动得思想,所以就把轮播与滚动结合了一下.不过我的代码的神逻辑我自己都不敢恭维,在没网没参照的情况下,只能硬着头皮往下写,希望跟大家共勉吧. js运动框 ...
- js运动框架之一条乱跑的虫子
克隆与运动框架的联合应用 效果:点击元素块后,元素块开始随机的向任何方向移动,并附带一堆颜色随机的"尾巴".每个方向运动3秒后改变方向,同时笑脸变哭脸. 如图所示: 朝某个方向运动 ...
- js运动框架逐渐递进版
运动,其实就是在一段时间内改变left.right.width.height.opactiy的值,到达目的地之后停止. 现在按照以下步骤来进行我们的运动框架的封装: 匀速运动. 缓冲运动. 多物体运动 ...
- js运动框架之掉落的扑克牌(重心、弹起效果)
玩过电脑自带纸牌游戏的同志们应该都知道,游戏过关后扑克牌会依次从上空掉落,落下后又弹起,直至"滚出"屏幕. 效果如图: 这个案例的具体效果就是:点击开始运动,纸牌会从右上角掉 ...
- js运动框架完成块的宽高透明度及颜色的渐变
了解了运动框架完成块元素的宽高和透明度的变化的原理,我想着写一个颜色的变化来练习一下,不想写了很长时间才写出来,跟各位分享一下. 颜色的变化是通过三元素渐变的方式完成的,通过构造json,使当前的颜色 ...
- js运动框架 step by step
开启setInterval定时器之前,请先清除之前的定时器 window.onload = function() { var btn = document.getElementById('btn'); ...
- JS运动框架的封装过程(一)
给大家出一道题,从起点A走到目的地B,一共用了1000毫秒,每一次是30毫秒,请问你在这里面得到了哪些信息? 信息有哪些呢? 第一个,总时长是:1000毫秒 第二个,多久时间走一次?30毫秒 第三个, ...
- 完美的js运动框架
//完美运动框架, 对象,json,函数function move(obj,json,funEnd){clearInterval(obj.timer);//清除定时器obj.timer= setInt ...
- js 运动框架-轻量级
具体代码如下: function move(obj,json,sv,fnEnd){ //CSS样式值 function getStyle(obj,attr){ if(obj.currentStyle) ...
随机推荐
- Java之JSON操作(Jackson)
Java to JSON: package json.jackson; import bean.User; import com.fasterxml.jackson.databind.ObjectMa ...
- pgm16
前面结束了关于 learning 部分一些粗浅的讨论,我们大概明白了一些 learning 中 common sense/techniques.剩下的部分我们分为 causality 和 utilit ...
- Java 8 forEach简单例子(转载)
forEach and Map 1.1 通常这样遍历一个Map Map<String, Integer> items = new HashMap<>(); items.put( ...
- python 和 scikit-learn 实现垃圾邮件过滤
文本挖掘(Text Mining,从文字中获取信息)是一个比较宽泛的概念,这一技术在如今每天都有海量文本数据生成的时代越来越受到关注.目前,在机器学习模型的帮助下,包括情绪分析,文件分类,话题分类,文 ...
- Android 第三课 构建简单的用户界面
构建简单的用户界面 上一课下一课 该课程教你 创建线性布局 添加文本框 添加字符串资源 添加按钮 使输入框宽度充满整个屏幕 你也应该阅读 布局 Android的图形用户界面通过 View 和 View ...
- [hgoi#2019/2/16t2]friend
题目描述 在一个遥远的国度里有n个人,每个人手上写着4个互不相同的数. 这个国度比较奇怪,如果两个人至少有一个数字相同,则他们是一对朋友. 现在这n个人按序号从左到右排成了一排,每个人都想知道在他左边 ...
- shell(2)-&& 与 || 逻辑或与非
test 命令测试 -常见的测试类型–测试文件状态–字符串比较–整数值比较–逻辑测试&& 如果是“前面”(真),则“后面”[ -f /var/run/dhcpd.pid ] & ...
- oracle存储过程递归调用
oracle存储过程递归调用,如果where子句使用的是传入的参数, 在以后的递归调用中参数就是第一次调用的参数值,解决办法是定义变量,使用自定义的变量问题可以解决.
- JavaScript -- throw、try 和 catch
try 语句测试代码块的错误. catch 语句处理错误. throw 语句创建自定义错误. 很想java哦. <!DOCTYPE html> <html> <head& ...
- A1033. To Fill or Not to Fill
With highways available, driving a car from Hangzhou to any other city is easy. But since the tank c ...