<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<style>
.selectd{
border:solid 1px blue;
background-color:#Fa13b1;
color:Yellow;
}
.unselected{
background-color:white;
color:black;
}
#inputdiv{
border:solid 1px #00dbac;
position:fixed;
left:70%;
}
#content{
padding:20px;
border:solid 1px #00aaac;
}</style><script>
var words;
var env;
var content;
var scrollY = 0;
var direction=0
function select(){
words=document.getElementById('intxt').value;
if(words.length>=3){
setblack();
serach(words);
}
}
function setblack(){
var as=document.getElementsByTagName('span');
for(var i=0;i<as.length;i++){
as[i].className="unselected";
}
}
function serach(words){
env=document.getElementById(words);
if(env == null){
alert("没有"+words+"这个栏目")
}else{
if(env.offsetTop>= scrollY +100){
direction=0;
}else if(env.offsetTop<=scrollY-100){
direction=1;
}
scrollWindow();
var name=document.getElementById(words+'_name');
name.className="selectd";
}
}
function scrollWindow()
{//欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
if (direction == 0)
{
if ( env.offsetTop>= scrollY +100){
window.scrollBy(0,+10);
scrollY=scrollY + 10;
}else{
clearTimeout(srcoll);
}
}
else{
if ( env.offsetTop<=scrollY){
window.scrollBy(0,-10);
scrollY=scrollY - 10;
}else{
clearTimeout(srcoll);
}
}
var srcoll=setTimeout("scrollWindow()", 10);
}//欢迎来到站
</script>
</head>
<body>
<div id="inputdiv">
<input type="text" id="intxt" /><br />
<a href="javascript:void(0)" onclick="select();">turn in</a>
</div>
<div id="content">
<a id="constanine"></a><span id="constanine_name">constanine</span>
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br /><br /><br /><a id="smith"></a><span id="smith_name">smith</span>
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br /><br /><br /><a id="breake"></a><span id="breake_name">breake</span>
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br /><br /><br /><a id="tom"></a><span id="tom_name">Tom</span>
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br /><br /><br />
<a id="aclie"></a><span id="aclie_name">aclie</span>
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br /><br /><br /><a id="john"></a><span id="john_name">john</span>
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br /><br /><br /><a id="jack"></a><span id="jack_name">jack</span>
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br /><br /><br />
</div>
</body>
</html>
这个是在论坛上看到一位仁兄提出的要求,自己想想也做了下,但是这个效果在firefox,chrome都有滚屏的效果,单是到了ie下不动了。求问怎么解决JavaScriptInternet Explorer
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<style>
.selectd{
border:solid 1px blue;
background-color:#Fa13b1;
color:Yellow;
}
.unselected{
background-color:white;
color:black;
}
#inputdiv{
border:solid 1px #00dbac;
position:fixed;
left:70%;
}
#content{
padding:20px;
border:solid 1px #00aaac;
}</style><script>
var words;
var env;
var content;
var scrollY = 0;
var direction=0
function select(){
words=document.getElementById('intxt').value;
if(words.length>=3){
setblack();
serach(words);
}
}
function setblack(){
var as=document.getElementsByTagName('span');
for(var i=0;i<as.length;i++){
as[i].className="unselected";
}
}
function serach(words){
env=document.getElementById(words);
if(env == null){
alert("没有"+words+"这个栏目")
}else{
if(env.offsetTop>= scrollY +100){
direction=0;
}else if(env.offsetTop<=scrollY-100){
direction=1;
}
scrollWindow();
var name=document.getElementById(words+'_name');
name.className="selectd";
}
}
function scrollWindow()
{//欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
if (direction == 0)
{
if ( env.offsetTop>= scrollY +100){
window.scrollBy(0,+10);
scrollY=scrollY + 10;
}else{
clearTimeout(srcoll);
}
}
else{
if ( env.offsetTop<=scrollY){
window.scrollBy(0,-10);
scrollY=scrollY - 10;
}else{
clearTimeout(srcoll);
}
}
var srcoll=setTimeout("scrollWindow()", 10);
}//欢迎来到站
</script>
</head>
<body>
<div id="inputdiv">
<input type="text" id="intxt" /><br />
<a href="javascript:void(0)" onclick="select();">turn in</a>
</div>
<div id="content">
<a id="constanine"></a><span id="constanine_name">constanine</span>
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br /><br /><br /><a id="smith"></a><span id="smith_name">smith</span>
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br /><br /><br /><a id="breake"></a><span id="breake_name">breake</span>
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br /><br /><br /><a id="tom"></a><span id="tom_name">Tom</span>
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br /><br /><br />
<a id="aclie"></a><span id="aclie_name">aclie</span>
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br /><br /><br /><a id="john"></a><span id="john_name">john</span>
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br /><br /><br /><a id="jack"></a><span id="jack_name">jack</span>
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br /><br /><br />
</div>
</body>
</html>
这个是在论坛上看到一位仁兄提出的要求,自己想想也做了下,但是这个效果在firefox,chrome都有滚屏的效果,单是到了ie下不动了。求问怎么解决JavaScriptInternet Explorer
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<style>
.selectd{
border:solid 1px blue;
background-color:#Fa13b1;
color:Yellow;
}
.unselected{
background-color:white;
color:black;
}
#inputdiv{
border:solid 1px #00dbac;
position:fixed;
left:70%;
}
#content{
padding:20px;
border:solid 1px #00aaac;
}
</style>
<script>
var words;
var env;
var content;
var scrollY = 0;
var direction=0
function select(){
words=document.getElementById('intxt').value;
if(words.length>=3){
setblack();
serach(words);
}
}
function setblack(){
var as=document.getElementsByTagName('span');
for(var i=0;i<as.length;i++){
as[i].className="unselected";
}
}
function serach(words){
env=document.getElementById(words);
if(env == null){
alert("没有"+words+"这个栏目")
}else{
if(env.offsetTop>= scrollY +100){
direction=0;
}else if(env.offsetTop<=scrollY-100){
direction=1;
}
scrollWindow();
var name=document.getElementById(words+'_name');
name.className="selectd";
}
}
function scrollWindow()
{//欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
if (direction == 0)
{
if ( env.offsetTop>= scrollY +100){
window.scrollBy(0,+10);
scrollY=scrollY + 10;
}else{
clearTimeout(srcoll);
}
}
else{
if ( env.offsetTop<=scrollY){
window.scrollBy(0,-10);
scrollY=scrollY - 10;
}else{
clearTimeout(srcoll);
}
}
var srcoll=setTimeout("scrollWindow()", 10);
}//欢迎来到站
</script>
</head>
<body>
<div id="inputdiv">
<input type="text" id="intxt" /><br />
<a href="javascript:void(0)" onclick="select();">turn in</a>
</div>
<div id="content">
<div id="constanine"><span id="constanine_name">constanine</span>
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br /><br /><br />
</div>
<div id="smith"><span id="smith_name">smith</span>
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br /><br /><br />
</div>
<div id="breake"><span id="breake_name">breake</span>
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br /><br /><br />
</div>
<div id="tom"><span id="tom_name">Tom</span>
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br /><br /><br />
</div>
<div id="aclie"><span id="aclie_name">aclie</span>
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br /><br /><br />
</div>
<div id="john"><span id="john_name">john</span>
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br /><br /><br />
</div>
<div id="jack"><span id="jack_name">jack</span>
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br /><br /><br />
</div>
</div>
</body>
</html>