• Jquery无缝滚动


    <!--Style样式-->

    <style>
    *{margin:0;padding:0;}
    body{font-size:12px; font-family:"微软雅黑"}
    a{color:#333; text-decoration:none;}
    ul{list-style:none;}
    #marquee2{300px;height:25px;overflow:hidden; background:#EFEFEF; margin:20px auto 0;}
    #marquee2 ul li{float:left; padding:0 10px; line-height:25px;}
    </style>

    <!--body部分-->

    <div id="marquee2">
    <ul>
    <li><a href="#">新闻公告一</a><>
    <li><a href="#">新闻公告二新闻公告二新闻公告二新闻公告二</a><>
    <li><a href="#">新闻公告三新闻公告三</a><>
    <li><a href="#">新闻公告四新闻公告四新闻公告四</a><>
    <li><a href="#">新闻公告五新闻公告五新闻公告五</a><>
    <li><a href="#">新闻公告六新闻公告六新闻公告六</a><>
    </ul>
    </div>

    <!--两个js文件-->

    <script src="js/jquery-1.3.2.min.js"></script>
    <script src="js/jquery.kxbdMarquee.js"></script>

    <!--Jquery部分向左滚动-->
    <script>
    (function(){
    $("#marquee2").kxbdMarquee({isEqual:false});
    })();
    </script>

    <!--Jquery部分向右滚动-->
    <script>
    (function(){
    $("#marquee2").kxbdMarquee({isEqual:false,direction: "right"});
    })();
    </script>

    <!--Jquery部分向上滚动,向上滚动需要在style里取消浮动-->
    <script>
    (function(){
    $("#marquee2").kxbdMarquee({isEqual:false,direction: "up"});
    })();
    </script>

    <!--Jquery部分向上滚动,向下滚动需要在style里取消浮动-->
    <script>
    (function(){
    $("#marquee2").kxbdMarquee({isEqual:false,direction: "down"});
    })();
    </script>

  • 相关阅读:
    WEB前端:05_scroll滚动(图片/文字滚动)
    WEB前端:04_slider幻灯片(焦点图轮换)
    WEB前端:03_hover切换(显示/隐藏)
    概率统计
    概率统计
    线性代数
    线性代数
    线性代数
    线性代数
    大数据时代,Java通过JFreeChart分析和可视化数据
  • 原文地址:https://www.cnblogs.com/zcy1995/p/7773658.html
Copyright © 2020-2023  润新知