跑马灯效果、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基础类型(1)
整数整数在Python中的关键字用int来表示; 整型在计算机中运于计算和比较在32位机器上int的范围是: -2**31-2**31-1,即-2147483648-2147483647 在64 ...
search（1）- elasticsearch结构概念
上篇提到选择了elasticsearch ES作为专业化搜索引擎的核心,这篇讨论一下ES的基本结构和应用概念.首先,从硬结构方面来讲:ES是在一个集群(cluster)环境里运行的,所以ES应该具备高 ...
ESLint {} 内部强制有空格 .eslintrc.js 配置文件 'object-curly-spacing': ["error", "always"],
module.exports = { root: true, 'extends': [ 'plugin:vue/essential', '@vue/standard' ], rules: { 'obj ...
【Weiss】【第03章】练习3.12：单链表倒置
[练习3.12] a.编写一个非递归过程以O(N)时间反转单链表. b.使用常数附加空间编写一个过程以O(N)时间反转单链表. Answer: 这题的b貌似没啥意义,在a小题里直接用头插法,不断地将头 ...
记一次:Windows的Socket编程学习和分析过程
Socket编程依赖于:WS2_32.dll --- 服务端 --- .导入我们需要的函数 #incldue <windows.h> //#include<WinSock2.h> ...
JavaScript零宽字符
什么是零宽字符一种不可打印的Unicode字符, 在浏览器等环境不可见, 但是真是存在, 获取字符串长度时也会占位置, 表示某一种控制功能的字符. 常见的零宽字符有哪些零宽空格(zero-widt ...
MySQL笔记（6）-- SQL更新语句日志系统流程
一.背景在上一篇[MySQL笔记(5)-- SQL执行流程,MySQL体系结构]中讲述了select查询语句在MySQL体系中的运行流程,从连接器开始,到分析器.优化器.执行器等,最后到达存储引擎. ...
MS15-034漏洞复现、HTTP.SYS远程代码执行漏洞
#每次命令都百度去找命令,直接弄到博客方便些: 漏洞描述: 在2015年4月安全补丁日,微软发布的众多安全更新中,修复了HTTP.sys中一处允许远程执行代码漏洞,编号为:CVE-2015-1635( ...
Android项目目录结构模板以及简单说明
1) src 文件编写java代码的文件目录,遵循java的命名规范.分包 2) gen 文件包含了android的资源文件的标识符,是不需要程序员维护,是自动添加的 3) asse ...
[模板] trie树 (字典树)
本文基于https://www.cnblogs.com/TheRoadToTheGold/p/6290732.html #include<bits/stdc++.h> using name ...

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

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

随机推荐

热门专题