87,910
社区成员
发帖
与我相关
我的任务
分享鼠标移入第一个图片，然后快速移动第二个图片，为什么会抖了一下，肿么解决？？
http://jsbin.com/oleyac/2/edithttp://jsbin.com/oleyac/2/edit
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>131游戏之家</title>
<style>
body{
margin:0;
padding:0;
font:12px/24px "microsoft yahei";
}
h1,h2,h3,h4,h5,h6{
padding: 0;
margin:0;
}
ul,li{
padding:0;
margin:0;
list-style:none;
}
img{border:none}
.channel{
float:left;
margin-bottom:10px;
width:1000px;
}
.channel .title{
border-bottom:3px solid #2497d7;
color:#2497d7;
width:100%;
}
.topImg{
padding:0;
position:relative;
width:980px;
overflow:hidden;
z-index:1;
}
.topImg ul{
overflow: hidden;
position:relative;
z-index:1;
}
.topImg li{
display:inline;
float: left;
margin-right:8px;
width:180px;
height:300px;
border:5px solid #0f1d2b;
overflow:hidden;
position:static;
}
.topImg li.last{
margin-right:0;
}
a.hg{
display:block;
position:absolute;
left:0;
top:0;
z-index: 2;
width:0;
height:310px;
overflow:hidden;
}
div.hg{
width:190px;
height:320px;
position:absolute;
overflow:hidden;
background:#fff;
left:0;
top:-320px;
z-index:3;
}
</style>
</head>
<body>
<div class="channel">
<div class="title"><h2>今日重点</h2></div>
<div class="topImg">
<ul id="ul1">
<li>
<a href=""><img src="http://res.files.131.com/channel/131com_2013/images/index02.jpg"></a>
<div class="hg">
<h3>腾讯光速工作室精心研发的Q版iOS手游《斗三国》，是一款SLG&RPG类的移动终端网络游戏。</h3>
<p>腾讯光速工作室精心研发的Q版iOS手游《斗三国》，是一款SLG&RPG类的移动终端网络游戏。游戏以三国题材为背景，打造出数百人军团实时冲锋对阵的战场核心玩法，为玩家带来流畅、激烈、爽快的触摸战斗新体验。</p>
</div>
</li>
<li>
<a href=""><img src="http://res.files.131.com/channel/131com_2013/images/index02.jpg"></a>
<a href="" class="hg"><img src="http://res.files.131.com/channel/131com_2013/images/c15.jpg"></a>
</li>
<li>
<a href=""><img src="http://res.files.131.com/channel/131com_2013/images/index02.jpg"></a>
<div class="hg">
<h3>腾讯光速工作室精心研发的Q版iOS手游《斗三国》，是一款SLG&RPG类的移动终端网络游戏。</h3>
<p>腾讯光速工作室精心研发的Q版iOS手游《斗三国》，是一款SLG&RPG类的移动终端网络游戏。游戏以三国题材为背景，打造出数百人军团实时冲锋对阵的战场核心玩法，为玩家带来流畅、激烈、爽快的触摸战斗新体验。</p>
</div>
</li>
<li>
<a href=""><img src="http://res.files.131.com/channel/131com_2013/images/index02.jpg"></a>
<a href="" class="hg"><img src="http://res.files.131.com/channel/131com_2013/images/c15.jpg"></a>
</li>
</ul>
</div>
</div>
<script type="text/javascript">
window.onload=function(){
var aUl=document.getElementById('ul1');
var aLi=aUl.getElementsByTagName('li');
var hg=getByClass(aUl,'hg');
var oneHeight=aLi[0].offsetHeight+10;
var oneWidth=hg[0].offsetHeight;
var i=0;
var iNow=0;
var timer=null;
for(i=0; i<aLi.length;i++){
aLi[i].aMove=null;
aLi[i].timer=null;
aLi[i].aOff=true;
aLi[i].index=i;
hg[i].style.width='auto';
aLi[i].bTarge=hg[i].offsetWidth;
hg[i].style.width=0;
aLi[i].onmouseover=function(){ //移 入
var Img=this.getElementsByTagName('img');
iNow=this.index;
if(Img.length>1){
clearInterval(this.aMove);
if(this.aOff){
this.aOff=false;
startMove(hg[iNow],{width:990});
this.aOff=true;
}
}else{
clearInterval(this.aMove);
if(this.aOff){
this.aOff=false;
this.style.position='relative';
hg[iNow].style.width='190px';
hg[iNow].style.backgroundColor='#fff';
startMove(hg[iNow],{top:0});
this.aOff=true;
}
}
};
aLi[i].onmouseout=function(){ //移 出
var Img=this.getElementsByTagName('img');
iNow=this.index;
if(Img.length>1){
startMove(hg[iNow],{width:0});
}else{
startMove(hg[iNow],{top:-oneHeight},function(){
aLi[iNow].style.position='static';
hg[iNow].style.width='0';
});
}
};
};
};
function getByClass(elem,cls){ //通过类名获取元素
var aEle=elem.getElementsByTagName('*');
var reClass=new RegExp(''+cls+'');
var aResult=[];
for(var i=0;i<aEle.length;i++){
if(reClass.test(aEle[i].className)){
aResult.push(aEle[i]);
}
}
return aResult;
}
function getStyle(obj,attr){ //获取元素样式
return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj,false)[attr];
}
function startMove(obj,json,fn){ //运动框架
var timer=obj.timer;
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var iFog=true;
for(var attr in json){
//1.取值
var iCur=0;
if(attr=='opacity'){
if(Math.round(parseFloat(getStyle(obj,attr))*100)==0){
iCur=Math.round(parseFloat(getStyle(obj,attr))*100);
}else{
iCur=Math.round(parseFloat(getStyle(obj,attr))*100)||100;
}
}else{
iCur=parseInt(getStyle(obj,attr))||0;
}
//2.计算速度
var iSpeed=(json[attr]-iCur)/4;
iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
//3.检测值是否达到目标值
if(iCur!=json[attr]){
iFog=false;
}
if(attr=='opacity'){
obj.style.opacity=(iCur+iSpeed)/100;
obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';
}else{
obj.style[attr]=iCur+iSpeed+'px';
}
if(iFog){
clearInterval(obj.timer);
if(fn)fn();
}
}
},30)
}
</script>
</body>
</html>
...全文
请发表友善的回复…
发表回复
u010148070 2013-07-26
- 打赏
- 举报
楼上说的加载问题，不是的，因为那个网址服务器确实比较卡。
然后就是时间都写对了，我尝试过清楚冒泡事件，尝试过把事件加在一个透明层上面，
都不能解决此问题。求解？
jiafeng_lee 2013-07-26
- 打赏
- 举报
刚看了下，第一次进去的时候，你的图片没有显示，刷新后才显示出来，可能是第一次加载的图片路径比对，刷新后能显示出来，你看看是不是那个鼠标的事件没有写对，导致加载了两次
