使用JQUERY事件+相对应函数完美解决。
图片效果类似这样:
html:
class类名命名有些繁琐,懒得改了
<div class="top">
<div class="top_box"> <img class="top_box_img" src="#logo">
<div class="top_box_right">
<div class="top_box_right_box">
<div class="top_box_title">111</div>
</div>
<div class="top_box_right_box">
<div class="top_box_title">222</div>
</div>
<div class="top_box_right_box">
<div class="top_box_title">333</div>
</div>
<div class="top_box_right_box">
<div class="top_box_title">444</div>
</div>
<div class="top_box_right_box">
<div class="top_box_title">555</div>
</div>
<div class="top_box_right_box">
<div class="top_box_title">666</div>
</div>
<div class="top_hr"></div>
</div>
</div>
</div>
css:
这里每个单位的宽度设置为100px;配合JS进行相对应的设置;
.top{
position:absolute;
width:100%;
min-width: 1200px;/*这个是防止背景在小于1200px时,还有颜色*/
height:60px;
background:#0C1A36;
top: 0;
left:0;
opacity: 0.8;
z-index: 100;
}
.top_box{
position: absolute;
left:0;
right:0;
margin: auto;
width:1200px;
height:60px;
font-size: 0
}
.top_box_img{
position:absolute;
left:0;
top:0;
width:242px;
height:60px;
}
.top_hr{
position:absolute;
clear:both;
margin: 0 0 4px 0;
padding: 0;
width:40px;
height:2px;
background: #ffffff;
bottom: 0;
left:230px;
}
.top_box_right{
position:absolute;
right:0;
height:60px;
color: #ffffff;
}
.top_box_right_box{
position:relative;
width:100px;
height:60px;
display: inline-block;
font-size: 14px;
}
.top_box_title{
position:absolute;
text-align: center;
width:100px;
line-height: 60px;
top:0;
botom:0;
left:0;
right:0;
margin: auto;
}
js:
关键代码
这里利用的都是最为基础的jquery知识;因为css预定的100px,所以这里设置的值相对应的也是100px,
关键代码行: t o p h r 0. s t o p ( ) ; / / 这 行 代 码 决 定 了 每 执 行 一 个 事 件 是 否 停 止 当 前 正 在 执 行 的 代 码 。 如 果 没 有 这 行 代 码 . . . . . . ( 自 己 尝 试 吧 , 懒 得 解 释 了 ) 放 在 top_hr0.stop(); //这行代码决定了每执行一个事件是否停止当前正在执行的代码。如果没有这行代码......(自己尝试吧,懒得解释了) 放在 tophr0.stop();//这行代码决定了每执行一个事件是否停止当前正在执行的代码。如果没有这行代码......(自己尝试吧,懒得解释了)放在(docunment).reday(function(){ /* ~代码放在这里面 ~*/ })
/*
上方导航栏滑块展示
*/
var $top_hr0 =$(".top_hr");
var $top_list0 = $(".top_box_right_box");
function $startfunction (){
$top_hr0.stop();
var $top_math0 = $(this).index();
var $mytop_math0 = 30 + $top_math0*100 + "px";
$top_hr0.animate({left:$mytop_math0},200);
}
function $endfunction (){
$top_hr0.stop();
$top_hr0.animate({left:"230px"},400)
}
$top_list0.mouseover($startfunction);
$top_list0.mouseleave($endfunction);
图解就算了,没啥意思(主要是自己太懒了),看效果自己复制粘贴,效果就出来l~