js css横向滚动条是如何实现的？

不知是不是html5技术，举个例子，有两个横排放着的三个按纽AAA，BBB，CCC当AAA被点中时，AAA下面有个小蓝条当点击BBB时，那个小蓝条向右移动到BBB下面CC... 不知是不是html5技术，举个例子，有两个横排放着的三个按纽AAA，BBB，CCC
当AAA被点中时，AAA下面有个小蓝条
当点击BBB时，那个小蓝条向右移动到BBB下面
CCC同理，点谁谁下面有蓝条，但是是滚过来的，很流畅很动画，谁帮我写个demo
感激不尽！用jquery也可以展开

 我来答

6个回答

#热议# 应届生在签三方时要注意什么？

青鸟中关村专家
推荐于2016-07-25 · 知道合伙人软件行家

青鸟中关村专家
知道合伙人软件行家

采纳数：1734 获赞数：8440

就职于北大青鸟中关村，自2004年踏入北大青鸟这个行业，已经有11年工作经验和8年的培训经验，寓教于乐

向TA提问私信TA

关注

展开全部

可以使用DIV+CSS+JS实现不间断横向滚动代码，具体代码如下：

 
<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>横向不间断滚动DIV CSS代码-DIVCSS5</title> 
</head> 
<body> 
<style> 
.scroll_div {width:600px; height:49px;margin:0 auto; overflow: hidden; white-space: nowrap; background:#ffffff;} 
.scroll_div img {width:120px;height:49px;border: 0;margin: auto 8px; } 
#scroll_begin, #scroll_end, #scroll_begin ul, #scroll_end ul, #scroll_begin ul li, #scroll_end ul li{display:inline;}/* 设置ul和li横排 */ 
</style> 
<script language="javascript"> 
function ScrollImgLeft(){ 
var speed=20 
var scroll_begin = document.getElementById("scroll_begin"); 
var scroll_end = document.getElementById("scroll_end"); 
var scroll_div = document.getElementById("scroll_div"); 
scroll_end.innerHTML=scroll_begin.innerHTML 
function Marquee(){ 
if(scroll_end.offsetWidth-scroll_div.scrollLeft<=0) 
scroll_div.scrollLeft-=scroll_begin.offsetWidth 
else 
scroll_div.scrollLeft++ 
} 
var MyMar=setInterval(Marquee,speed) 
scroll_div.onmouseover=function() {clearInterval(MyMar)} 
scroll_div.onmouseout=function() {MyMar=setInterval(Marquee,speed)} 
} 
</script> 
<h2 align="center"><a href="http://www.divcss5.com/">DIVCSS5</a>演示说明：向左滚动</h2> 
<div style="text-align:center"> 
<div class="sqBorder"> 
<!--#####滚动区域#####--> 
<div id="scroll_div" class="scroll_div"> 
<div id="scroll_begin"> 
<ul> 
<li><a href="http://www.divcss5.com/"><img src="http://www.divcss5.com/img/css-logo.gif" /></a></li> 
<li><a href="http://www.divcss5.com/"><img src="http://www.divcss5.com/img/css-logo.gif" /></a></li> 
<li><a href="http://www.divcss5.com/"><img src="http://www.divcss5.com/img/css-logo.gif" alt="div css" /></a></li> 
<li><a href="http://www.divcss5.com/"><img src="http://www.divcss5.com/img/css-logo.gif" /></a></li> 
<li><a href="http://www.divcss5.com/"><img src="http://www.divcss5.com/img/css-logo.gif" alt="divcss" /></a></li> 
<li><a href="http://www.divcss5.com/"><img src="http://www.divcss5.com/img/css-logo.gif" /></a></li> 
<li><a href="http://www.divcss5.com/"><img src="http://www.divcss5.com/img/css-logo.gif" /></a></li> 
<li><a href="http://www.divcss5.com/"><img src="http://www.divcss5.com/img/css-logo.gif" /></a></li> 
<li><a href="http://www.divcss5.com/"><img src="http://www.divcss5.com/img/css-logo.gif" /></a></li> 
<li><a href="http://www.divcss5.com/"><img src="http://www.divcss5.com/img/css-logo.gif" /></a></li> 
<li><a href="http://www.divcss5.com/"><img src="http://www.divcss5.com/img/css-logo.gif" /></a></li> 
<li><a href="http://www.divcss5.com/"><img src="http://www.divcss5.com/img/css-logo.gif" alt="CSS" /></a></li> 
<li><a href="http://www.divcss5.com/"><img src="http://www.divcss5.com/img/css-logo.gif" /></a></li> 
<li><a href="http://www.divcss5.com/"><img src="http://www.divcss5.com/img/css-logo.gif" /></a></li> 
<li><a href="http://www.divcss5.com/"><img src="http://www.divcss5.com/img/css-logo.gif" alt="divcss5" /></a></li> 
<li><a href="http://www.divcss5.com/"><img src="http://www.divcss5.com/img/css-logo.gif" /></a></li> 
</ul> 
</div> 
<div id="scroll_end"></div> 
</div> 
<!--#####滚动区域#####--> 
</div> 
<script type="text/javascript">ScrollImgLeft();</script> 
</div> 
<!--//向左滚动代码结束--> 
</body></html>

已赞过 已踩过<

评论收起

趣事情
2015-09-13 · 知道合伙人互联网行家

趣事情
知道合伙人互联网行家

采纳数：517 获赞数：5452

电脑技术，软件开发。移动开发。网站建设相关专业知识。都可以提供解答和相关技术指导。

向TA提问私信TA

关注

展开全部

DIV+CSS+JS实现不间断横向滚动代码：

 
<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>横向不间断滚动DIV CSS代码-DIVCSS5</title> 
</head> 
<body> 
<style> 
.scroll_div {width:600px; height:49px;margin:0 auto; overflow: hidden; white-space: nowrap; background:#ffffff;} 
.scroll_div img {width:120px;height:49px;border: 0;margin: auto 8px; } 
#scroll_begin, #scroll_end, #scroll_begin ul, #scroll_end ul, #scroll_begin ul li, #scroll_end ul li{display:inline;}/* 设置ul和li横排 */ 
</style> 
<script language="javascript"> 
function ScrollImgLeft(){ 
var speed=20 
var scroll_begin = document.getElementById("scroll_begin"); 
var scroll_end = document.getElementById("scroll_end"); 
var scroll_div = document.getElementById("scroll_div"); 
scroll_end.innerHTML=scroll_begin.innerHTML 
function Marquee(){ 
if(scroll_end.offsetWidth-scroll_div.scrollLeft<=0) 
scroll_div.scrollLeft-=scroll_begin.offsetWidth 
else 
scroll_div.scrollLeft++ 
} 
var MyMar=setInterval(Marquee,speed) 
scroll_div.onmouseover=function() {clearInterval(MyMar)} 
scroll_div.onmouseout=function() {MyMar=setInterval(Marquee,speed)} 
} 
</script> 
<h2 align="center"><a href="
演示说明：向左滚动</h2> 
<div style="text-align:center"> 
<div class="sqBorder"> 
<!--#####滚动区域#####--> 
<div id="scroll_div" class="scroll_div"> 
<div id="scroll_begin"> 
<ul> 
<li><a href="

<li><a href="

<li><a href="

<li><a href="

<li><a href="

<li><a href="

<li><a href="

<li><a href="

<li><a href="

<li><a href="

<li><a href="

<li><a href="

<li><a href="

<li><a href="

<li><a href="

<li><a href="

</ul> 
</div> 
<div id="scroll_end"></div> 
</div> 
<!--#####滚动区域#####--> 
</div> 
<script type="text/javascript">ScrollImgLeft();</script> 
</div> 
<!--//向左滚动代码结束--> 
</body></html>

已赞过 已踩过<

评论收起

落允玦E9
2021-04-17 · 超过30用户采纳过TA的回答

知道答主

回答量：136

采纳率：88%

帮助的人：22万

我也去答题访问个人页

关注

展开全部

活动作品如何在一个网页实现登录_注册表单切换？14分钟带你使用CSS+JS实现炫酷滑动切换效果

已赞过 已踩过<

评论收起

gybmike
2013-03-10 · TA获得超过367个赞

知道小有建树答主

回答量：512

采纳率：0%

帮助的人：300万

我也去答题访问个人页

关注

展开全部

用jquery.animate(),不难的

已赞过 已踩过<

评论收起

tatooo
推荐于2018-03-04 · TA获得超过2119个赞

知道小有建树答主

回答量：2497

采纳率：46%

帮助的人：686万

我也去答题访问个人页

关注

展开全部

jquery的先链接jquery插件
=====================js部分=================
$(".nav>li").mouseenter(function(e){
$(".bottom_nav").stop();
var li_offset=$(this).position().left;
var e_x=e.pageX;
var xx=e_x-li_offset;
$(".bottom_nav").animate({left:li_offset},800);//数字越大滑动越慢；
})

===================css部分==================
.main {
width:1000px;
margin:0 auto;
}
.nav { position:relative; height:40px;}
.nav li {
float:left;
list-style:none;
color:#333;
font-size:14px;
cursor:pointer;
padding:10px;
}
.nav li:hover {
background:#a8e9e9;
}
.bottom_nav {
background:#06F;
height:3px;
width:76px;
position:absolute;
bottom:0;
}
===================html部分===============
<div class="main">
<div class="nav">
    <li>网站首页</li>
        <li>产品推荐</li>
        <li>关于我们</li>
        <div class="bottom_nav"></div>
    </div>
</div>


本回答被提问者和网友采纳






已赞过已踩过<

你对这个回答的评价是？
评论收起

2条折叠回答

更多回答（4）

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

js css横向滚动条是如何实现的？

其他类似问题

为你推荐：