基于JS实现翻书效果的页⾯切换样式
本⽂给⼤家分享⼀段代码，基于js代码实现的翻书效果的页⾯切换样式，具体代码如下所⽰；
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/1999/xhtml" >
<head>
jquery翻书效果
<title></title>
<script type="text/javascript" language="javascript" src="www.jb51/ajaxjs/jquery-1.4.2.min.js"></script>
<script type="text/javascript" language="javascript">
$(function() {
$("#right").click(function() {
var roll = $("<div></div>", { css: { position: "absolute", border: "solid 1px #999", left:  "806px", top: "10px", height: "494px", width: "1px", background:          "#fff"}}).appendTo($("#book").parent());  $(roll).animate({
left: "10px",
width: "398px"
}, 1000, function() {
$("#left").css({"background":"#fff"});
$(roll).fadeOut(300, function() {
$(roll).remove();
})
});
});
});
</script>
</head>
<body >
<div id="book" >
<div id="left" ></div>
<div id="right" ><p >点这翻页 </p></div>  </div>
</body>
</html>
以上所述是⼩编给⼤家介绍的基于JS实现翻书效果的页⾯切换样式，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。