自写一个翻书的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 id="book" style="width:797px;height:494px;background:#ccc;border:solid 6px #ccc;">        <div id="left" style="width:398px;height:494px;float:left;background:url(/jscss/demoimg/201011/PLh.png) no-repeat top left;cursor:pointer;"></div>        <div 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文字框缩放伸展效果

下一篇：按下键盘上的按键显示在网页空白处