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

html-css025

js css横向滚动条是如何实现的？,第1张

可以使用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:49pxmargin:0 auto overflow: hidden white-space: nowrap background:#ffffff} 

.scroll_div img {width:120pxheight:49pxborder: 0margin: 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>

CSS3平滑过渡效果让宽度向左滑动的代码为：

<!DOCTYPE html>

<html>

<head>

<style> 

div#transitionhovertree

{

float: right

width:100px

height:100px

background:blue

transition:width 2s

-moz-transition:width 2s /* Firefox 4 */

-webkit-transition:width 2s /* Safari and Chrome */

-o-transition:width 2s /* Opera */

}

 

div#transitionhovertree:hover

{

width:300px

}

</style>

</head>

<body>

 

<div id="transitionhovertree"></div>

 

 

 

</body>

</html>

CSS即层叠样式表（Cascading StyleSheet）。 在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。

CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括： 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。

css可以通过为网页元素设置滚动条样式使网页元素的内容实现滚动。

css通过overflow属性设置滚动条示例：

<html>

<head>

<style type="text/css">

div

{

background-color:#00FFFF

width:150px

height:150px

overflow: scroll

}

</style>

</head>

<body>

<p>如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。</p>

<div>

这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，

用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible。

</div>

</body>

</html>

效果图

扩展：

overflow属性介绍：

overflow 属性规定当内容溢出元素框时发生的事情。

说明

这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。

属性值：

visible 默认值。内容不会被修剪，会呈现在元素框之外。

hidden 内容会被修剪，并且其余内容是不可见的。

scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

inherit 规定应该从父元素继承 overflow 属性的值。