时间戳

首页 > 技术文章 > 跑马灯效果、jquery封装、$.fn和$.extend方法使用

跑马灯效果、jquery封装、$.fn和$.extend方法使用

hss-blog 2018-05-15 14:23 原文

代码 index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" href="common.css">
    <link rel="stylesheet" href="data.css">
    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script src="jquery.js"></script>
    <script src="scroll.js"></script>
</head>
<body>
    <div id="message">
        <h5>报警信息实时播报</h5>
        <div class="maquee" style="margin-top: 5px;overflow: hidden; height: 300px;">
            <ul class="message-left">
                <li class="message-list">
                    <div class="message-title">[<span>1</span>]</div>
                    <div class="message-center">
                        <p class="message-time">2018-04-28  14:11</p>
                        <p class="message-state">状态：<span>预警</span></p>
                        <p class="message-place">位置：<span>济南市高新区工业南路</span></p>
                    </div>
                </li>
                <li class="message-list">
                    <div class="message-title">[<span>2</span>]</div>
                    <div class="message-center">
                        <p class="message-time">2018-04-28  14:11</p>
                        <p class="message-state">状态：<span>警报</span></p>
                        <p class="message-place">位置：<span>济南市高新区工业南路</span></p>
                    </div>
                </li>
                <li class="message-list">
                    <div class="message-title">[<span>3</span>]</div>
                    <div class="message-center">
                        <p class="message-time">2018-04-28  14:11</p>
                        <p class="message-state">状态：<span>已处理</span></p>
                        <p class="message-place">位置：<span>济南市高新区工业南路</span></p>
                    </div>
                </li>
                <li class="message-list">
                    <div class="message-title">[<span>4</span>]</div>
                    <div class="message-center">
                        <p class="message-time">2018-04-28  14:11</p>
                        <p class="message-state">状态：<span>预警</span></p>
                        <p class="message-place">位置：<span>济南市高新区工业南路</span></p>
                    </div>
                </li>
                <li class="message-list">
                    <div class="message-title">[<span>5</span>]</div>
                    <div class="message-center">
                        <p class="message-time">2018-04-28  14:11</p>
                        <p class="message-state">状态：<span>已处理</span></p>
                        <p class="message-place">位置：<span>济南市高新区工业南路</span></p>
                    </div>
                </li>
                <li class="message-list">
                    <div class="message-title">[<span>6</span>]</div>
                    <div class="message-center">
                        <p class="message-time">2018-04-28  14:11</p>
                        <p class="message-state">状态：<span>已处理</span></p>
                        <p class="message-place">位置：<span>济南市高新区工业南路</span></p>
                    </div>
                </li>
                <li class="message-list">
                    <div class="message-title">[<span>7</span>]</div>
                    <div class="message-center">
                        <p class="message-time">2018-04-28  14:11</p>
                        <p class="message-state">状态：<span>警报</span></p>
                        <p class="message-place">位置：<span>济南市高新区工业南路</span></p>
                    </div>
                </li>
                <li class="message-list">
                    <div class="message-title">[<span>8</span>]</div>
                    <div class="message-center">
                        <p class="message-time">2018-04-28  14:11</p>
                        <p class="message-state">状态：<span>已处理</span></p>
                        <p class="message-place">位置：<span>济南市高新区工业南路</span></p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</body>
<script>
    /* 轮播 */
    $(function(){
        $("div.maquee").myScroll({
            speed:40, //数值越大，速度越慢
            rowHeight:50 //li的高度
        }).css('border','5px solid #000');
    });
</script>
</html>

脚本  script.js

// JavaScript Document
(function($){
    $.fn.myScroll = function(options){
    //默认配置
    var defaults = {
        speed:40,  //滚动速度,值越大速度越慢
        rowHeight:50 //每行的高度
    };
    
    var opts = $.extend({}, defaults, options),intId = [];
    
    function marquee(obj, step){
    
        obj.find(".message-left").animate({
            marginTop: '-=1'
        },0,function(){
                var s = Math.abs(parseInt($(this).css("margin-top")));
                if(s >= step){
                    $(this).find(".message-list").slice(0, 1).appendTo($(this));
                    $(this).css("margin-top", 0);
                }
            });
        }
        
        return this.each(function(i){
            var sh = opts["rowHeight"],speed = opts["speed"],_this = $(this);
            intId[i] = setInterval(function(){
                if(_this.find(".message-left").height()<=_this.height()){
                    clearInterval(intId[i]);
                }else{
                    marquee(_this, sh);
                }
            }, speed);

            _this.hover(function(){
                clearInterval(intId[i]);
            },function(){
                intId[i] = setInterval(function(){
                    if(_this.find(".message-left").height()<=_this.height()){
                        clearInterval(intId[i]);
                    }else{
                        marquee(_this, sh);
                    }
                }, speed);
            });
        
        });

    }

})(jQuery);

css common.css

/* 自定义 */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,input,button,textarea,p,th,td{
    margin:0; padding:0;
}
body,html{
    font-family:"微软雅黑"!important;
    width: 100%;
    height: 100%;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #333;
    background-color: #ffffff;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 
}
body{overflow-y: auto;}
td,th,caption {font-size:14px;}
h1, h2, h3, h4, h5, h6 {font-weight:normal; font-size:100%;}
address, caption, cite, code, dfn, em, strong, th, var { 
    font-style:normal; 
    font-weight:normal;
}
img {border:none; vertical-align:middle;}
ol,ul,li {list-style:none; list-style-type:none;}
input, textarea, select, button { 
    font:14px Verdana,Helvetica,Arial,sans-serif;
    border: 0;
    outline:none;
}
table {border-collapse:collapse;border-spacing:0;}
p{word-wrap:break-word;} 
small{font-size:12px;} 
sup {vertical-align:text-top;} 
sub{vertical-align:text-bottom;} 
span{display: inline-block;}
button{min-width: 50px;height: 35px;line-height: 35px;}
a,button {
    text-decoration: none;
    color: #000000;
    font-size: 14px;
    border-radius: 5px;
    outline: none;
}
a:focus,a:hover,button:hover {
    color: #23527c;
    cursor: pointer;
    text-decoration: none;
}
b,strong {font-weight: 600;}
i {font-style: normal;}
hr {
    height: 0px;
    margin-top: 10px;
    margin-bottom: 10px;
    border-top: 1px solid #eee;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}
button::-moz-focus-inner, input::-moz-focus-inner {
    padding: 0px;
    border: 0px;
}
input{width: 150px;display: inline-block;}
input[type=checkbox], input[type=radio] {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0px;
}
input[type=submit]{
    width: 100px;
    height: 35px;
    border-radius: 5px;
    text-align: center;
    line-height: 35px;
    background-color: #4a9ede;
}
input[type=search] {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    -webkit-appearance: textfield;
}
input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration {
    -webkit-appearance: none;
}
table {
    border-spacing: 0;
    border-collapse: collapse;
    border-top: 1px solid #adadad;
    border-left: 1px solid #adadad;
}
td, th {
    border-right: 1px solid #adadad;
    border-bottom: 1px solid #adadad;
}
h1 {font-size: 36px;}
h2 {font-size: 30px;}
h3 {font-size: 24px;}
h4 {font-size: 20px;}
h5 {font-size: 16px;}
h6 {font-size: 14px;}

css  data.css

body,html{
    font-family: '微软雅黑';
    min-width: 1360px;
    min-height: 768px;
    overflow: hidden;
    color:#FFF;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    bottom: 0;
}

/* 右侧 */
#message{
    height: 300px;
    overflow: hidden;
}

/* 右侧实时播报 */
#message h5{
    height: 35px;
    line-height: 35px;
    font-size: 20px;
    text-align: center;
    color: #d1ecFF;
    font-weight: 600;
}
.message-left{
    padding: 0 10px;
    color:#99D1E2;
}
.message-list{
    border-bottom: 1px solid #248494;
    height: 40px;
    padding: 5px 0;
}
.message-list>div{
    float: left
}
.message-title{
    width: 15%;
    text-align: center;
    font-weight: 600;
}
.message-center{
    width: 85%;
}
.message-center p{
    width: 100%;
    padding-left: 20px;
    height: 20px;
    line-height: 20px;
    font-size: 14px;
    -moz-box-sizing:border-box;
    -ms-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.message-time,.message-state{
    float: left;
}
.message-time{
    width: 60%!important;
}
.message-state{
    width: 40%!important;
}

 

推荐阅读