js 效果 大记事-横向-重播
最近公司要弄个大记事的功能，还要求是横向的，在网上找了好多插件感觉多不符合要求，无奈自己写了个，比较粗糙，给大家分享下.
HTML代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="Content/css/chronicle.css"/>
<link rel="stylesheet" type="text/css" href="Content/css/font-awesome.css"/>
<script type="text/javascript" src="Content/js/jquery-1.11.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="Content/css/bootstrap.css"/>
<script type="text/javascript" src="Content/js/bootstrap.js"></script>
</head>
<body>
<div class="col-lg-12 chronicle" style="margin-top:40px;padding:0px 40px">
<h5>大记事 <a href="javascript:;" title="重播" class="chronicle_paly"><i class="fa fa-toggle-right"></i></a></h5>
<div class="chronicle_content">
<ul>
<li>
<i class="fa fa-globe"></i>
<div>
<p>2016/2/12</p>
<p>项目部成了</p>
<p></p>
</div>
</li>
<li>
<i class="fa fa-globe"></i>
<div>
<p>2016/2/12</p>
<p>项目部成了</p>
<p></p>
</div>
</li>
<li>
<i class="fa fa-globe"></i>
<div>
<p>2016/2/12</p>
<p>项目部成了</p>
<p></p>
</div>
</li>
<li>
<i class="fa fa-globe"></i>
<div>
<p>2016/2/12</p>
<p>项目部成了</p>
<p></p>
</div>
</li>
<li>
<i class="fa fa-globe"></i>
<div>
<p>2016/2/12</p>
<p>项目部成了</p>
<p></p>
</div>
</li>
<li>
<i class="fa fa-globe"></i>
<div>
<p>2016/2/12</p>
<p>项目部成了</p>
<p></p>
</div>
</li>
<li>
<i class="fa fa-globe"></i>
<div>
<p>2016/2/12</p>
<p>项目部成了</p>
<p></p>
</div>
</li>
<li>
<i class="fa fa-globe"></i>
<div>
<p>2016/2/12</p>
<p>项目部成了</p>
<p></p>
</div>
</li>
<li>
<i class="fa fa-globe"></i>
<div>
<p>2016/2/12</p>
<p>项目部成了</p>
<p></p>
</div>
</li>
<li>
<i class="fa fa-globe"></i>
<div>
<p>2016/2/12</p>
<p>项目部成了</p>
<p></p>
</div>
</li>
<li>
<i class="fa fa-globe"></i>
<div>
<p>2016/2/12</p>
<p>项目部成了</p>
<p></p>
</div>
</li>
<li>
<i class="fa fa-globe"></i>
<div>
<p>2016/2/12</p>
<p>项目部成了</p>
<p></p>
</div>
</li>
<li>
<i class="fa fa-arrow-circle-right lastfa"></i>
</li>
</ul>
</div>
</div>
<script type="text/javascript" src="Content/js/chronicle.js"></script>
</body>
</html>
JS代码：
var moveleft = false;
var x1 = 0;
var x2 = 0;
var y1 = 0;
var y2 = 0;
var _x = 0;
var _y = 0;
var position_left = 1;
var max_left = 0;
$(function () {
$(".chronicle_content ul").css("width", $(".chronicle_content ul li").length * 220)
chronicle(0);
var $splitObject = $(".chronicle_content")
$(".chronicle_paly").click(function () {
$(".chronicle_content ul li").css({
"width": "0px",
"margin-left": "0px",
});
$(".chronicle_content ul").css("left", "0px");
$(".chronicle_content ul li").find("div").css({
"bottom": "1600%"
});
$(".lastfa").hide();
chronicle(0);
})
$splitObject.mousedown(function (e) {
var e = e || event;
_x = x1 = e.pageX;
_y = y1 = e.pageY;
$(document).mousemove(function (e) {
var ev = ev || event;
x2 = ev.pageX;
y2 = ev.pageY;
if (x2 < x1) {
//if ($splitObject.position().left <= 30) { return; }
moveleft = true;
}
else if (x2 > x1) {
moveleft = false;
}
else {
return;
}
if (position_left == 1) {
position_left = $(".chronicle_content ul").position().left;
max_left = position_left;
}
if (position_left >= 0) {
position_left = 0;
}
if (position_left <= max_left) {
position_left = max_left;
}
position_left -= (x1 - x2);
if (0 >= position_left >= -1100) {
$splitObject.find("ul").css({ left: position_left + "px" });
}
x1 = x2;
y1 = y2;
})
})
$(document).mouseup(function (e) {
$(document).unbind("mousemove");
})
})
var chronicle_content_liwidth = 200;
var maxeq = parseInt($(".chronicle_content").width() / 220);
var timeout = 0;
function chronicle(eq) {
var sw = setTimeout(function () {
$(".chronicle_content ul li").eq(eq).css({
"width": chronicle_content_liwidth + "px",
"margin-left": "20px",
});
clearTimeout(sw);
}, timeout)
var s = setTimeout(function () {
var right = $(".chronicle_content ul li").eq(eq).find("div").width();
$(".chronicle_content ul li").eq(eq).find("div").css({
"bottom": "300%",
"right": "-" + (right / 2 + 20) + "px"
});
clearTimeout(s);
eq++;
if (eq <= $(".chronicle_content ul li").length) {
var eqadd = 1;
if (eq == $(".chronicle_content ul li").length) {
$(".lastfa").show();
eqadd = 0;
}
if (eq >= maxeq) {
var eq_left = (-((eq - maxeq + eqadd) * 220));
$(".chronicle_content ul").css("left", +eq_left + "px");
timeout = 500;
}
chronicle(eq);
}
}, 500 + timeout)
}
css 代码：
html, body {
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}
.chronicle {
height: 150px;
}
.chronicle h5 {
width: 80px;
border-bottom: 2px solid #1C86CE;
padding-bottom: 5px;
font-size: 18px;
font-weight: 600;
color: #666;
}
.chronicle_content {
width: 100%;
height: 130px;
float: left;
overflow: hidden;
position: relative;
}
.chronicle_content:hover {
cursor:e-resize;
}
.chronicle_content ul {
position: absolute;
left: 0px;
top: 80%;
padding: 0px;
margin: 0px;
transition: left 0.5s;
-moz-transition: left 0.5s; /* Firefox 4 */
-webkit-transition: left 0.5s; /* Safari and Chrome */
-o-transition: left 0.5s; /* Opera */
}
.chronicle_content ul li {
width: 0px;
height: 10px;
position: relative;
background: #1C86CE;
list-style: none;
transition: width 0.5s;
-moz-transition: width 0.5s; /* Firefox 4 */
-webkit-transition: width 0.5s; /* Safari and Chrome */
-o-transition: width 0.5s; /* Opera */
float: left;
}
.chronicle_content ul li i.fa {
position: absolute;
right: -22px;
top: -11px;
color: #1C86CE;
font-size: 28px;
}
.chronicle_content ul li div {
position: absolute;
bottom: 1600%;
background: #1C86CE;
border-radius: 5px;
padding: 10px;
transition: bottom 0.5s;
-moz-transition: bottom 0.5s; /* Firefox 4 */
-webkit-transition: bottom 0.5s; /* Safari and Chrome */
-o-transition: bottom 0.5s; /* Opera */
color: #fff;
}
.chronicle_content ul li div p {
font-size: 12px;
margin: 0px;
margin-bottom: 10px;
}
.lastfa {
display:none;
}
然后依赖的插件库有
<link rel="stylesheet" type="text/css" href="Content/css/font-awesome.css"/>
<script type="text/javascript" src="Content/js/jquery-1.11.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="Content/css/bootstrap.css"/>
<script type="text/javascript" src="Content/js/bootstrap.js"></script>
差不多效果是这样的：
当然是有很长一段了 支持左右滑动 然后动画效果 自我感觉良好，哈哈~
