Home  >  Article  >  Web Front-end  >  如何在页面最上层添加一个动态滚动条?_html/css_WEB-ITnose

如何在页面最上层添加一个动态滚动条?_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-21 09:18:511536browse
页面的地图是openlayers做的, 下面是我的css, 设置了position: absolute和z-index, 但是定位并不准确, 滚动条没有放在页面的下端, 而且滚动条并没有实现滚动(之前滚动功能是完好的, 可能因为css导致失效)




<style type="text/css">#map{ 	height : 50%;  	width:100%; 	border:1px solid black; 	position: absolute; 	z-index:0;}#demo {background: #FFF;overflow:hidden;border: 1px dashed #CCC;width: 500px;filter:alpha(opacity=100);position:absolute;z-index:1;left:200px; top:500px;background-color:#ffffff;}#demo img {border: 3px solid #F2F2F2;position:absolute;z-index:1;}#indemo {float: left;width: 800%;}#demo1 {float: left;}#demo2 {float: left;}</style>


<div id="demo"><div id="indemo"><div id="demo1"><table><tr><td><img  src="../images/agent_blue.png" border="0" / alt="如何在页面最上层添加一个动态滚动条?_html/css_WEB-ITnose" >tanzhen6</td><td><img  src="../images/agent_blue.png" border="0" / alt="如何在页面最上层添加一个动态滚动条?_html/css_WEB-ITnose" >tanzhen1</td><td><img  src="../images/agent_blue32_bk.png" border="0" / alt="如何在页面最上层添加一个动态滚动条?_html/css_WEB-ITnose" >tanzhen2</td><td><img  src="../images/agent_green_bk.png" border="0" / alt="如何在页面最上层添加一个动态滚动条?_html/css_WEB-ITnose" >tanzhen3</td><td><img  src="../images/agent_green32_bk.png" border="0" / alt="如何在页面最上层添加一个动态滚动条?_html/css_WEB-ITnose" >tanzhen4</td><td><img  src="../images/agent_red_bk.png" border="0" / alt="如何在页面最上层添加一个动态滚动条?_html/css_WEB-ITnose" >tanzhen5</td></tr></table></div><div id="demo2"></div></div></div><script><!--var speed=10;var tab=document.getElementById("demo");var tab1=document.getElementById("demo1");var tab2=document.getElementById("demo2");tab2.innerHTML=tab1.innerHTML;function Marquee(){if(tab2.offsetWidth-tab.scrollLeft<=0)tab.scrollLeft-=tab1.offsetWidthelse{tab.scrollLeft++;}}var MyMar=setInterval(Marquee,speed);tab.onmouseover=function() {clearInterval(MyMar)};tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};--></script>


总的页面代码在此:
<%@page language="java" import="java.util.*" pageEncoding="UTF-8"%><%	String path = request.getContextPath();	String basePath = request.getScheme() + "://"			+ request.getServerName() + ":" + request.getServerPort()			+ path + "/";%>WMSMAPINIT																																													      <div id="demo"><div id="indemo"><div id="demo1"><table><tr><td><img  src="../images/agent_blue.png" border="0" / alt="如何在页面最上层添加一个动态滚动条?_html/css_WEB-ITnose" >tanzhen6</td><td><img  src="../images/agent_blue.png" border="0" / alt="如何在页面最上层添加一个动态滚动条?_html/css_WEB-ITnose" >tanzhen1</td><td><img  src="../images/agent_blue32_bk.png" border="0" / alt="如何在页面最上层添加一个动态滚动条?_html/css_WEB-ITnose" >tanzhen2</td><td><img  src="../images/agent_green_bk.png" border="0" / alt="如何在页面最上层添加一个动态滚动条?_html/css_WEB-ITnose" >tanzhen3</td><td><img  src="../images/agent_green32_bk.png" border="0" / alt="如何在页面最上层添加一个动态滚动条?_html/css_WEB-ITnose" >tanzhen4</td><td><img  src="../images/agent_red_bk.png" border="0" / alt="如何在页面最上层添加一个动态滚动条?_html/css_WEB-ITnose" >tanzhen5</td></tr></table></div><div id="demo2"></div></div></div><script><!--var speed=10;var tab=document.getElementById("demo");var tab1=document.getElementById("demo1");var tab2=document.getElementById("demo2");tab2.innerHTML=tab1.innerHTML;function Marquee(){if(tab2.offsetWidth-tab.scrollLeft<=0)tab.scrollLeft-=tab1.offsetWidthelse{tab.scrollLeft++;}}var MyMar=setInterval(Marquee,speed);tab.onmouseover=function() {clearInterval(MyMar)};tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};--></script>


回复讨论(解决方案)

-----------------------------------------------------------------------------------------------

问题已解决~ 

经过与示例对比后, 发现是我的

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn