mCustomScrollbar.js 漂亮的滚动条插件 适应内
2019-01-06 本文已影响3人
滔滔逐浪
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>滚动条的实现</title>
<link rel="stylesheet" href="css/mCustomScrollbar.css">
<style>
/* .m-item{height: 50px;line-height: 50px;}*/
.hb_chx.active{display: block;}
.hb_chx{display: none;position: relative;width: 588px;height: 390px;position: fixed;top: 60%;left: 50%;z-index: 299;transform: translate(-50%,-50%);-webkit-transform: translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform: translate(-50%,-50%);color: #f1f3b3;background: url(image/bg_table.png)no-repeat;}
.hb_chx p{text-align: center;margin: 8px;}
.hb_chx table{width: 95%;margin:20px auto 10px auto;}
.hb_chx table,.hb_chx table th,.hb_chx table td{border: 1px solid #dd0002;border-collapse:collapse;}
.hb_chx table tr th{color: #ffe681;background: #700001;border-bottom: 0;padding: 8px 0;}
.hb_chx table tr td{color: #d0a679;text-align: center;padding: 5px 0;font-size: 15px;}
.hb_chx .scroll{height: 336px;}
.hb_chx .scroll .mCSB_inside > .mCSB_container {margin-right: 10px;}
.hb_chx a.close{background: url(image/close2.png)no-repeat;width: 28px;height: 28px;background-size: 100%;display: block;position: absolute;right: 5px;top: 5px;}
.hb_chx table tr td.ylq{color: #d0a679;font-size: 13px;}
.hb_chx table tr td.wlq{color: #ffd001;font-size: 13px;}
</style>
</head>
<body>
<div class="hb_chx">
<p>红包查询详细信息</p>
<a class="close" href="javascript:;"></a>
<div class="scroll mCustomScrollbar">
<table cellpadding="0" cellspacing="0" border="0">
<thead>
<tr>
<th>奖品名称</th>
<th>金额</th>
<th>时间</th>
<th>状态</th>
</tr>
</thead>
<tbody id="tbody">
</tbody>
</table>
</div></div>
</body>
<script src="js/jquery-1.8.0.min.js"></script>
<script src="js/jquery.mCustomScrollbar.min.js"></script>
<script src="js/jquery.tmpl.min.js"></script>
<script type="text/x-jquery-tmpl" id="tmpl-gun">
<tr>
<td>${name}</td>
<td>${money}</td>
<td>${time}</td>
<td class="${state==0?'wlq':state==1?'ylq':state==-1?'wlq':''}">${state==0?'未领取':state==1?'已领取':state==-1?'已取消':''}</td>
</tr>
</script>
<script type="text/javascript">
$(function () {
$("#tbody").html("");
var data="[{\"money\":10,\"name\":\"现金10元\",\"state\":1,\"time\":\"2018-12-17 20:26:42\"},{\"money\":10,\"name\":\"现金10元\",\"state\":1,\"time\":\"2018-12-17 20:26:36\"},{\"money\":10,\"name\":\"现金10元\",\"state\":1,\"time\":\"2018-12-17 20:26:36\"}";
$("#tmpl-gun").tmpl(JSON.parse(data)).appendTo("#tbody");
$(".hb_chx").addClass('active').animate({top: "50%"});
})
//关闭弹窗
$("a.close").on('click',function () {
$('.hb_chx').css("display","none");
})
</script>
</html>
image
