完美運(yùn)動(dòng)框架實(shí)現(xiàn)JS運(yùn)動(dòng)
<!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運(yùn)動(dòng)框架
//獲取屬性
function getStyle(obj, name) {
if(obj.currentStyle) {
return obj.currentStyle[name];
} else {
return getComputedStyle(obj, true)[name];
}
}
//obj表示運(yùn)動(dòng)的物體,json運(yùn)動(dòng)的屬性,fnEnd鏈?zhǔn)竭\(yùn)動(dòng)的函數(shù)
function starMove(obj, json, fnEnd) {
//移除定時(shí)器
clearInterval(obj.timer);
obj.timer = setInterval(function() {
//假定所有運(yùn)動(dòng)的屬性都結(jié)束
var bStop = true;
//遍歷需要同時(shí)運(yùn)動(dòng)的屬性
for(var attr in json) {
//獲得運(yùn)動(dòng)屬性的當(dāng)前運(yùn)動(dòng)值
var cur = 0;
if(attr == 'opacity') {
cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
} else {
cur = parseInt(getStyle(obj, attr));
}
//計(jì)算速度
var speed = (json[attr] - cur) / 6;
//速度需要取整
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
//判斷如果有屬性沒有結(jié)束,則為false
if(cur != json[attr]) bStop = false;
//開始運(yùn)動(dòng)增減
if(attr == 'opacity') {
obj.style.filter = 'alpha(opacity:' + cur + speed + ');'
obj.style.opacity = (cur + speed) / 100;
} else {
obj.style[attr] = cur + speed + 'px';
}
}
//最后運(yùn)動(dòng)結(jié)束
if(bStop == true) {
//關(guān)閉定時(shí)器
clearInterval(obj.timer);
//執(zhí)行鏈?zhǔn)胶瘮?shù)
if(fnEnd) fnEnd();
}
}, 30)
}
運(yùn)動(dòng)框架實(shí)現(xiàn)的兩個(gè)小例子
JS幻燈片實(shí)現(xiàn)
<!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幻燈片練習(xí)</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();
}
}
//點(diǎn)擊之后的操作
function tab() {
for(var i = 0; i < aBtn.length; i++) {
aBtn[i].className = '';
}
aBtn[now].className = 'actived';
move(oUL, {
top: -360 * now
});
}
//每次循環(huán)之后的操作
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>êêó??ˉàà?÷￡oIE8?￠360?￠FireFox?￠Chrome?￠Safari?￠Opera?￠°áó??￠??1·?￠êà????′°. </p>
<p>à′?′￡o
<a target="_blank">??3¤??2?</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;
}
發(fā)布信息簡(jiǎn)單實(shí)現(xiàn)
<!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="發(fā)布" />
<ul id="ul1">
<li>ajfiaejof</li>
</ul>
</body>
</html>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
