zoukankan      html  css  js  c++  java
  • marquee 文字滚动

    实现滚动效果,只知道使用jquery的SuperSlide插件。在做青海项目时,由于设计尺寸是1400*900,却要求适应1024*768的屏幕,只得采用zoom整体缩放,但这个整体缩放下,由于chrome浏览器有最小12像素大小的字体限制,采用该插件滚动的文字就会产生重叠。最后是采用了超级复杂的判断浏览器,判断屏幕尺寸,再对原本的文字进行裁剪来解决。没想到html居然有一个marquee标签,可直接拿来用,不光不用外接插件,也不用对每条新闻高度不固定而产生空隙导致的不美观而头疼,因为SuperSlide每一条li是固定的,即使不固定,也会自动根据最长的那条来确定宽度,会导致标题短的那条产生多余的空白。

    插件方式:

    首先要引入js文件:<script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.js"></script>

    然后文中还要加js代码,div也要多套两个:

    <div class="txtMarquee-top">
      <div class="bd">
        <ul class="infoList">
          <li><a href="http://www.smhyj.gov.cn/shows.asp?id=4593&tp=49" target="_blank" title="全市首个省级现代农(渔)业综合区通过验收 2015-06-23">全市首个省级现代农(渔)业综合区通过验收 2015-06-23</a></li>
          <li><a href="http://www.smxlytcj.cn/shows.asp?id=465" target="_blank" title="三门平原绿化工作获黄旭明副省长批示肯定 2015-06-08">三门平原绿化工作获黄旭明副省长批示肯定 2015-06-08</a></li>
          <li><a href="http://www.smhyj.gov.cn/shows.asp?id=4587&tp=49" target="_blank" title="三门县水产技术推广站举办养殖技术培训班 2015-06-01">三门县水产技术推广站举办养殖技术培训班 2015-06-01</a></li>
        </ul>
      </div>
    </div>
    <script type="text/javascript">
    jQuery(".txtMarquee-top").slide({mainCell:".bd ul",autoPlay:true,effect:"topMarquee",vis:2,interTime:50});
    </script>

    用marquee代码很简洁:

    <ul class="infoList">
      <marquee behavior="scroll" onmouseover="this.stop()" style="WIDTH: 100%; HEIGHT:65px" onmouseout="this.start()" scrollamount="2" direction="up">
        <li><a href="http://www.smhyj.gov.cn/shows.asp?id=4593&tp=49" target="_blank" title="全市首个省级现代农(渔)业综合区通过验收 2015-06-23">全市首个省级现代农(渔)业综合区通过验收 2015-06-23</a></li>
        <li><a href="http://www.smxlytcj.cn/shows.asp?id=465" target="_blank" title="三门平原绿化工作获黄旭明副省长批示肯定 2015-06-08">三门平原绿化工作获黄旭明副省长批示肯定 2015-06-08</a></li>
        <li><a href="http://www.smhyj.gov.cn/shows.asp?id=4587&tp=49" target="_blank" title="三门县水产技术推广站举办养殖技术培训班 2015-06-01">三门县水产技术推广站举办养殖技术培训班 2015-06-01</a></li>
      </marquee>
    </ul>

    marquee的参数设置:

    behavior:设定滚动的方式

    alternate:来回滚动

    scroll: 重复滚动

    slide:不重复

    bgcolor:设定活动字幕的背景颜色。

    height设定活动字幕的高度

    width设定活动字幕的宽度

    loop设定滚动的次数,当loop=-1表示一直滚动下去,默认为-1

    scrollamount设定活动字幕的滚动速度,单位pixels

    scrolldelay设定活动字幕滚动两次之间的延迟时间,单位millisecond(毫秒)

    marquee常用到的两个事件: 
    onMouseOut="this.start()" 当鼠标移出该区域时;onMouseOver="this.stop()" 当鼠标移入该区域时

  • 相关阅读:
    shell 命名管道,进程间通信
    bash shell:重定向标准错误输出
    paramiko socket.error: Int or String expected
    django csrf_token生成
    shell基础知识
    复制vi全部内容到windows ctrl+shift+c
    linux配置bridge (不同网段)
    sdk shell下脚本.soc
    X86服务器BMC基板管理控制器介绍
    linux 开启vnc
  • 原文地址:https://www.cnblogs.com/wildorchid/p/4602158.html
Copyright © 2011-2022 走看看