您的位置：首页 > 编程语言 > ASP

Asp.net marquee与js实现滚动效果

2016-05-10 17:52 447 查看

1、HTML---marquee

<!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=gb2312" />
<title>滚动练习</title>
</head>

<body>
<marquee direction="up" scrollamount="5" behavior="scroll" width="190" height="140" onmouseover="this.stop()" onmouseout="this.start()" >
<p><h2><a href="Click'>http://www.baidu.com">Click to Baidu </a></h2>

<p><h2><a href="Click'>http://www.baidu.com">Click to Baidu </a></h2>

<p><h2><a href="Click'>http://www.baidu.com">Click to Baidu </a></h2>

<p><h2><a href="Click'>http://www.baidu.com">Click to Baidu </a></h2>

<p><h2><a href="Click'>http://www.baidu.com">Click to Baidu </a></h2>

</marquee>
</body>
</html>

marquee参数：

BGColor：滚动文本框的背景颜色。

Direction：滚动方向设置，可选择Left、Right、up和down。

scrolldelay：每轮滚动之间的延迟时间，越大越慢。

scrollamount：一次滚动总的时间量，数字越小滚动越慢。

Behaviour：滚动方式设置，Scroll（循环滚动）lide（单次滚动）、Alternate（来回滚动）。

Align：文字的对齐方式设置。可选择Middle(居中)、Bottom(居下)还是Top(居上)。

Width：滚动文本框的宽度，输入一个数值后从后面的单选框选择in
Pixels(按像素)或in
Percent(按百分比)。

Height：滚动文本框的高度，输入一个数值后从后面的单选框选择in
Pixels(按像素)或in
Percent(按百分比)。

loop：滚动次数。默认为infinite

hspace、vspace：前后、上下的空行。

 

2、js实现滚动效果

 <style type="text/css">

    <!-- 首先定义好css样式：

    #demo {

    background: #FFF;

    overflow:hidden;

    border: 1px dashed #CCC;

    height: 100px;

    text-align: center;

    float: left;

    }

    #demo img {

    border: 3px solid #F2F2F2;

    display: block;

    }

    -->

    </style>

    向上滚动

    <div id="demo">

    <div id="demo1">

    <a href="#"><img src="#" border="0" /></a>

    <a href="#"><img src="#" border="0" /></a>

    <a href="#"><img src="#" border="0" /></a>

    <a href="#"><img src="#" border="0" /></a>

   <a href="#"><img src="#" border="0" /></a>

    </div>

    <div id="demo2"></div>

    </div>

    <script>

    <!--

    var speed=10; //数字越大速度越慢

    var tab=document.getElementByIdx_x("demo");

    var tab1=document.getElementByIdx_x("demo1");

    var tab2=document.getElementByIdx_x("demo2");

    tab2.innerHTML=tab1.innerHTML; //克隆demo1为demo2

    function Marquee(){

    if(tab2.offsetTop-tab.scrollTop<=0)//当滚动至demo1与demo2交界时

    tab.scrollTop-=tab1.offsetHeight //demo跳到最顶端

    else{

    tab.scrollTop++

    }

    }

    var MyMar=setInterval(Marquee,speed);

    tab.onmouseover=function() {clearInterval(MyMar)};//鼠标移上时清除定时器达到滚动停止的目的

    tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//鼠标移开时重设定时器

    -->

    </script>

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

    图片向下无缝滚动只需要改变一下js代码即可

    <script>

    <!--

    var speed=10; //数字越大速度越慢

    var tab=document.getElementByIdx_x("demo");

    var tab1=document.getElementByIdx_x("demo1");

    var tab2=document.getElementByIdx_x("demo2");

    tab2.innerHTML=tab1.innerHTML; //克隆demo1为demo2

    tab.scrollTop=tab.scrollHeight

    function Marquee(){

    if(tab1.offsetTop-tab.scrollTop>=0)//当滚动至demo1与demo2交界时

    tab.scrollTop+=tab2.offsetHeight //demo跳到最顶端

    else{

    tab.scrollTop--

    }

    }

    var MyMar=setInterval(Marquee,speed);

    tab.onmouseover=function() {clearInterval(MyMar)};//鼠标移上时清除定时器达到滚动停止的目的

    tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//鼠标移开时重设定时器

    -->

    </script>

上面两段js代码一对比，看出端倪来了吗？原来就是一个运算的问题。tab.scrollTop+=tab2.offsetHeight ； tab.scrollTop++ 这个是向上，tab.scrollTop-=tab2.offsetHeight ； tab.scrollTop-- 这个是乡下。

  *****************************************************************************************************

   图片向左无缝滚动

    <style type="text/css">

    <!--

    #demo {

           background: #FFF;overflow:hidden;border: 1px dashed #CCC;width: 500px;

          }

    #demo img {

           border: 3px solid #F2F2F2;

             
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航