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

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

WBOY
Release: 2016-06-21 09:18:51
Original
1567 people have browsed it
页面的地图是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>
Copy after login


<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>
Copy after login


总的页面代码在此:
<%@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>
Copy after login


回复讨论(解决方案)

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

问题已解决~ 

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

source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template