能吧代碼發(fā)上來(lái)么；沒(méi)代碼看
發(fā)代碼.......thanks
空空本書(shū)
2014-11-19
2 回答
舉報(bào)
0/150
提交
取消
2016-01-02
<!DOCTYPE html>
<html lang="en">
<head>
? ?<meta charset="UTF-8">
? ?<title></title>
? ?<style>
*{
? ? ? ? ? ?margin: 0;
padding: 0;
}
? ? ? ?ul li{
? ? ? ? ? ?width: 200px;
height: 100px;
background: lawngreen;
margin-bottom: 20px;
border: 4px solid brown;
filter: alpha(opacity:30);
opacity: 0.3;
}
? ?</style>
? ?<script src="index.js"></script>
? ?<script>
window.onload=function(){
? ? ? ? ? ?var oLi=document.getElementById('li1');
oLi.onmouseover=function(){
? ? ? ? ? ? ? ?startMove(oLi,{width:201,height:200,opacity:100});
}
? ? ? ? ? ?oLi.onmouseout=function(){
? ? ? ? ? ? ? ?startMove(oLi,{width:200,height:100,opacity:30});
}
? ? ? ?}
? ?</script>
</head>
<body>
<ul>
? ?<li id="li1"></li>
</ul>
</body>
</html>
2016-01-02
/**
* Created by HL on 2016/1/2.
*/
function getStyle(obj, attr) {
? ?if (obj.currentStyle) {
? ? ? ?return obj.currentStyle[attr];
? ?} else {
? ? ? ?return getComputedStyle(obj, false)[attr];
? ?}
}
function startMove(obj, json, fn) {
? ?var flag = true;
? ?clearInterval(obj.timer);
? ?obj.timer = setInterval(function () {
? ? ? ?for (var attr in json) {
? ? ? ? ? ?//1、獲取當(dāng)前值
? ? ? ? ? ?var icur = 0;
? ? ? ? ? ?if (attr == 'opacity') {
? ? ? ? ? ? ? ?icur = Math.round(parseFloat(getStyle(obj, attr)) * 100.0);//四舍五入
? ? ? ? ? ?} else {
? ? ? ? ? ? ? ?icur = parseInt(getStyle(obj, attr));
? ? ? ? ? ?}
? ? ? ? ? ?//2、計(jì)算速度
? ? ? ? ? ?var speed = (json[attr] - icur) / 8;
? ? ? ? ? ?speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
? ? ? ? ? ?//3、檢測(cè)停止
? ? ? ? ? ?if (icur != json[attr]) {
? ? ? ? ? ? ? ?flag = false;
? ? ? ? ? ?}
? ? ? ? ? ?if (attr == 'opacity') {
? ? ? ? ? ? ? ?obj.style.filter = 'alpha(opacity:' + (icur + speed) + ')';
? ? ? ? ? ? ? ?obj.style.opacity = (icur + speed) / 100.0;
? ? ? ? ? ?} else {
? ? ? ? ? ? ? ?obj.style[attr] = icur + speed + 'px';
? ? ? ? ? ?}
? ? ? ? ? ?if(flag){
? ? ? ? ? ? ? ?clearInterval(obj.timer);
? ? ? ? ? ? ? ?if(fn){
? ? ? ? ? ? ? ? ? ?fn();
? ? ? ? ? ? ? ?}
? ? ? ? ? ?}
? ? ? ?}
? ?}, 30);
}