zoukankan html css js c++ java

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 {
         80px;
        border-bottom: 2px solid #1C86CE;
        padding-bottom: 5px;
        font-size: 18px;
        font-weight: 600;
        color: #666;
      
    }

.chronicle_content {
     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 {
             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;
}

　　然后依赖的插件库有

差不多效果是这样的：

当然是有很长一段了支持左右滑动然后动画效果自我感觉良好，哈哈~

查看全文

相关阅读:
Windows常用cmd命令总结
 电脑UEFI启动是什么？
PHP 7天前的时间戳
 背景图片
 SQLite/SQL Server Compact Toolbox
修改浏览器下拉条颜色和粗细
 thinkphp5 apache htaccess配置文件重写
 thinkphp5 token验证
 英文共享js
ul高度为0的解决方法

原文地址：https://www.cnblogs.com/pjh7/p/7659632.html

最新文章
LeetCode430 扁平化多级双向链表
 LeetCode2 两数相加
 switch语句
 if语句嵌套
 else if
if语句
 三元运算符
 短路赋值
 逻辑运算符的短路求值
 逻辑运算符

js 效果 大记事-横向-重播

js 效果大记事-横向-重播