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

随机推荐

【Python challenge】通关代码及攻略（0-11）
前言: 最近找到一个有关python的游戏闯关,这是游戏中的思考及通关攻略最开始位于:http://www.pythonchallenge.com/pc/def/0.html 第0关题目分析提示 ...
JAVA设计模式之-模板方法+（钩子函数）
1.定义允许子类对父类的一个或多个步骤进行重写.例如聚合支付场景中有很多共同的步骤,比如验签.四要素验证.风控等等,但是在支付的时候走不同的渠道可能在调用和参数上有很大的不同,比如有的是xml,有的 ...
网页中三角型的CSS实现
我们在使用CSS框架的时候,经常会用到下拉框组件,一般该组件里面有个下三角.很多网上用到三角形,如图所示,这个三角形是如何实现的呢? 1.使用CSS可以实现,先来复习一CSS盒子模型相关知识.给出如下 ...
VScode 格式化代码保存时使用ESlint修复代码
前言 eslint vs code 新买的电脑啊啊西装VScode 配置格式化代码保存时使用ESlint修复代码头快炸了,不建议初学者用,太费时间了: 终于搞定---再也不要担心缩进,函数(名)和 ...
juery 实现选项卡
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
玩转控件:重写/重绘Dev中MessageBox弹窗控件
很久没有更新博客了,本想着直接发一篇<手撕ERP>系列,从控件重写.重绘,到框架搭建,再到部分模块实现+业务的.但是每次动手的时候,都觉得难以下手.直接从数据库设计开始吧,模块设计还没定下 ...
java-3个例子（新手）
//创建的一个包名. package ri0318; //创建的一个类. public class Li3 { //公共静态的主方法. public static void main(String[] ...
[剑指offer]14-1.剪绳子
14-1.剪绳子方法一动态规划思路:递归式为f(n)=max(f(i), f(n-i)),i=1,2,...,n-1 虽然我现在也没有彻底明白这个递归式是怎么来的,但用的时候还是要注意一下.f( ...
学习笔记----C语言的面向对象
2020-03-26 21:27:17 面向对象的编程语言都有一个类的概念,像Java.python等.类是对特定数据的特定操作的集合体.它包含两个范畴:数据和操作.C语言是没有类的概念的,但是 ...
linux环境下的时间编程
Linux下提供了丰富的api以供开发者们处理和时间相关的问题.然而这些接口看似各自为政实则有有着千丝万缕的联系,在学习和时间中引发了各种各样的混乱.因此时间处理成为了许多Linux开发者的梦魇,遇到 ...

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

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

随机推荐

热门专题