Jquery翻书特效

最新推荐文章于 2024-08-11 18:40:36 发布

虎虎0369

最新推荐文章于 2024-08-11 18:40:36 发布

阅读量1.6k

点赞数

分类专栏： jquery+JS 文章标签： jquery function javascript xhtml div html

本文链接：https://blog.csdn.net/min565220/article/details/6542433

版权

jquery+JS 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

<!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>
    <title>一个基于jQuery的翻书的Js效果丨芯晴网页特效丨CsrCode.Cn</title>
    <%--<script type="text/javascript" language="javascript" src="http://www.scodefans.net/ajaxjs/jquery-1.4.2.min.js"></script>--%>
    <script src="jquery-1.4.2.min.js" type="text/javascript"></script>
    <script type="text/javascript" language="javascript">
        $(function () {
            var divLeft = ["内容1", "内容2", "内容3", "内容4", "内容5", "内容6", "内容7", "内容8", "内容9", "内容10"];
            var divRight = ["content1", "content2", "content3", "content4", "content5",
            "content6", "content7", "content8", "content9", "content10"];
            var nowPage = 1;
            $("#left").html(divLeft[0]);
            $("#right").html(divRight[0]);
            var isNext = true ;
            $("#firstPage").click(function () {
                if(nowPage==1)
                {
                    return;
                }
                nowPage = 1;
                isNext = false;
                RedirectPage();
            });
            $("#prePage").click(function () {
                if(nowPage==1)
                {
                    return;
                }
                nowPage--;
                isNext = false;
                RedirectPage();
            });
            $("#nextPage").click(function () {
                if(nowPage==10)
                {
                    return;
                }
                nowPage++;
                isNext = true;
                RedirectPage();
            });
            $("#lastPage").click(function () {
                if(nowPage==10)
                {
                    return;
                }
                nowPage = divLeft.length;
                isNext = true;
                RedirectPage();
            });
            function RedirectPage() {
                var roll = $("<div/>", { css: { position: "absolute", border: "solid 1px #999", background: "red",
                    top: "10px", height: "494px", width: "1px"
                }
                }).appendTo($("#book").parent());
                $(roll).css("left", isNext ? 806 : 10);
                $(roll).animate({
                    left: isNext ? 10 : 409,
                    width: "398px",
//                    "background-position": "272px 0px"
                }, 1000, function () {
                    $("#left").css({ "background": "#fff" });
                    $(roll).fadeOut(1000, function () {
                        $(roll).remove();
                    })
                });
                $("#left").html(divLeft[nowPage - 1]);
                $("#right").html(divRight[nowPage - 1]);
                $("#nowPage").text(nowPage);
            }
        });
    </script>
    <style type="text/css">
        p span
        {
            width:50px;
            color:Red;
            font-size:16px;
            margin-right:20px;
            cursor:pointer;
        }
    </style>
</head>
<body style="padding:5px;margin:0;">
    <div id="book" style="width:797px;height:494px;background:#ccc;border:solid 6px #ccc;">
        <div id="left" style="width:398px;height:494px;float:left;cursor:pointer;"></div>
        <div id="right" style="width:398px;height:494px;float:left;background:#fff;cursor:pointer;margin-left:1px;text-align:right;"></div>
        <p style="margin-top:470px;font-size:12px;color:#999;">
        <span id="firstPage">首页</span>
        <span id="prePage">上一页</span>
        当前页：<span id="nowPage" style="color:Blue;">1</span>
        <span id="nextPage">下一页</span>
        <span id="lastPage">末页</span>
        </p>
    </div>
</body>
</html>

虎虎0369

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery翻书特效

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml" > 一个基于jQuery的翻书的Js效果丨芯晴网页特效丨CsrCode.Cn --%">http://www.scodefans.net/ajaxjs/jquery-1.4.2.min.js">--%>
复制链接

扫一扫

专栏目录