zoukankan      html  css  js  c++  java
  • jQuery + css 公告从左往右滚动

    $(function() {
        // 公告滚动
        $(".notice-content").textScroll();
    });
    
    /**
     * 从右往左滚动文字
     * @returns {undefined}
     */
    $.fn.textScroll = function() {
        // 滚动步长(步长越大速度越快)
        var step_len = 60;
        var this_obj = $(this);
        var child = this_obj.children();
        var this_width = this_obj.width();
        var child_width = child.width();
        var continue_speed = undefined;// 暂停后恢复动画速度
        // 初始文字位置
        child.css({
            left: this_width
        });
    
        // 初始动画速度speed
        var init_speed = (child_width + this_width) / step_len * 1000;
    
        // 滚动动画
        function scroll_run(continue_speed) {
            var speed = (continue_speed == undefined ? init_speed : continue_speed);
            child.animate({
                left: -child_width
            }, speed, "linear", function() {
                $(this).css({
                    left: this_width
                });
                scroll_run();
            });
        }
    
        // 鼠标动作
        child.on({
            mouseenter: function() {
                var current_left = $(this).position().left;
                $(this).stop();
                continue_speed = (-(-child_width - current_left) / step_len) * 1000;
            },
            mouseleave: function() {
                scroll_run(continue_speed);
                continue_speed = undefined;
            }
        });
    
        // 启动滚动
        scroll_run();
    };
    

      

                    <div class="notice-title">公告:</div>
                    <div class="notice-content">
                        <div class="notice-text"><span>公告内容</span></div>
                    </div>
    

      

    .notice-title {
                color: #fff;
            }
    
            .notice-content {
                position: relative;
                 800px;
                height: 30px;
                white-space: nowrap;
                overflow: hidden;
                float: left;
                margin-left: 55px;
                margin-top: -30px;
    
                /*背景透明度
                background-color: #fff;
                filter:alpha(opacity=10);
                -moz-opacity:0.5;
                -khtml-opacity: 0.5;
                opacity: 0.5;
                */
            }
            .notice-text {
                color: red;
                font-size: 14px;
                position: absolute;
            }
    

      

  • 相关阅读:
    <Java>第六次作业
    <Java>第五次作业
    <<JAVA技术>>第四次作业
    第三次Java作业--计科1501--李俊
    第二次Java作业--计科1501李俊
    《Java技术》第一次作业
    如何在IDEA中创建Web项目并部署到Tomcat中运行
    MySQL安装与配置(从未出错)
    java开发中的23种设计模式
    java.util包下的类及常用方法
  • 原文地址:https://www.cnblogs.com/zllz5230/p/4586628.html
Copyright © 2011-2022 走看看