基于JS實現(xiàn)翻書效果的頁面切換樣式

更新時間：2017年02月16日 10:30:51 投稿：mrr

在項目開發(fā)中經常遇到翻書的頁面切換效果，基于js代碼怎么實現(xiàn)的呢?今天小編給大家分享基于JS實現(xiàn)翻書效果的頁面切換樣式，需要的朋友參考下吧

本文給大家分享一段代碼，基于js代碼實現(xiàn)的翻書效果的頁面切換樣式，具體代碼如下所示；

<!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></title>
  <script type="text/javascript" language="javascript" src="http://www.dhdzp.com/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 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(http://www.dhdzp.com/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>

以上所述是小編給大家介紹的基于JS實現(xiàn)翻書效果的頁面切換樣式，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

解決layui的table.checkStatus失效問題
這篇文章主要介紹了解決layui的table.checkStatus失效問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-10-10
微信小程序實現(xiàn)多行文字超出部分省略號顯示功能
這篇文章主要介紹了微信小程序實現(xiàn)多行文字超出部分省略號顯示功能，比如設置只顯示2行，超出部分省略號顯示，本文通過實例代碼給大家介紹,需要的朋友可以參考下
2019-10-10
極致之美——百行代碼實現(xiàn)全新智能語言
極致之美——百行代碼實現(xiàn)全新智能語言...
2007-03-03
Javascript 讀后臺cookie代碼
由于asp的cookie是經過url編碼的，所以讀之前要unescape一下。
2008-09-09
JavaScript中關聯(lián)原型鏈屬性特性
這篇文章主要介紹了JavaScript中關聯(lián)原型鏈屬性特性的相關資料,需要的朋友可以參考下
2016-02-02
微信小程序實現(xiàn)點擊圖片旋轉180度并且彈出下拉列表
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)點擊圖片旋轉180度并且彈出下拉列表，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-11-11
JavaScript進階練習及簡單實例分析
下面小編就為大家?guī)硪黄狫avaScript進階練習及簡單實例分析。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-06-06
js數(shù)組去重的方法匯總
本文給大家匯總介紹了3種javascript數(shù)組去重的方法以及示例，十分的簡單實用，有需要的小伙伴可以參考下。
2015-07-07
微信小程序js時間戳與日期格式的轉換方法
這篇文章主要給大家介紹了關于微信小程序js時間戳與日期格式的轉換方法,在小程序中使用時間選擇器時,獲取到的時間可能是一個時間戳,這并不是我們想要的,這時候我們得將獲取到的時間戳進行轉換,需要的朋友可以參考下
2023-10-10
JavaScript中數(shù)組sort()方法的基本使用與踩坑記錄
: js中用方法sort()為數(shù)組排序,這篇文章主要給大家介紹了關于JavaScript中數(shù)組sort()方法的基本使用,sort()方法已經可以滿足我們對數(shù)組的很多處理需求,需要的朋友可以參考下
2021-06-06