javascript圖片展示牆特效
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>何問起海報畫廊</title><base target="_blank" /> 6 <style type="text/css"> 7 * { 8 padding: 0; 9margin: 0; 10 } 11 12 body { 13 background-color: #333; 14 color: yellowgreen; 15 font-family: 'Avenir Next', 'Lantinghei SC'; 16 font-size: 14px; 17 -webkit-font-smoothing: antialiased; 18 -moz-osx-font-smoothing: grayscale; 19 } 20 a{color:yellow} 21 .wrap { 22 width: 100%; 23 height: 600px; 24 position: absolute; 25 top: 50%; 26 margin-top: -300px; 27 background-color: #333; 28 overflow:hidden; 29 perspective: 800px; 30 -webkit-perspective: 800px; 31 } 32 33 .photo { 34 position: absolute; 35 width: 260px; 36 height: 320px; 37 z-index: 1; 38 box-shadow: 0 0 1px rgba(0, 0, 0, .01); 39 transition: all .5s; 40 -moz-transition: all .5s; 41 -webkit-transition: all .5s; 42 -o-transition: all .5s; 43 left: 50%; 44 top: 50%; 45 margin: -160px 0 0 -130px; 46 } 47 48 .photo .photo-wrap .side { 49 position: absolute; 50 width: 100%; 51 height: 100%; 52 background-color: #eee; 53 top: 0; 54 right: 0; 55 padding: 20px; 56 box-sizing: border-box; 57 -moz-box-sizing：border-box; 58 backface-visibility: hidden; 59 -webkit-backface-visibility: hidden; 60 -moz-backface-visibility: hidden; 61 -ms-backface-visibility: hidden; 62 } 63 64 .photo .photo-wrap .side-front { 65 transform: rotateY(0deg); 66 -webkit-transform: rotateY(0deg); 67 -moz-transform: rotateY(0deg); 68 -o-transform: rotateY(0deg); 69 -ms-transform: rotateY(0deg); 70 } 71 72 .photo .photo-wrap .side-front .image { 73 width: 100%; 74 height: 250px; 75 line-height: 250px; 76 overflow: hidden; 77 } 78 79 .photo .photo-wrap .side-front .image img { 80 width: 100%; 81 vertical-align: middle; 82 } 83 84 .photo .photo-wrap .side-front .caption { 85 text-align: center; 86 font-size: 16px; 87 line-height: 50px; 88 } 89 90 .photo .photo-wrap .side-back { 91 transform: rotateY(180deg); 92 -webkit-transform: rotateY(180deg); 93 -moz-transform: rotateY(180deg); 94 -o-transform: rotateY(180deg); 95 -ms-transform: rotateY(180deg); 96 } 97 98 .photo .photo-wrap .side-back .desc { 99 color: #666; 100 font-size: 14px; 101 line-height: 1.5em; 102 } 103 104 .photo_center { 105 top: 50%; 106 left: 50%; 107 margin: -160px 0 0 -130px; 108 z-index: 2; 109 } 110 111 .photo .photo-wrap { 112 position: absolute; 113 width: 100%; 114 height: 100%; 115 transform-style: preserve-3d; 116 -webkit-transform-style: preserve-3d; 117 transition: all .6s ease-in-out; 118 -webkit-transition: all .6s ease-in-out; 119 -moz-transition: all .5s; 120 -o-transition: all .5s; 121 transform-origin: 0% 50% 0px; 122 -ms-transform-origin: 0% 50% 0px; 123 -o-transform-origin: 0% 50% 0px; 124 -webkit-transform-origin: 0% 50% 0px; 125 -moz-transform-origin: 0% 50% 0px; 126 } 127 128 .photo_front .photo-wrap { 129 transform: translate(0px, 0px) rotateY(0deg); 130 -webkit-transform: translate(0px, 0px) rotateY(0deg); 131 -moz-transform: translate(0px, 0px) rotateY(0deg); 132 -o-transform: translate(0px, 0px) rotateY(0deg); 133 -ms-transform: translate(0px, 0px) rotateY(0deg); 134 } 135 136 .photo_back .photo-wrap { 137 transform: translate(260px, 0px) rotateY(180deg); 138 -webkit-transform: translate(260px, 0px) rotateY(180deg); 139 -moz-transform: translate(260px, 0px) rotateY(180deg); 140 -o-transform: translate(260px, 0px) rotateY(180deg); 141 -ms-transform: translate(260px, 0px) rotateY(180deg); 142 } 143 144 @font-face { 145 font-family: 'icomoon'; 146 src: url('images/icomoon.woff') format('woff'); 147 font-weight: normal; 148 font-size: normal; 149 } 150 151 .nav { 152 position: absolute; 153 width: 80%; 154 left: 10%; 155 height: 30px; 156 line-height: 30px; 157 bottom: 20px; 158 z-index: 3; 159 text-align: center; 160 } 161 162 .nav .i { 163 display: inline-block; 164 width: 30px; 165 height: 30px; 166 cursor: pointer; 167 background-color: #aaa; 168 text-align: center; 169 border-radius: 50px; 170 transform: scale(.5); 171 -webkit-transform: scale(.5); 172 -moz-transform: scale(.5); 173 -o-transform: scale(.5); 174 -ms-transform: scale(.5); 175 transition: all .5s; 176 -webkit-transition: all .5s; 177 -moz-transition: all .5s; 178 -o-transition: all .5s; 179 } 180 181 .nav .i:after { 182 content: '\e965'; 183 font-family: 'icomoon'; 184 font-size: 80%; 185 display: inline-block; 186 line-height: 30px; 187 text-align: center; 188 color: #fff; 189 opacity: 0; 190 } 191 192 .nav .i_current { 193 transform: scale(1); 194 -webkit-transform: scale(1); 195 -moz-transform: scale(1); 196 -o-transform: scale(1); 197 -ms-transform: scale(1); 198 } 199 200 .nav .i_current:after { 201 opacity: 1; 202 } 203 204 .nav .i_back { 205 background-color: #555; 206 transform: rotateY(180deg); 207 -webkit-transform: rotateY(180deg); 208 -moz-transform: rotateY(180deg); 209 -o-transform: rotateY(180deg); 210 -ms-transform: rotateY(180deg); 211 } 212 #wrap {color:#333 213 } 214 </style> 215 </head> 216 <body onselectstart="return false;" style="-moz-user-select:none;"> 217 <div>何問起海報走廊 <a href="http://hoverteee.com">首頁</a> <a href="http://hoverteee.com/texiao/">特效</a> <a href="http://hovertree.com/code/javascript/pwl4bhoi.htm">程式碼</a> <a href="http://hovertree.com/h/bjaf/punh2bn7.htm">註釋</a> <a href="http://hovertree.com/h/bjaf/h5aljrea.htm">下載</a></div> 218 <div class="wrap" id="wrap">何問起</div> 219 <script type="text/javascript" src="http://hovertree.com/texiao/js/15/images/data.js"></script> 220 <script type="text/javascript"> 221 function g(selector) { return selector.substring(0, 1) == "." ? document.getElementsByClassName(selector.substring(1)) : document.getElementById(selector.substring(1)) } function random(range) { var min = Math.min(range[0], range[1]); var max = Math.max(range[0], range[1]); var diff = max - min; var number = Math.round(Math.random() * diff) + min; return number } function相關推薦
javascript圖片展示牆特效
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5
Javascript應用--任你擺佈的圖片展示效果（圖片名換成你自己的）
Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd
Javascript應用--震撼的圖片展示效果（圖片換成你的圖片名就可以運行了）
Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd
純CSS3實現圖片展示特效
Web瀏覽器端的特效越來越讓人興奮，通過CSS和JavaScript，各種意想不到的絢麗效果都能用簡單的幾句程式碼完成。本文中要實現的一個純CSS3的圖片展示特效，以前只能用JavaScript實現，可想而知會受到多方面的限制，特別是效能。而今天我們將用簡單的CSS3程式碼實現，你會發現它的動畫效果在現代
Javascript應用--窗戶裡的圖片展示效果（圖片換成自己的即可執行）
Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd
Lightbox圖片展示特效
下午遇到測試提出的問題，安卓手機點選圖片可以全屏展示，但蘋果手機點選無反應，一開始想的是使用圖片點選事件，後更改思路使用lightbox外掛，實現點選圖片重新渲染全屏適應展示其中有小坑，下面解釋1，引入CSS以及JS若沒有此兩個檔案，到官網下載即可http://www.lok
JS特效——12款超酷圖片展示JS程式碼
好久沒有寫文章了，一到手都不知道寫什麼了。 這段時間以來一直在搞JS，原來前臺這麼有搞頭呀，其實我們這些搞開發的人最累了，每天比雞起的早，比牛還累，哎，我們的程式寫的再好有什麼用呀，沒有一個好的前臺顯示，就算你寫的程式再好也沒有用呀。 這段
js特效 圖片展示放大、說明
Js程式碼部分： var dom = (document.getElementById) ? true : false; var ns5 = ((navigator.userAgent.indexOf("Gecko")>-1) && dom) ? t
Javascript圖片預加載詳解
定期 on() 運行 其他 可能 如果 最好的 array request 預加載圖片是提高用戶體驗的一個很好方法。圖片預先加載到瀏覽器中，訪問者便可順利地在你的網站上沖浪，並享受到極快的加載速度。這對圖片畫廊及圖片占據很大比例的網站來說十分有利，它保證了圖片快速、無縫地發
JavaScript圖片裁剪
solid max sheet cli 二次 || 展示 cfile http 1.jquery 圖片裁剪庫選擇 Jcrop：http://deepliquid.com/content/Jcrop.html imgareaselect：http://odyniec.ne
javascript圖片輪播
tel ++ 播放 ont idt images sna -a 取圖 圖片輪播源代碼 復制可用 <!doctype html><html lang="en"><head> <meta charset="UTF-8">
h5圖片展示和ajax上傳
clas put content return function ctu || res send <img src="" id="img"/> <script src="http://static.lamian.tv//pc/public/js/jque
圖片展示上移效果
ntb light tle posit mage type images this charset <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/T
手風琴效果的圖片展示
images 第一個 rep ima mouse type sta targe margin 核心方法： animate({ width:"20%" },600); 鼠標滑動的時候通過觸發動畫動態改變目標圖片和其他相鄰圖片的長度來突出目標圖片 d
JavaScript圖片跟著鼠標動最終版
ner 節點 返回值 mini meta abs 聲明 設計 第一個元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <
網路載入圖片 展示圖片 樣式
MainActivity package com.example.imageloader; import android.os.Bundle; import android.support.v7.app.AppCompatActivity; import android.view.Vi
PullToRefreshListView上拉和下拉+輪播圖多條目+fragment巢狀fragment+二次取樣+側拉點選切換fragment+PullToRefreshGritView圖片展示
側拉 程式碼 1提取的基類 1.1Activity的基類 package com.example.zonghelianxi02.ui.activity; import android.os.Bundle; import android.support.annotation.Nulla
Http網路請求資料解析json展示資料+網路圖片展示+資料庫+Viewpager+Fragment
1.MainActivity主頁面 package com.bwie.guoxinyu; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentActivity; import and
上傳圖片並將圖片展示在頁面中
html需要一個上傳的input，一個canvas <input type="file" id="img"/><br /><br /><br /> <canvas id="canvas"></canvas> inp
圖片列表分頁外掛，相簿圖片展示，素材庫圖片展示
（1）第一種外掛效果圖如下： （2）第二種外掛效果圖如下： 兩種圖片分頁展示外掛，自己比較喜歡第一種，css等樣式，也用心除錯了一下，蘿蔔青菜各有所愛吧 ^_^ 提供的外掛是純前臺的指令碼，下載下來開啟index.html頁面即可看到效果。 也提供了通過AJAX載入資