2. 程式人生 > >js特效之上下翻頁相冊效果

js特效之上下翻頁相冊效果

阿新 • • 發佈：2017-08-07
ref 相冊 xmlns otto perf wrapper 統一性 space auto

//HTML部分:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head><script>window.open(‘http://www.2345.com/?k38279370‘,‘網頁特效‘,‘toolbar=no,status=no,scrollbars=yes,left=100,top=50,width=250,height=50‘)</script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>Demo for - ‘Create a unique Gallery by using z-index and jQuery‘</title>

<link rel="stylesheet" type="text/css" media="screen" href="css/reset.css" />

<link rel="stylesheet" type="text/css" media="screen" href="css/960.css" />

<link rel="stylesheet" type="text/css" media="screen" href="css/main.css" />

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>

<script type="text/javascript" src="js/demo.js"></script>

</head>

<body>

<div class="container_12" id="wrapper">

<div class="grid_8" id="content"><br /><br /><br /><br /><br /><br /><br />

<!-- relevant for the tutorial - start -->

<div class="grid_6 prefix_1 suffix_1" id="gallery">

<div id="pictures">

<img src="images/picture1.png" alt=""/>

<img src="images/picture2.png" alt="" />

<img src="images/picture3.png" alt="" />

<img src="images/picture4.png" alt="" />

<img src="images/picture5.png" alt="" />

</div>

<div class="grid_3 alpha" id="prev">

<a href="#previous">&laquo; Pre</a>

</div>

<div class="grid_3 omega" id="next">

<a href="#next">Next &raquo;</a>

</div>

</div>

<!-- relevant for the tutorial - end -->

<div class="clear"></div> <p></p>

</div>

<div class="grid_4" id="sidebar">

<ul>

<li>

<h2>What‘s that?</h2>

</li>

<li>

<h2>It‘s my object !</h2>

</li>

</ul>

</div>

<div class="clear"></div>

</div>

</body>

</html>

//reset.css我就不上傳了 大家應該都有

//960.css內容如下 主要是對寬度以及定位的一些界定讓整個畫面具有統一性

　　

.container_12,.container_16{margin-left:auto;margin-right:auto;width:960px}

.grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9,.grid_10,.grid_11,.grid_12,.grid_13,.grid_14,.grid_15,.grid_16{display:inline;float:left;margin-left:10px;margin-right:10px}

.container_12 .grid_3,.container_16 .grid_4{width:220px}

.container_12 .grid_6,.container_16 .grid_8{width:460px}

.container_12 .grid_9,.container_16 .grid_12{width:700px}

.container_12 .grid_12,.container_16 .grid_16{width:940px}

.alpha{margin-left:0}.omega{margin-right:0}

.container_12 .grid_1{width:60px}

.container_12 .grid_2{width:140px}

.container_12 .grid_4{width:300px}

.container_12 .grid_5{width:380px}

.container_12 .grid_7{width:540px}

.container_12 .grid_8{width:620px}

.container_12 .grid_10{width:780px}

.container_12 .grid_11{width:860px}

.container_16 .grid_1{width:40px}

.container_16 .grid_2{width:100px}

.container_16 .grid_3{width:160px}

.container_16 .grid_5{width:280px}

.container_16 .grid_6{width:340px}

.container_16 .grid_7{width:400px}

.container_16 .grid_9{width:520px}

.container_16 .grid_10{width:580px}

.container_16 .grid_11{width:640px}

.container_16 .grid_13{width:760px}

.container_16 .grid_14{width:820px}

.container_16 .grid_15{width:880px}

.container_12 .prefix_3,.container_16 .prefix_4{padding-left:240px}

.container_12 .prefix_6,.container_16 .prefix_8{padding-left:480px}

.container_12 .prefix_9,.container_16 .prefix_12{padding-left:720px}

.container_12 .prefix_1{padding-left:80px}

.container_12 .prefix_2{padding-left:160px}

.container_12 .prefix_4{padding-left:320px}

.container_12 .prefix_5{padding-left:400px}

.container_12 .prefix_7{padding-left:560px}

.container_12 .prefix_8{padding-left:640px}

.container_12 .prefix_10{padding-left:800px}

.container_12 .prefix_11{padding-left:880px}

.container_16 .prefix_1{padding-left:60px}

.container_16 .prefix_2{padding-left:120px}

.container_16 .prefix_3{padding-left:180px}

.container_16 .prefix_5{padding-left:300px}

.container_16 .prefix_6{padding-left:360px}

.container_16 .prefix_7{padding-left:420px}

.container_16 .prefix_9{padding-left:540px}

.container_16 .prefix_10{padding-left:600px}

.container_16 .prefix_11{padding-left:660px}

.container_16 .prefix_13{padding-left:780px}

.container_16 .prefix_14{padding-left:840px}

.container_16 .prefix_15{padding-left:900px}

.container_12 .suffix_3,.container_16 .suffix_4{padding-right:240px}

.container_12 .suffix_6,.container_16 .suffix_8{padding-right:480px}

.container_12 .suffix_9,.container_16 .suffix_12{padding-right:720px}

.container_12 .suffix_1{padding-right:80px}

.container_12 .suffix_2{padding-right:160px}

.container_12 .suffix_4{padding-right:320px}

.container_12 .suffix_5{padding-right:400px}

.container_12 .suffix_7{padding-right:560px}

.container_12 .suffix_8{padding-right:640px}

.container_12 .suffix_10{padding-right:800px}

.container_12 .suffix_11{padding-right:880px}

.container_16 .suffix_1{padding-right:60px}

.container_16 .suffix_2{padding-right:120px}

.container_16 .suffix_3{padding-right:180px}

.container_16 .suffix_5{padding-right:300px}

.container_16 .suffix_6{padding-right:360px}

.container_16 .suffix_7{padding-right:420px}

.container_16 .suffix_9{padding-right:540px}

.container_16 .suffix_10{padding-right:600px}

.container_16 .suffix_11{padding-right:660px}

.container_16 .suffix_13{padding-right:780px}

.container_16 .suffix_14{padding-right:840px}

.container_16 .suffix_15{padding-right:900px}

.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}

.clearfix:after{clear:both;content:‘.‘;display:block;visibility:hidden;height:0}

.clearfix{display:inline-block}

* html .clearfix{height:1%}.clearfix{display:block}

//main.css的內容如下 主要是對一些小的方面進行深度的調控

html { font-size: 16px; min-height: 100%; margin-bottom: 1px; }

body { font-size: 62.5%; font-family: Verdana, Arial, sans-serif; color: #555555; background: #22384d url(../images/bg.jpg) repeat-x; }

a { color: #0F67A1; text-decoration: none; }

a:hover { text-decoration: underline; }

#wrapper { background: white url(../images/sidebar_bg.jpg) repeat-y top right; }

#content { }

#content h1 { font-size: 2.4em; font-weight: normal; line-height: 32px; margin: 30px 0 50px 0; }

#content p { font-size: 1.4em; line-height: 22px; margin-bottom: 20px; }

/* relevant for the tutorial - start */

#gallery { position: relative; }

#pictures { position: relative; height: 408px; cursor: pointer;}

#pictures img { position: absolute; top: 0; left: 0; }

#prev, #next { margin-top: 30px; text-align: center; font-size: 2.0em; }

/* relevant for the tutorial - end */

#footer { text-align: center; margin: 50px 0 20px 0; }

#sidebar { }

#sidebar ul { margin-top: 20px; }

#sidebar ul li { font-size: 1.2em; padding: 20px 0 20px 0; border-bottom: 1px solid #dddcdc; line-height: 18px; }

#sidebar ul li h2 { font-size: 1.2em; margin-bottom: 8px; }

//最後就是最關鍵的js部分了

$(document).ready(function() { //perform actions when DOM is ready

var z = 0; //for setting the initial z-index‘s

var inAnimation = false; //flag for testing if we are in a animation

$(‘#pictures img‘).each(function() { //set the initial z-index‘s

z++; //at the end we have the highest z-index value stored in the z variable

$(this).css(‘z-index‘, z); //apply increased z-index to <img>

});

function swapFirstLast(isFirst) {

if(inAnimation) return false; //if already swapping pictures just return

else inAnimation = true; //set the flag that we process a image

var processZindex, direction, newZindex, inDeCrease; //change for previous or next image

if(isFirst) { processZindex = z; direction = ‘-‘; newZindex = 1; inDeCrease = 1; } //set variables for "next" action

else { processZindex = 1; direction = ‘‘; newZindex = z; inDeCrease = -1; } //set variables for "previous" action

$(‘#pictures img‘).each(function() { //process each image

if($(this).css(‘z-index‘) == processZindex) { //if its the image we need to process

$(this).animate({ ‘top‘ : direction + $(this).height() + ‘px‘ }, ‘slow‘, function() { //animate the img above/under the gallery (assuming all pictures are equal height)

$(this).css(‘z-index‘, newZindex) //set new z-index

.animate({ ‘top‘ : ‘0‘ }, ‘slow‘, function() { //animate the image back to its original position

inAnimation = false; //reset the flag

});

});

} else { //not the image we need to process, only in/de-crease z-index

$(this).animate({ ‘top‘ : ‘0‘ }, ‘slow‘, function() { //make sure to wait swapping the z-index when image is above/under the gallery

$(this).css(‘z-index‘, parseInt($(this).css(‘z-index‘)) + inDeCrease); //in/de-crease the z-index by one

});

}

});

return false; //don‘t follow the clicked link

}

$(‘#next a‘).click(function() {

return swapFirstLast(true); //swap first image to last position

});

$(‘#prev a‘).click(function() {

return swapFirstLast(false); //swap last image to first position

});

});

圖片我就不上傳了 大家自己找一些圖片 換一下名字吧 這樣一個翻頁相冊效果就做出來了 雖然有些冗余 但效果還是不錯的

js特效之上下翻頁相冊效果

相關推薦

js特效之上下翻頁相冊效果

ref 相冊 xmlns otto perf wrapper 統一性 space auto //HTML部分: p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Consolas; color: #289c97 } p

簡單3D翻頁相冊制作教程

教程 tex 分辨 復制 img ext ron 點擊 www 3D效果看起來總是要比平面的圖形看起來視覺效果要好的多，今天來教大家制作簡單的3D翻頁效果的視頻。 視頻預覽鏈接：https://v.youku.com/v_show/id_XMzgxOTY5NzQzMg==.

雲展網教程 | HTML5模板如何設定翻頁左右翻頁或上下翻頁？

HTML模板支援左右翻頁和上下翻頁兩種翻頁方向模式。模擬翻頁和滑動翻頁都支援設定翻頁方向。 設定方式如下：在個人中心資料夾找到需要設定的書籍，點選編輯按鈕。在設定欄目下找到翻頁方向。選擇方向後儲存並退出。   樣式如下： 模擬翻頁模式下的左右翻頁   模擬翻頁下的上下

在UITableView中識別左右滑動，實現上下翻頁的功能

阿里雲  >  教程中心   >  ios教程  >  在UITableView中識別左右滑動，實現上下翻頁的功能  

jq實現滑鼠滾動的時候上下翻頁，動畫在翻頁的時候才會執行

        以前一直想自己寫幾篇屬於自己部落格，但是由於工作原因以及一些生活的上的因素，導致一直都沒能如願，今天加班，正好事兒還沒過來，真好留了時間給我寫一篇部落格。         在上一家公司的時候，主要從事的是移動端的開發，由於基於移動端有了相對來說很成熟的翻頁框

簡單實現修改jqgrid的翻頁欄顯示效果

沙漠漁溏--時間小記:2018年8月2日 11:29:12         從今年五一開始接觸軟體開發行業，看到公司做的web程式應用很多jqgrid外掛，說句實話好多地方感覺好醜 話不多說先上程式碼再看演示(寫的很糙,看網上沒有,僅做參考吧) js檔案 /*** *

利用iOS的UICollectionView製作卡片翻頁放大縮小效果

前要 之前遇到需求，廣告欄可以滑動過程放大縮小的，類似於翻頁的效果，所以就查了一些資料看看，很多都是在滑動的代理的中進行操作的，寫起來非常的麻煩，借鑑網上說的可以重寫UICollectionViewFlowLayout，自己定義效果。 解決問題的關鍵

js學習之——網頁側邊欄廣告效果

側邊欄廣告就是指我們在瀏覽網站的時候在網頁的右邊中間部分顯示的那個div，無論我們是拖動滾動條，還是放大縮小視窗，廣告始終顯示在右邊的中間。這裡主要是提供兩種方法的實現。 方法一： 就是使用純粹的佈局來實現，比較簡單，即是使用 position:fixed;

用原生js實現淘寶詳情頁圖片放大鏡效果

這個功能是我在模仿淘寶詳情頁的時候做出來的，最初版本對於非1:1比例的圖片沒有做處理，後續對程式進行了完善和邏輯上修改，形成了當前的程式。廢話不多說，直接進入正題了，先上個效果圖先放上這段功能的html程式碼<div id="full-pic">     <

利用ViewPager打造縱向翻頁、切換效果，仿抖音視訊切換

· 背景介紹     抖音幾乎已經成為了我們日常生活中使用比較頻繁的App，無聊之時或工作之後可以刷一刷短視訊來供我們娛樂與放鬆。看到抖音的視屏切換效果，覺得用ViewPager可以做出一樣的效果。想一想之前用的ViewPager都是橫向切換的，雖然很經常用，但是從來沒

JS之美女相冊

i++ innerhtml tel 事件驅動 pla for循環 img image 展示 目的：點擊一張小圖片會在下方展示出大圖片，大圖片下方會有該圖片的標題 實現：讓小圖片的href賦值給Img的src，讓title賦值給innerHTML 註意：這裏的圖片有很多，把它

vue10行代碼實現上拉翻頁加載更多數據，純手寫js實現下拉刷新上拉翻頁不引用任何第三方插件

each ray 如果 部分 list 插件 下拉 ast 頁面數據 vue10行代碼實現上拉翻頁加載更多數據，純手寫js實現下拉刷新上拉翻頁不引用任何第三方插件/庫 一提到移動端的下拉刷新上拉翻頁，你可能就會想到iScroll插件，沒錯iScroll是一個高性能，資源占用

翻頁文字特效

ttr ogl sha div tez weight -a abs box @import url(https://fonts.googleapis.com/css?family=Lato:900); *, *:before, *:after{ box-sizing:

vue單文件組件工程，上下全屏翻頁小案例

整體 eight 重要 sset var rtti 執行 src star 轉載請標明出處，以下純手打，不容易~~~ 先來看下效果圖吧，百度發現一款錄屏制作Gif的小工具，叫ScreentoGif ，終於可以上自己的動態效果圖了 接下來看下整個vue文件的完整代碼： &

turn.js （翻頁效果）總結

play blog spa == 多少 硬件加速 rip key num Turn.js是一個內置的jQuery翻頁插件 1 html中引入<script type="text/javascript" src="js/turn.js"></script&g

Android上傳圖片之調用系統拍照和從相冊選擇圖片

item 取圖 空指針 ctu setimage tro edate eas tostring Android上傳圖片之調用系統拍照和從相冊選擇圖片 本篇文章已授權

微信小程序開發之從相冊獲取圖片 使用相機拍照 本地圖片上傳

服務器 color form 圖片上傳 info success height set som 1.index.wxml 1 <!--index.wxml--> 2 <button style="margin:30rpx;" bindtap="cho

Python爬蟲處理JS翻頁的一種方法，利用Ajax非同步請求

前端方面知識不是很好，只是想解決有關Python爬蟲翻頁的問題 =。=  如有不對，還望指正 瀏覽器：Google 利用區域性更新這種翻頁的方式，同樣需要進行一個url請求，因此我們的目的就是找到這個url 1.分析 如圖所示，頁面翻頁採用了JS的方法 &nb

【Android 進階】仿抖音系列之翻頁上下滑切換視訊（四）

大家好，我們又見面了。這是這個系列的第四篇，在這篇文章之前，建議可以先看下之前系列的文章，為了節省篇幅，之前詳細說過的地方，這裡就不再詳細描述了，下面是目錄： 【Android 進階】仿抖音系列之翻頁上下滑切換視訊（一） 【Android 進階】仿抖音系列之列表播放視訊

【Android 進階】仿抖音系列之翻頁上下滑切換視訊（一）

最近公司在做個短視訊的專案，其中借鑑了很多抖音的設計，其中就有抖音的上下滑切換視訊。 【Android 進階】仿抖音系列之翻頁上下滑切換視訊（一） 【Android 進階】仿抖音系列之列表播放視訊（二） 【Android 進階】仿抖音系列之列表播放視訊（三）