跑马灯效果、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必须单行显示,即内容必须 ...

随机推荐

element多层导航菜单
很久没写博客了原因就是懒, 刚下班今天写了个基于element导航菜单实现多层菜单(可以无限多层) 组件核心思想就是组件递归(这个有时候面试会问到) 然后就判断children有没有内容,没内容就是选 ...
Python+Android进行TensorFlow开发
Tensorflow是Google开源的一套机器学习框架,支持GPU.CPU.Android等多种计算平台.本文将介绍在Tensorflow在Android上的使用. Android使用Tensorf ...
Pocket+Evernote 打造个人知识库体系
俗话说巧妇难为无米之炊,还是那个不太恰当的例子. 写作就好比人类的消化系统,想要持续的输出...那么就要持续的输入... 今天就来说一说如何进行持续有效的输入. 信息处理过程先放一张图,这是我的整个 ...
html 5 cavans 简易祖玛
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
javascript的垃圾回收机制与内存管理
一.垃圾回收机制—GC Javascript具有自动垃圾回收机制(GC:Garbage Collecation),也就是说,执行环境会负责管理代码执行过程中使用的内存. 原理:垃圾收集器会定期(周期性 ...
【分布式锁】01-使用Redisson实现可重入分布式锁原理
前言主流的分布式锁一般有三种实现方式: 数据库乐观锁基于Redis的分布式锁基于ZooKeeper的分布式锁之前我在博客上写过关于mysql和redis实现分布式锁的具体方案:https:// ...
基于《仙剑奇侠传柔情版》利用Java的简单实现（一）
基于<仙剑奇侠传柔情版>利用Java的简单实现(一) 2018-12-01 23:55:36 by Louis 一,新建一个类GameFrame.class,具体代码如下: pack ...
search（3）- elastic4s-QueryDSL
elastic4s是elasticsearch一个第三方开发的scala语言终端工具库(Elastic4s is a concise, idiomatic, reactive, type safe S ...
矩阵快速幂-QuickPow
矩阵快速幂引入: 1.整数快速幂: 为了引出矩阵的快速幂,以及说明快速幂算法的好处,我们可以先求整数的幂.如果现在要算X^8:则 XXXXXXXX 按照寻常思路,一个一个往上面乘,则乘法运算进行7次. ...
IE浏览器下载文件中文文件名乱码问题解决
处理过程根据IE的F12中的log提示,是因为http头信息中的编码替换了html文件中的编码.我最初的思路是设置Tomcat默认编码,但是我发现我已经在Server.xml中设置过,想到这里我想到 ...

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

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

随机推荐

热门专题