自寫一個翻書的Js效果,jquery-1.4.2.min.js

2024-09-05 12:18:05

字體：大中小

來源：轉載

供稿：網友

自寫一個翻書的Js效果,jquery-1.4.2.min.js，還正在完善中，希望大家能喜歡，我覺得不錯。

<!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>自寫一個翻書的Js效果</title>    <script type="text/javascript" language="javascript" src="/ajaxjs/jquery-1.4.2.min.js"></script>    <script type="text/javascript" language="javascript">        $(function() {            $("#right").click(function() {            var roll = $("<div/>", { css: { position: "absolute", border: "solid 1px #999", left: "806px", top: "10px", height: "494px", width: "1px", background: "#fff url(/jscss/demoimg/201011/eCX.png) repeat-y -200px 0px"} }).appendTo($("#book").parent());                $(roll).animate({                    left: "10px",                    width: "398px",                    "background-position": "272px 0px"                }, 1000, function() {                    $("#left").css({"background":"#fff"});                    $(roll).fadeOut(300, function() {                        $(roll).remove();                    })                });            });        });    </script></head><body style="padding:5px;margin:0;">    <div   class="cuwosge"   id="book" style="width:797px;height:494px;background:#ccc;border:solid 6px #ccc;">        <div   class="iggacca"   id="left" style="width:398px;height:494px;float:left;background:url(/jscss/demoimg/201011/PLh.png) no-repeat top left;cursor:pointer;"></div>        <div   class="kcmwaqe"   id="right" style="width:398px;height:494px;float:left;background:#fff;cursor:pointer;margin-left:1px;text-align:right;"><p style="margin-top:470px;font-size:12px;color:#999;">點這翻頁  </p></div>    </div></body></html>

上一篇：slide文字框縮放伸展效果

下一篇：按下鍵盤上的按鍵顯示在網頁空白處