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

随机推荐

脚本写一行echo也能写出bug ? glob了解一下
背景最近处理一个 bug 很有意思,有客户反馈某个配置文件解析失败了,出错的那行的内容就只有一个字母 a. 最开始以为是谁改动了处理的脚本,但要到了问题代码中的脚本,比较发现跟库上是一样的. 又经过 ...
c++第二周阶段小测2
函数参数已完成(全部是正确答案) 1 [单选题] 以下关于函数参数的说法,不正确的是 A. 函数调用时,先将实参的值按照位置传递给对应的形参. B. 实参与形参的个数及顺序不必一一对应. ...
C语言程序设计（三）简单的算术运算和表达式
第三章简单的算术运算和表达式算数运算符:一元.二元.三元(条件运算符) 1/2是整型除法,1.0/2是浮点数除法求余运算(%)限定参与运算的两个操作数必须为整数,不能对两个实型数据进行求余运算 ...
selenium 爬boss
# 有问题 from selenium import webdriver import time from lxml import etree class LagouSpider(object): d ...
scrapy启动
创建项目在开始爬取之前,您必须创建一个新的Scrapy项目. 进入您打算存储代码的目录中,运行下列命令: scrapy startproject scrapytest 第一种scrapy gensp ...
Vue2.0 【第二季】第4节 Vue的生命周期（钩子函数）
目录 Vue2.0 [第二季]第4节 Vue的生命周期(钩子函数) 第4节 Vue的生命周期(钩子函数) Vue2.0 [第二季]第4节 Vue的生命周期(钩子函数) 第4节 Vue的生命周期(钩子函 ...
div中单行文字垂直水平居中
1.div中单行文字垂直水平居中.条件:外层div高度已经给定.代码如下: 复制代码代码如下: <style type="text/css">.div3{border: ...
[BUG]微信浏览器 iOS input 失焦页面不回弹
描述 ios13. ios中,input唤醒软键盘后,body整体会向上滚动,如果input框输入完成确定后,如果页面在最底部则不回弹,导致fixed布局实际效果上移,fixed布局内按钮点不到. 如 ...
Python3 分数
limit_denominator()定义:通过限制分母的大小来取一个近似值提高精度.格式:fractionobject.limit_denominator('分母最大值') denominator定 ...
使用Eclipse开发python
第一步:下载python插件http://sourceforge.net/projects/pydev/files/pydev/PyDev%204.1.0/第二步:在Eclipse上安装插件a.假设E ...

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

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

随机推荐

热门专题