admin管理员组文章数量:1656077
今天练习html+css+js
下面是baron_move.js 运动函数
function css(obj, attr, value)
{
if(arguments.length==2)
return parseFloat(obj.currentStyle?obj.currentStyle[attr]:document.defaultView.getComputedStyle(obj, false)[attr]);
else if(arguments.length==3)
switch(attr)
{
case 'width':
case 'height':
case 'paddingLeft':
case 'paddingTop':
case 'paddingRight':
case 'paddingBottom':
value=Math.max(value,0);//宽度不能为负
case 'left':
case 'top':
case 'marginLeft':
case 'marginTop':
case 'marginRight':
case 'marginBottom':
obj.style[attr]=value+'px';
break;
case 'opacity': //透明度兼容性设置
obj.style.filter="alpha(opacity:"+value*100+")";
obj.style.opacity=value;
break;
default:
obj.style[attr]=value;
}
return function (attr_in, value_in){css(obj, attr_in, value_in)};
}
var BARON_MOVE_TYPE={ //运动的类型选择,这里有两种方式
BUFFER: 1,
FLEX: 2
};
function baronStartMove(obj, oTarget, iType, fnCallBack, fnDuring)
{
var fnMove=null;
if(obj.timer)
{
clearInterval(obj.timer);
}
switch(iType) //选择运动方式
{
case BARON_MOVE_TYPE.BUFFER:
fnMove=baronDoMoveBuffer;
break;
case BARON_MOVE_TYPE.FLEX:
fnMove=baronDoMoveFlex;
break;
}
obj.timer=setInterval(function (){
fnMove(obj, oTarget, fnCallBack, fnDuring);
}, 15);
}
function baronDoMoveBuffer(obj, oTarget, fnCallBack, fnDuring)
{
var bStop=true;
var attr='';
var speed=0;
var cur=0;
for(attr in oTarget)
{
cur=css(obj, attr);
if(oTarget[attr]!=cur)
{
bStop=false;
speed=(oTarget[attr]-cur)/5;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
css(obj, attr, cur+speed);
}
}
if(fnDuring)fnDuring.call(obj);
if(bStop)
{
clearInterval(obj.timer);
obj.timer=null;
if(fnCallBack)fnCallBack.call(obj);
}
}
function baronDoMoveFlex(obj, oTarget, fnCallBack, fnDuring)
{
var bStop=true;
var attr='';
var speed=0;
var cur=0;
for(attr in oTarget)
{
if(!obj.oSpeed)obj.oSpeed={};
if(!obj.oSpeed[attr])obj.oSpeed[attr]=0;
cur=css(obj, attr);
if(Math.abs(oTarget[attr]-cur)>1 || Math.abs(obj.oSpeed[attr])>1)
{
bStop=false;
obj.oSpeed[attr]+=(oTarget[attr]-cur)/5;
obj.oSpeed[attr]*=0.7;
var maxSpeed=65;
if(Math.abs(obj.oSpeed[attr])>maxSpeed)
{
obj.oSpeed[attr]=obj.oSpeed[attr]>0?maxSpeed:-maxSpeed;
}
css(obj, attr, cur+obj.oSpeed[attr]);
}
}
if(fnDuring)fnDuring.call(obj);
if(bStop)
{
clearInterval(obj.timer);
obj.timer=null;
if(fnCallBack)fnCallBack.call(obj);
}
}
下面是正文,其中还有js是因为上面的代码可以重用,所以提取出来,记得有位牛人说过,重复两次以上的代码就要考虑提取出来了.重复写同样的代码并没有什么提高.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{margin:0;padding:0;} //布局必须要清除这个
body{background:#EBEBED;_position:relative;_height:100%;} //常规设置
img{border:none;display:block;}
li{list-style:none;} //这里我尝试过只要前一句就可以清除点号,求大神解答
.page{
-webkit-box-shadow: rgba(0,0,0,0.3) 0 1px 3px; //兼容性设置
-moz-box-shadow: rgba(0,0,0,0.3) 0 1px 3px;
box-shadow: rgba(0,0,0,0.3) 0 1px 3px;
background:#FFFFFF;
border-color: #E5E5E5 #DBDBDB #D2D2D2;
border-style: solid;
border-width: 1px;
margin:5px auto 0;
width:980px;
}
.baron_box{
overflow: hidden;
position: relative; //今晚复习了position的用法,relative:脱离正常的文本流,但在文本流中位置依然存在.
width: 820px;
z-index: 0;
height:185px;
margin: 0 70px;
}
.baron_box_head{
width: 1680px;
}
.baron_box_head li{
width:135px;
float:left;
text-align: center;
}
a{
text-decoration:none;
font: 12px/18px "Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana,sans-serif;
color:#7F7F7F;
}
.baron_box_head li a:hover{color:#333;}
.baron_box_foot{
height:30px;
text-align:center;
background:#fff;
overflow:hidden;
background:url(img/nav_bg.png) no-repeat 0 0;
background:-moz-linear-gradient(center bottom, rgba(223,223,223,1) 0%, rgba(242,242,242,1) 66%, rgba(242,242,242,1) 90%, rgba(230,230,230,1) 93%, rgba(190,190,190,1) 96%, rgba(150,150,150,1) 100%);
background:-webkit-gradient(linear, left bottom, left top, from(rgba(223,223,223,1)), color-stop(66%, rgba(242,242,242,1)), color-stop(90%, rgba(242,242,242,1)), color-stop(93%, rgba(230,230,230,1)), color-stop(96%, rgba(210,210,210,1)), to(rgba(140,140,140,1)));
border-bottom:1px solid #ebebeb;
position:relative;
}
.caret{
background: url(img/caret_active.gif) no-repeat scroll 0 0;
display: block;
height: 8px;
margin: 0 0 -8px -7px;
position: absolute;
width: 15px;
}
.baron_box_foot a{
display: inline-block;
margin: 0 15px;
padding: 8px 0 6px;
cursor:pointer;
text-shadow: 0 1px 0 #FFFFFF;
}
.baron_box_foot .show{
cursor: default;
color:#2B2B2B;
}
.baron_box_foot a:hover{color:#000;}
.baron{height:36px;line-height:26px;text-align:center;position:fixed;_position:absolute;bottom:0;width:100%;}
.baron a{color:#777;font-size:16px;}
.baron a:hover{color:#555;}
.baron_head{height:36px;width:980px;overflow:hidden;margin:0 auto;}
.baron_head .left{float:left;}
.baron_head .right{float:right;}
.baron_head a{line-height:36px;color:#777;}
.baron_head a:hover{color:#555;}
</style>
<script type="text/javascript" src="js/baron_move.js"></script>
<script type="text/javascript">
function getByClass(oParent, sClass) /这个是获取元素的通用方法,将取得的元素push到数组中
{
var aEle=oParent.getElementsByTagName('*');
var aResult=[];
var i=0;
for(i=0;i<aEle.length;i++)
{
if(aEle[i].className==sClass)
{
aResult.push(aEle[i]);
}
}
return aResult;
}
window.οnlοad=function ()
{
var oDiv=document.getElementById('div1');
var aLi=getByClass(oDiv, 'baron_box_head')[0].getElementsByTagName('li');
var aBtn=getByClass(oDiv, 'baron_box_foot')[0].getElementsByTagName('a');
var oCaret=getByClass(oDiv, 'caret')[0];
var aPos=[];
var timer=null;
var i=0;
for(i=0;i<aLi.length;i++) //<span style="font-family: Arial, Helvetica, sans-serif;">这里的for不能合并为一个,如果合并为一个,那么当第一个定位变为absolute之后,</span>
<span style="white-space:pre"> </span> //下一个块元素就会提升到原来第一个的位置,当for循结束之后,会看见所有块元素都在第一个块严肃的位置
<span style="white-space:pre"> </span> // absolute:完全脱离文本流,正常的位置不存在
<span style="white-space:pre"> </span> //这里的两个for是将float的定位批量转化为绝对定位,通用方法
{
aLi[i].index=i;
aPos[i]=aLi[i].offsetLeft;
}
for(i=0;i<aLi.length;i++)
{
aLi[i].style.position='absolute';
aLi[i].style.left=aPos[i]+'px';
}
aBtn[0].οnclick=function ()
{
var i=aLi.length-1;
clearTimeout(timer);
function next()
{
var obj=aLi[i];
if(i>=aLi.length/2)
{
baronStartMove(aLi[i], {left: 900}, BARON_MOVE_TYPE.FLEX);
timer=setTimeout(next, 100);
i--;
}
else
{
timer=setTimeout(next2, 150);
}
}
function next2()
{
if(i>=0)
{
baronStartMove(aLi[i], {left: aPos[i]}, BARON_MOVE_TYPE.FLEX);
timer=setTimeout(next2, 100);
}
i--;
}
next();
aBtn[1].className='';
this.className='show';
baronStartMove(oCaret, {left: this.offsetLeft+this.offsetWidth/2}, BARON_MOVE_TYPE.BUFFER);
};
aBtn[1].οnclick=function ()
{
var i=0;
clearTimeout(timer);
function next()
{
var obj=aLi[i];
if(i<aLi.length/2)
{
baronStartMove(aLi[i], {left: -200}, BARON_MOVE_TYPE.FLEX);
timer=setTimeout(next, 100);
i++;
}
else if(i==aLi.length/2)
{
timer=setTimeout(next2, 150);
}
}
function next2()
{
if(i<aLi.length)
{
baronStartMove(aLi[i], {left: aPos[i-aLi.length/2]}, BARON_MOVE_TYPE.FLEX);
timer=setTimeout(next2, 100);
}
i++;
}
next();
aBtn[0].className='';
this.className='show';
baronStartMove(oCaret, {left: this.offsetLeft+this.offsetWidth/2}, BARON_MOVE_TYPE.BUFFER);
};
};
</script>
</head>
<body>
<div class='baron_head'>
<a href="http://www.mi" target="_blank" class='left'>小米官网 http://www.mi</a>
<a href="http://www.mi/contact.html.php" target="_blank" class='right'>联系我们</a>
</div>
<div id="div1" class="page">
<div class="baron_box">
<ul class="baron_box_head">
<li><a href="http://www.mi"><img src="img/1.jpg" alt=""/>小米手机4c</a></li>
<li><a href="http://www.mi"><img src="img/2.jpg" alt=""/>小米手机4</a></li>
<li><a href="http://www.mi"><img src="img/3.jpg" alt=""/>小米盒子3 增强版</a></li>
<li><a href="http://www.mi"><img src="img/4.jpg" alt=""/>小米活塞耳机 基础版</a></li>
<li><a href="http://www.mi"><img src="img/5.jpg" alt=""/>移动电源10000mAh</a></li>
<li><a href="http://www.mi"><img src="img/6.jpg" alt=""/>小米路由器 青春版</a></li>
<li><a href="http://www.mi"><img src="img/7.jpg" alt=""/>小蚁摄像机</a></li>
<li><a href="http://www.mi"><img src="img/8.jpg" alt=""/>小蚁摄像机 夜视版</a></li>
<li><a href="http://www.mi"><img src="img/9.jpg" alt=""/>小米插线板</a></li>
<li><a href="http://www.mi"><img src="img/10.jpg" alt=""/>小米手环</a></li>
<li><a href="http://www.mi"><img src="img/11.jpg" alt=""/>小米体重秤</a></li>
<li><a href="http://www.mi"><img src="img/12.jpg" alt=""/>小米路由器</a></li>
</ul>
</div>
<div class="baron_box_foot">
<span style="left:460px;" class="caret"></span>
<a class="show">小米明星产品</a>
<a>更多</a>
</div>
</div>
<h2 class="baron"><a href="http://www.mi" target="_blank">小米官网 http://www.mi</a></h2>
</body>
</html>
版权声明:本文标题:仿小米明星产品展示 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dongtai/1725869388a1046112.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论