完美运动框架实现JS运动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div1 {
width: 200px;
height: 200px;
background: red;
opacity: 0.3;
alpha(opacity: 30);
}
</style>
<script type="text/javascript" src="move.js"></script>
<script>
window.onload = function() {
var oDiv = document.getElementById('div1');
oDiv.onmouseover = function() {
starMove(oDiv, {
width: 500,
height: 500,
opacity: 100
}, function() {
alert('abc');
});
};
};
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
move.js运动框架
//获取属性
function getStyle(obj, name) {
if(obj.currentStyle) {
return obj.currentStyle[name];
} else {
return getComputedStyle(obj, true)[name];
}
}
//obj表示运动的物体,json运动的属性,fnEnd链式运动的函数
function starMove(obj, json, fnEnd) {
//移除定时器
clearInterval(obj.timer);
obj.timer = setInterval(function() {
//假定所有运动的属性都结束
var bStop = true;
//遍历需要同时运动的属性
for(var attr in json) {
//获得运动属性的当前运动值
var cur = 0;
if(attr == 'opacity') {
cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
} else {
cur = parseInt(getStyle(obj, attr));
}
//计算速度
var speed = (json[attr] - cur) / 6;
//速度需要取整
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
//判断如果有属性没有结束,则为false
if(cur != json[attr]) bStop = false;
//开始运动增减
if(attr == 'opacity') {
obj.style.filter = 'alpha(opacity:' + cur + speed + ');'
obj.style.opacity = (cur + speed) / 100;
} else {
obj.style[attr] = cur + speed + 'px';
}
}
//最后运动结束
if(bStop == true) {
//关闭定时器
clearInterval(obj.timer);
//执行链式函数
if(fnEnd) fnEnd();
}
}, 30)
}
运动框架实现的两个小例子
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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS幻灯片练习</title>
<link href="css/css.css" rel="stylesheet" type="text/css" />
<script src="js/move.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload = function() {
var oDiv = document.getElementById('div1 ');
var aBtn = document.getElementsByTagName('ol')[0].getElementsByTagName('li');
var oUL = document.getElementsByTagName('ul')[0];
var now = 0;
for(var i = 0; i < aBtn.length; i++) {
aBtn[i].index = i;
aBtn[i].onclick = function() {
now = this.index;
tab();
}
}
//点击之后的操作
function tab() {
for(var i = 0; i < aBtn.length; i++) {
aBtn[i].className = '';
}
aBtn[now].className = 'actived';
move(oUL, {
top: -360 * now
});
}
//每次循环之后的操作
function next() {
now++;
if(now == aBtn.length) {
now = 0;
}
tab();
}
var timer = setInterval(next, 5000);
oDiv.onmouseover = function() {
clearInterval(timer);
};
oDiv.onmouseout = function() {
timer = setInterval(next, 5000)
}
}
</script>
</head>
<body style="background:#aaa;">
<div id="div1">
<ol>
<li class="actived">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>ÊÊÓÃä¯ÀÀÆ÷£ºIE8¡¢360¡¢FireFox¡¢Chrome¡¢Safari¡¢Opera¡¢°ÁÓΡ¢Ëѹ·¡¢ÊÀ½çÖ®´°. </p>
<p>À´Ô´£º
<a href="http://sc.chinaz.com/" target="_blank">Õ¾³¤ËزÄ</a>
</p>
</div>
</body>
</html>
css代码
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
#div1 {
width: 750px;
height: 360px;
overflow: hidden;
margin: 50px auto;
position: relative;
}
#div1 ol {
position: absolute;
right: 5px;
bottom: 5px;
height: 25px;
z-index: 999;
}
#div1 ol li {
float: left;
width: 20px;
height: 20px;
text-align: center;
border: 1px solid #f47400;
margin: 2px;
cursor: pointer;
color: #f47400;
background: #fbf2d1;
margin-top: 2px;
}
#div1 ol li.actived {
background: #ffb542;
font-weight: bold;
color: #FFF;
width: 22px;
height: 22px;
margin-top: 0;
}
#div1 ul {
position: absolute;
left: 0;
top: 0;
}
#div1 ul li {
width: 750px;
height: 360px;
float: left;
}
#div1 ul li img {
width: 750px;
height: 360px;
float: left;
}
发布信息简单实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{margin: 0; padding: 0;}
#ul1{
width: 400px;
height: 400px;
border: 1px solid black;
margin: 10px auto;
overflow: hidden;
}
#ul1 li{
border-bottom: 1px #999 dashed;
padding: 4px;
list-style: none;
overflow: hidden;
filter: alpha(opacity:0);
opacity: 0;
}
</style>
<script type="text/javascript" src="js/move.js" ></script>
<script>
window.onload = function(){
var oBtn = document.getElementById('btn1');
var oUl = document.getElementById('ul1');
var oTxt = document.getElementById('txt1');
oBtn.onclick = function(){
var oLi = document.createElement('li');
oLi.innerHTML =oTxt.value;
if(oUl.children.length>0)
{
oUl.insertBefore(oLi,oUl.children[0]);
}else
{
oUl.appendChild(oLi);
}
var iHeight = oLi.offsetHeight;
oLi.style.height =0;
starMove(oLi,{height:iHeight},function(){
starMove(oLi,{opacity:100});
});
}
}
</script>
</head>
<body>
<textarea id="txt1" rows="4" cols="40"></textarea>
<input id="btn1" type="button" value="发布" />
<ul id="ul1">
<li>ajfiaejof</li>
</ul>
</body>
</html>
