為什么我的鼠標(biāo)移入后變透明后沒有再顯示，而是鼠標(biāo)移開后才顯示圖片??？？
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
//display:inline;行內(nèi)塊元素,許多塊級(jí)元素從左往右依次排列
//display:block;塊級(jí)元素，占據(jù)整行
*{
margin:0;
padding:0;
}
? ? #main{
? ? width:692px;
? ? height:500px;
? ? margin:0 auto;
? ? background: #eee;
? ? }
? ? #main a{
? ? display: inline-block;
? ? width: 200px;
? ? height: 190px;
? ? position: relative;
? ? overflow: hidden;
? ? border: 2px solid #ccc;
? ? border-radius: 4px;
? ? margin:10px;
? ? padding:20px 0 5px;
? ? text-align: center;
? ? line-height: 30px;
? ? text-decoration: none;
? ? color:#000;
? ? }
? ? #main a i{
? ? display: inline-block;
? ? position: absolute;
? ? top: 20px;
? ? left: 20px;
? ? opacity: 1;
? ? filter: alpha(opacity=100);
? ? }
? ? #main a p{
? ? display: block;
? ? position: absolute;
? ? top: 160px;
? ? left: 62px;
? ? }
? ? #main a:hover{
? ? color:red;
? ? }
? ??
? ? img{
? ? display: inline-block;
? ? width: 150px;
? ? height: 150px;
? ? }
</style>
<script type="text/javascript">
window.onload=function(){
//<a>的href具有將鼠標(biāo)變點(diǎn)擊手型的功能
? ? ? ? ? ? //鼠標(biāo)事件要使用this傳遞參數(shù)
//使用層層遞進(jìn)，不要一下就訪問到子元素<i>
var oDiv=document.getElementById("main");
var aList=oDiv.getElementsByTagName("a");
for(var i=0;i<aList.length;i++){
aList[i].onmouseover=function(){
var athis=this.getElementsByTagName("i")[0];
startMove(athis,{opacity:0,top:-20},function(){
athis.style.top=40+"px";
startMove(athis,{opacity:100,top:20})
});
};
}
? ? ? ? ? ??
? ?function startMove(obj,json,fn){//fn此處表示一個(gè)函數(shù)，前面執(zhí)行完畢后立刻調(diào)用一個(gè)函數(shù)
? ? ?var flag=true;//假設(shè)所有目標(biāo)值到達(dá)了終點(diǎn)。寬度高度透明度是否達(dá)到了目標(biāo)值
? ? ?clearInterval(obj.timer);
? ? ?obj.timer=setInterval(function(){
? ? ? ?for(var shuxing in json){//遍歷json這個(gè)里面的屬性與目標(biāo)值
? ? ? ? ?var str=0;
? ? ? ?//用if判斷屬性
? ? ? ? ?if(shuxing=='opacity'){
? ? ? ? ? ? ?var str=Math.round(parseFloat(getStyle(obj,shuxing))*100);
? ? ? ? ? ? ? ?//由于opacity的值是小數(shù)，需要用parseFloat轉(zhuǎn)為小數(shù)值，Math.round四舍五入
? ? ? ? ?}else{
? ? ? ? ? ?str=parseInt(getStyle(obj,shuxing));
? ? ? ? ?}
? ? ? ? ?//算速度
? ? ? ? ?var speed=(json[shuxing]-str)/10;//緩沖運(yùn)動(dòng)的設(shè)置
? ? ? ? ?speed=speed>0?Math.ceil(speed):Math.floor(speed);
? ? ? ?//檢測(cè)停止
? ? ? ? ? ?if(str!==json[shuxing]){
? ? ? ? ? ? ?flag=false;//如果不是所有的目標(biāo)值到達(dá)了最終點(diǎn)，則繼續(xù)執(zhí)行
? ? ? ? ? ?//再用if判斷屬性
? ? ? ? ? ? ?if(shuxing=='opacity'){
? ? ? ? ? ? ? ? ?obj.style.opacity=(str+speed)/100;
? ? ? ? ? ? ? ? ?obj.style.filter="alpha(opacity:'+(icur+speed)+')";//兼容IE瀏覽器
? ? ? ? ? ? ?}else{
? ? ? ? ? ? ? ?obj.style[shuxing]=str+speed+'px';
? ? ? ? ? ? ?}
? ? ? ? ? ?}
? ? ? ? ? ?if(flag){
? ? ? ? ? ? ?clearInterval(obj.timer);
? ? ? ? ? ? ?if(fn){//判斷是否還有回調(diào)函數(shù)，如果有，繼續(xù)執(zhí)行
? ? ? ? ? ? ? ?fn();
? ? ? ? ? ? ?}
? ? ? ? ? ?}
? ? ? ? ?}
? ? ? ?},30)//每隔30毫秒移動(dòng)
? ?}
}
function getStyle(obj,style){//obj.stlye.width獲取的是樣式值與obj.offsetWidth
? ? ? if(obj.currentStyle){
? ? ? ? ?return obj.currentStyle[style];//IE瀏覽器
? ? ? }else{
? ? ? ? ?return getComputedStyle(obj,false)[style];//火狐等瀏覽器
? ? }
}
</script>
</head>
<body>
? <div id="main">
? <a href="#"><i><img src="../img/liu1.jpeg"></i><p>劉詩(shī)詩(shī)1</p></a>
? <a href="#"><i><img src="../img/liu2.jpg"></i><p>劉詩(shī)詩(shī)2</p></a>
? <a href="#"><i><img src="../img/liu3.jpg"></i><p>劉詩(shī)詩(shī)3</p></a>
? <a href="#"><i><img src="../img/liu4.jpg"></i><p>劉詩(shī)詩(shī)4</p></a>
? <a href="#"><i><img src="../img/liu5.jpg"></i><p>劉詩(shī)詩(shī)5</p></a>
? <a href="#"><i><img src="../img/liu6.jpg"></i><p>劉詩(shī)詩(shī)6</p></a>
? </div>
</body>
</html>
2016-09-15
詳解請(qǐng)看下面
http://idcbgp.cn/qadetail/167004
2016-09-15
將?var flag=true;?
放到計(jì)時(shí)器obj.timer=setInterval(function(){ ? 里面 就可以解決了