*{
padding: 0;
margin: 0;
}
.hide {
display: none;
}
.show {
display: block;
}
.flag {
width: 80px;
height: 3px;
background-color: red;
position: absolute;
}
a {
text-decoration: none;
width: 80px;
display: inline-block;
text-align: center;
}
<div class="news">
<div class="newt" id="newT">
<a href="" class="cuxiao">促销</a>
<a href="" class= "gg">公告</a>
<a href="" class="good">好消息</a>
<div id="flag" class="flag"></div>
</div>
<div class="new-con" id="newsbody">
<div id="one" class="show">
<ul>
<li>111111111111</li>
<li>111111111111</li>
<li>111111111111</li>
<li>111111111111</li>
</ul></div>
<div id="one" class="hide">
<ul>
<li>22222222222222222</li>
<li>22222222222222222</li>
<li>22222222222222222</li>
<li>22222222222222222</li>
</ul></div>
<div id="one" class="hide">
<ul>
<li>3333333333333333333</li>
<li>3333333333333333333</li>
<li>3333333333333333333</li>
<li>3333333333333333333</li>
</ul></div>
</div>
</div>
<script>
var newT = document.getElementById('newT');
var newsbody = document.getElementById('newsbody');
var flag = document.getElementById('flag');
for(var i = 0;i<3;i++){
var link = newT.children[i];
link.onmouseover = linkmouseover;
link.setAttribute('index',i);
}
function linkmouseover() {
var offsetLeft = this.offsetLeft;
animate(flag,offsetLeft);
for (var i = 0,len = newsbody.children.length; i < len ;i++){
var div = newsbody.children[i];
//判断类样式是否已经有hide
if (div.className.indexOf('hide')===-1){
div.className = 'hide';
}
}
var index = parseInt(this.getAttribute('index'));
newsbody.children[index].className = 'show';
}
function animate (element,target) {
var timeid = null;
if(timeid) {
clearInterval(timeid);
timeid = null;
}
timeid = setInterval(function () {
var step = 6;
var current = element.offsetLeft;
if(current > target){
step = -Math.abs(step);
}
if(Math.abs(current - target) <= Math.abs(step)){
clearInterval(timeid);
element.style.left = target+'px';
return;}
current += step;
element.style.left = current + 'px';
},3);
}
</script>
点击标题显示对应的内容
最新推荐文章于 2023-04-01 21:17:05 发布