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

代码 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;

}

跑马灯效果、jquery封装、$.fn和$.extend方法使用的更多相关文章

Android使用TextView实现跑马灯效果(自定义控件)
对于一个长的TetxView 折行显示是一个很好的办法,另一种方法就是跑马灯显示(单行滚动) 1.折行显示的长TextView <LinearLayout xmlns:android=" ...
TextView跑马灯效果
转载:http://www.2cto.com/kf/201409/330658.html 一.只想让TextView显示一行,但是文字超过TextView的长度怎么办?在开头显示省略号 android ...
Android_TextView之跑马灯效果
对于android控件中的TextView,相信大家一定不陌生,在显示文本内容时十分方便.不过我在使用时遇到一个小问题,就是当文字交多时,如何为用户进行展示.今天就为大家介绍一种解决方案--跑马灯效果 ...
android中实现跑马灯效果以及AutoCompleteTestView与MultiAutoCompleteTextView的学习
跑马灯效果 1.用过属性的方式实现跑马灯效果属性: android:singleLine="true" 这个属性是设置TextView文本中文字 ...
Android 实现多行文本跑马灯效果
Android TextView 实现跑马灯的效果很简单,只要加三个属性就可以了. android:ellipsize="marquee" android:focusable=&q ...
android:ellipsize实现跑马灯效果总结（转）
最近无意间看到了涉及到跑马灯效果的代码,于是在网上查阅了很多资料,在这里对自己看的一些文章进行一下总结,顺便加上自己的一些体会. 让我们一步步逐渐向下. 首先我们要实现走马灯这样一个效果,通常来说 ...
flex 简单跑马灯效果（竖着显示）
<mx:Move id="move_area" target="{VBox_AreaWarning}"/> //move效果,模拟跑马灯 <s ...
Dom操作--跑马灯效果
这里给园友们演示的是Dom操作实现跑马灯效果,相信我们很多人都用Winform实现过跑马灯效果,其中的关键就是Tirm控件,那么在Dom操作中是用setInterval方法来实现隔一段时间执行一段代码 ...
[Android1.5]TextView跑马灯效果
from: http://www.cnblogs.com/over140/archive/2010/08/20/1804770.html 前言这个效果在两周前搜索过,网上倒是有转载,可恨的是转载之后 ...
Android学习总结——TextView跑马灯效果
Android系统中TextView实现跑马灯效果,必须具备以下几个条件: 1.android:ellipsize="marquee" 2.TextView必须单行显示,即内容必须 ...

随机推荐

简述N种排序算法
排序算法概述排序算法是程序员日常很常见的算法,基本上每天都会使用排序,在这里将进行一下总结. 排序算法大致可分为比较类排序和非比较类排序二种,其核心区别可以简单的理解为非比较类排序是对比较类排序之前 ...
SQL Server 存储过程函数和sql语句区别
存储过程与sql语句存储过程的优点: 1.具有更好的性能存储过程是预编译的,只在创建时进行编译,以后每次执行存储过程都不需再重新编译, 而一般 SQL 语句每执行一次就编译一次,因此使用存 ...
python 异步请求
这是循环请求10次页面.总时间大概是10秒左右,如果是普通的循环请求10次页面而不添加异步的话,时间大概在30秒以上,当然这个数据可能有误,因为有网速的问题存在,但大体的效果应该是不变的. impor ...
Python 装饰器（无参，有参、多重））
Python装饰器介绍在Python中,装饰器(decorator)是在闭包的基础上发展起来的. 装饰器的实质是一个高阶函数,其参数是要装饰的函数名,其返回值是完成装饰的函数名,其作用是为已经存在的 ...
Expression表达式目录树
一.初识Expression 1.在上一篇我们讲到了委托(忘记了可以在看看,点赞在看养成习惯),今天要讲的Expression也和委托有一点点关系吧(没有直接关系,只是想要大家看看我其他的文章),Ex ...
(转)springBoot 配置信息一览
原文链接:https://cloud.tencent.com/developer/article/1360699
json到底是什么？？？？？？
JSON(JavaScript Object Notation)是一种基于JavaScript语法子集的开放标准数据交换格式.JSON是基于文本的,轻量级的,通常被认为易于读/写. 通俗解释: 1.j ...
为什么Mysql的常用引擎都默认使用B+树作为索引？
一.前言为了讲清楚这个问题,我们要先了解什么是索引. 我记得刚刚学习数据库的时候,老师喜欢用书本的目录来类比数据库的索引,并告诉我们索引能够像目录一样,让我们更快地找到想要找到的数据. 如果是第一次 ...
Cobait Strike的socks与ew代理使用
cobait strike介绍 Cobalt Strike 一款以 metasploit 为基础的 GUI 的框架式渗透测试工具,集成了端口转发.服务扫描,自动化溢出,多模式端口监听,win exe ...
JS 冒泡排序详解
冒泡排序原理:比较相邻两个数的大小,如果第一个数大于第二个数,那么交换位置,从第一位数开始,对后面每一对相邻的数据进行同样的比较和交换,直到最后没有任何一位需要进行比较大小和交换: 思路演算: arr ...

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

跑马灯效果、jquery封装、$.fn和$.extend方法使用的更多相关文章

随机推荐

热门专题