跑马灯效果、jquery封装、$.fn和$.extend方法使用
2024-10-09 00:09:48
代码 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自定义插件
- B2C电子商务系统研发——商品SKU分析和设计(二)
- ireport5.6+jasperreport6.3开发(二)--web开发的配置
- poj1417(种类并查集+dp)
- rebuild new environment for DW step
- express的session函数
- Linux就这个范儿 第8章 我是Makefile
- iOS学习之C语言函数
- 从零单排Linux – 2 – 目录权限
- Subarray Sum Closest
- javascript操作HTML元素
- 一个可以跑的Hadoop的WordCount程序
- 关于EL表达式的生效时间(猜想)
- Tab选项卡的原生写法
- Swing-JList用法-入门
- 2017上海QCon之旅总结(上)
- Spring加载xml配置文件的方式 ApplicationContext
- Oracle单机Rman笔记[6]---记一次oracle脱机异地还原
- bootstrap modal 点击头部移动
- C++等语言中整型int等的取值范围计算方式