基于JS實現(xiàn)翻書效果的頁面切換樣式
更新時間：2017年02月16日 10:30:51 投稿：mrr
在項目開發(fā)中經(jīng)常遇到翻書的頁面切換效果，基于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.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://www.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;">點這翻頁 </p></div>
</div>
</body>
</html>
以上所述是小編給大家介紹的基于JS實現(xiàn)翻書效果的頁面切換樣式，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了解決layui的table.checkStatus失效問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
微信小程序?qū)崿F(xiàn)多行文字超出部分省略號顯示功能
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)多行文字 超出部分省略號顯示功能，比如設(shè)置只顯示2行，超出部分省略號顯示，本文通過實例代碼給大家介紹,需要的朋友可以參考下2019-10-10
極致之美——百行代碼實現(xiàn)全新智能語言...2007-03-03
由于asp的cookie是經(jīng)過url編碼的，所以讀之前要unescape一下。2008-09-09
JavaScript中關(guān)聯(lián)原型鏈屬性特性
這篇文章主要介紹了JavaScript中關(guān)聯(lián)原型鏈屬性特性的相關(guān)資料,需要的朋友可以參考下2016-02-02
微信小程序?qū)崿F(xiàn)點擊圖片旋轉(zhuǎn)180度并且彈出下拉列表
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)點擊圖片旋轉(zhuǎn)180度并且彈出下拉列表，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-11-11
下面小編就為大家?guī)硪黄狫avaScript進階練習(xí)及簡單實例分析。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
本文給大家匯總介紹了3種javascript數(shù)組去重的方法以及示例，十分的簡單實用，有需要的小伙伴可以參考下。2015-07-07
這篇文章主要給大家介紹了關(guān)于微信小程序js時間戳與日期格式的轉(zhuǎn)換方法,在小程序中使用時間選擇器時,獲取到的時間可能是一個時間戳,這并不是我們想要的,這時候我們得將獲取到的時間戳進行轉(zhuǎn)換,需要的朋友可以參考下2023-10-10
JavaScript中數(shù)組sort()方法的基本使用與踩坑記錄
: js中用方法sort()為數(shù)組排序,這篇文章主要給大家介紹了關(guān)于JavaScript中數(shù)組sort()方法的基本使用,sort()方法已經(jīng)可以滿足我們對數(shù)組的很多處理需求,需要的朋友可以參考下2021-06-06