滚动链接导航

最新推荐文章于 2024-07-29 11:53:27 发布

aibusi2584

最新推荐文章于 2024-07-29 11:53:27 发布

阅读量97

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/LoVeSW/p/3425277.html

版权

上滚动链接导航

<!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>
<style type="text/css">

#demo {
overflow:hidden;
height: 200px;
cursor:pointer;
}
#demo  img{width:200px;height:200px;}
#demo li{list-style:none;}
</style>

</head>

<body>
<div id="demo">
<div id="demo1">
<ul>
<li><img src="../images/1.jpg" border="0" /></li>
<li><img src="../images/2.jpg" border="0" /><li>
<li><img src="../images/3.jpg" border="0" /><li>
<li><img src="../images/4.jpg" border="0" /></li>
<li><img src="../images/5.jpg" border="0" /></li>
</ul>
</div>
<div id="demo2"></div>
</div>

</body>
</html>
<script type="text/javascript">
var speed=10; //数字越大速度越慢
var demo=document.getElementById("demo");
var demo1=document.getElementById("demo1");
var demo2=document.getElementById("demo2");
demo2.innerHTML=demo1.innerHTML;
function Marquee(){
if(demo2.offsetTop-demo.scrollTop<=0){//当滚动至demo1与demo2交界时
demo.scrollTop-=demo1.offsetHeight;
}//demo跳到最顶端
else{
demo.scrollTop++;
}
}

var MyMar = setInterval("Marquee()", speed);
demo.onmouseover = function() { clearInterval(MyMar); }; //鼠标移上时清除定时器达到滚动停止的目的
demo.onmouseout=function() {MyMar=setInterval("Marquee()",speed)};//鼠标移开时重设定时器
</script>

下滚动链接导航

<!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>
<style type="text/css">
#demo{ overflow:hidden;height:200px;}
#demo img {width:200px;height:200px;}
#demo   li {list-style:none;}
</style>
</head>

<body>
<div id="demo">
<div id="demo1">
<ul>
<li><img src="../images/1.jpg" border="0" /></li>
<li><img src="../images/2.jpg" border="0" /><li>
<li><img src="../images/3.jpg" border="0" /><li>
<li><img src="../images/4.jpg" border="0" /></li>
<li><img src="../images/5.jpg" border="0" /></li>
</ul>
</div>
<div id="demo2"></div>
</div>
</body>
</html>
<script type="text/javascript">
var speed=10;
var demo=document.getElementById("demo");
var demo1=document.getElementById("demo1");
var demo2=document.getElementById("demo2");
demo2.innerHTML=demo1.innerHTML;
function Marquee(){
if(demo1.offsetTop-demo.scrollTop>=0)//当滚动至demo1与demo2交界时
demo.scrollTop+=demo2.offsetHeight; //demo跳到最顶端
else{
demo.scrollTop--;
}
}
var MyMar=setInterval("Marquee()",speed);
demo.onmouseover=function() {clearInterval(MyMar)};//鼠标移上时清除定时器达到滚动停止的目的
demo.onmouseout=function() {MyMar=setInterval("Marquee()",speed)};//鼠标移开时重设定时器
-->
</script>

右滚动链接导航

<!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>
<style type="text/css">
<!--
#demo {
background: #FFF;
overflow:hidden;
width: 200px;
}
#demo img {
width:200px;height:200px;
}
#indemo {
float: left;
width: 1300%;
}
#demo1 {
float: left;
}
#demo2 {
float: left;
}
ul li{float:left;list-style:none;}
-->
</style>

</head>

<body>
<div id="demo">
<div id="indemo">
<div id="demo1">
<ul>
<li><img src="../images/1.jpg" border="0" /></li>
<li><img src="../images/2.jpg" border="0" /></li>
<li><img src="../images/3.jpg" border="0" /></li>
<li><img src="../images/4.jpg" border="0" /></li>
<li><img src="../images/5.jpg" border="0" /></li>
<li><img src="../images/6.jpg" border="0" /></li>
</ul>
</div>
<div id="demo2"></div>
</div>
</div>

</body>
</html>
<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(){
    alert(tab2.offsetWidth);
if(tab.scrollLeft<=0)
tab.scrollLeft+=tab2.offsetWidth
else{
tab.scrollLeft--;
}
}
window.onload=Marquee;
//var MyMar=setInterval(Marquee,speed);
//tab.οnmοuseοver=function() {clearInterval(MyMar)};
//tab.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)};
-->
</script>

左滚动链接导航

<!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>
<style type="text/css">
<!--
#demo {
background: #FFF;
overflow:hidden;
width: 200px;
}
#demo img {
width:200px;height:200px;
}
#indemo {
float: left;
width: 1300%;
}
#demo1 {
float: left;
}
#demo2 {
float: left;
}
ul li{float:left;list-style:none;}
-->
</style>

</head>

<body>
<div id="demo">
<div id="indemo">
<div id="demo1">
<ul>
<li><img src="../images/1.jpg" border="0" /></li>
<li><img src="../images/2.jpg" border="0" /></li>
<li><img src="../images/3.jpg" border="0" /></li>
<li><img src="../images/4.jpg" border="0" /></li>
<li><img src="../images/5.jpg" border="0" /></li>
<li><img src="../images/6.jpg" border="0" /></li>
</ul>
</div>
<div id="demo2"></div>
</div>
</div>

</body>
</html>
<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.offsetWidth
else{
tab.scrollLeft++;
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
-->
</script>

转载于:https://www.cnblogs.com/LoVeSW/p/3425277.html

aibusi2584

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
滚动链接导航

上滚动链接导航<!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"><...
复制链接

扫一扫