快捷導(dǎo)航

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

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

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

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

<!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://m.fzitv.net/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://m.fzitv.net/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;">點(diǎn)這翻頁(yè) </p></div>
  </div>
  </body>
  </html>

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

您可能感興趣的文章:

相關(guān)文章

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