<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
<script type="text/javascript">
var c_height, c_width, scroll_left,scroll_top,scroll_Top,counter;
counter = 0;
scroll_top = document.documentElement.scrollTop;
function position() {
c_width = document.documentElement.clientWidth;
c_height = document.documentElement.clientHeight;
scroll_left = document.documentElement.scrollLeft;
scroll_top = document.documentElement.scrollTop;
var div_dom = document.getElementById('divId');
div_dom.style.left = c_width - 52 + scroll_left + 'px';
div_dom.style.top = c_height - 208 + scroll_top + 'px';
}
function changeColor() {
var li_obj = document.getElementById('divId').getElementsByTagName('li');
theCurrentScrollTop = document.documentElement.scrollTop;
if(theCurrentScrollTop - scroll_Top > 10) {
for(var i=0; i<li_obj.length; i++) {
li_obj[i].className = '';
}
document.getElementById('divId').getElementsByTagName('li')[counter].className = 'current';
counter++;
if(counter > 3) {
counter = 0;
}
}
if(theCurrentScrollTop - scroll_Top < 10) {
for(var i=0; i<li_obj.length; i++) {
li_obj[i].className = '';
}
document.getElementById('divId').getElementsByTagName('li')[counter].className = 'current';
counter--;
if(counter < 0) {
counter = 3;
}
}
scroll_Top = theCurrentScrollTop;
}
window.onload = function() {
position();
}
window.onscroll = function() {
position();
changeColor();
}
window.onresize = function() {
position();
}
</script>
<style type="text/css">
body { margin:0; padding:0; }
ul { list-style:none; }
ul,li { margin:0; padding:0; }
ul li { width:50px; height:50px; border:1px solid #000; }
#divId { position:absolute; }
.current { background-color:red; }
</style>
</head>
<body>
<div style='height:1000px;'></div>
<div id='divId'>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>大侠看看我的滚动tab为什么老是闪啊,而且还有些错误,怎么改?
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
<script type="text/javascript">
var c_height, c_width, scroll_left,scroll_top,scroll_Top,counter;
counter = 0;
scroll_top = document.documentElement.scrollTop;
function position() {
c_width = document.documentElement.clientWidth;
c_height = document.documentElement.clientHeight;
scroll_left = document.documentElement.scrollLeft;
scroll_top = document.documentElement.scrollTop;
var div_dom = document.getElementById('divId');
div_dom.style.left = c_width - 52 + scroll_left + 'px';
div_dom.style.top = c_height - 208 + scroll_top + 'px';
}
function changeColor() {
var li_obj = document.getElementById('divId').getElementsByTagName('li');
theCurrentScrollTop = document.documentElement.scrollTop;
if(theCurrentScrollTop - scroll_Top > 10) {
for(var i=0; i<li_obj.length; i++) {
li_obj[i].className = '';
}
document.getElementById('divId').getElementsByTagName('li')[counter].className = 'current';
counter++;
if(counter > 3) {
counter = 0;
}
}
if(theCurrentScrollTop - scroll_Top < 10) {
for(var i=0; i<li_obj.length; i++) {
li_obj[i].className = '';
}
document.getElementById('divId').getElementsByTagName('li')[counter].className = 'current';
counter--;
if(counter < 0) {
counter = 3;
}
}
scroll_Top = theCurrentScrollTop;
}
window.onload = function() {
position();
}
window.onscroll = function() {
position();
changeColor();
}
window.onresize = function() {
position();
}
</script>
<style type="text/css">
body { margin:0; padding:0; }
ul { list-style:none; }
ul,li { margin:0; padding:0; }
ul li { width:50px; height:50px; border:1px solid #000; }
#divId { position:absolute; }
.current { background-color:red; }
</style>
</head>
<body>
<div style='height:1000px;'></div>
<div id='divId'>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>大侠看看我的滚动tab为什么老是闪啊,而且还有些错误,怎么改?
解决方案 »
免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货