2. 程式人生 > >Javascript應用--任你擺佈的圖片展示效果（圖片名換成你自己的）

Javascript應用--任你擺佈的圖片展示效果（圖片名換成你自己的）

阿新 • • 發佈：2018-12-30
Code:
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. <head>
  4. <title>3</title>
  5. <styletype="text/css">
  6.     html {   
  7.         overflow: hidden;   
  8.     }   
  9.     body {   
  10.         margin: 0px;   
  11.         padding: 0px;   
  12.         background: #000;   
  13.         position: absolute;   
  14.         width: 100%;   
  15.         height: 100%;   
  16.         cursor: crosshair;   
  17.     }   
  18.     #diapoContainer {   
  19.         position: absolute;   
  20.         left: 10%;   
  21.         top: 10%;   
  22.         width: 80%;   
  23.         height: 80%;   
  24.         background: #222;   
  25.         overflow: hidden;   
  26.     }   
  27.     .imgDC {   
  28.         position: absolute;   
  29.         cursor: pointer;   
  30.         border: #000 solid 2px;   
  31.         filter: alpha(opacity=90);   
  32.         opacity: 0.9;   
  33.         visibility: hidden;   
  34.     }   
  35.     .spaDC {   
  36.         position: absolute;   
  37.         filter: alpha(opacity=20);   
  38.         opacity: 0.2;   
  39.         background: #000;   
  40.         visibility: hidden;   
  41.     }   
  42.     .imgsrc {   
  43.         position: absolute;   
  44.         width: 120px;   
  45.         height: 67px;   
  46.         visibility: hidden;   
  47.         margin: 4%;   
  48.     }   
  49.     #bkgcaption {   
  50.         position: absolute;   
  51.         bottom: 0px;   
  52.         left: 0px;   
  53.         width: 100%;   
  54.         height: 6%;   
  55.         background:#1a1a1a;   
  56.     }   
  57.     #caption {   
  58.         position: absolute;   
  59.         font-family: arial, helvetica, verdana, sans-serif;   
  60.         white-space: nowrap;   
  61.         color: #fff;   
  62.         bottom: 0px;   
  63.         width: 100%;   
  64.         left: -10000px;   
  65.         text-align: center;   
  66.     }   
  67. </style>
  68. <scripttype="text/javascript">
  69. var xm;   
  70. var ym;   
  71. /* ==== onmousemove event ==== */   
  72. document.onmousemove = function(e){   
  73.     if(window.event) e=window.event;   
  74. xm = (e.x || e.clientX);   
  75. ym = (e.y || e.clientY);   
  76. }   
  77. /* ==== window resize ==== */   
  78. function resize() {   
  79.     if(diapo)diapo.resize();   
  80. }   
  81. onresize = resize;   
  82. /* ==== opacity ==== */   
  83. setOpacity = function(o, alpha){   
  84.     if(o.filters)o.filters.alpha.opacity = alpha * 100; else o.style.opacity = alpha;   
  85. }   
  86. ////////////////////////////////////////////////////////////////////////////////////////////   
  87. /* ===== encapsulate script ==== */   
  88. diapo = {   
  89.     O : [],   
  90.     DC : 0,   
  91.     img : 0,   
  92.     txt : 0,   
  93.     N : 0,   
  94.     xm : 0,   
  95.     ym : 0,   
  96.     nx : 0,   
  97.     ny : 0,   
  98.     nw : 0,   
  99.     nh : 0,   
  100.     rs : 0,   
  101.     rsB : 0,   
  102.     zo : 0,   
  103.     tx_pos : 0,   
  104.     tx_var : 0,   
  105.     tx_target : 0,   
  106.     /////// script parameters ////////   
  107.     attraction : 2,   
  108.     acceleration : .9,   
  109.     dampening : .1,   
  110.     zoomOver : 2,   
  111.     zoomClick : 6,   
  112.     transparency : .8,   
  113.     font_size: 18,   
  114.     //////////////////////////////////   
  115.     /* ==== diapo resize ==== */   
  116.     resize : function(){   
  117.         with(this){   
  118. nx = DC.offsetLeft;   
  119. ny = DC.offsetTop;   
  120. nw = DC.offsetWidth;   
  121. nh = DC.offsetHeight;   
  122. txt.style.fontSize = Math.round(nh / font_size) + "px";   
  123.             if(Math.abs(rs-rsB)<100) for(var i=0; i<N; i++) O[i].resize();   
  124. rsrsB = rs;   
  125.         }   
  126.     },   
  127.     /* ==== create diapo ==== */   
  128.     CDiapo : function(o){   
  129.         /* ==== init variables ==== */   
  130. this.o        = o;   
  131. thisthis.x_pos    = this.y_pos    = 0;   
  132. thisthis.x_origin = this.y_origin = 0;   
  133. thisthis.x_var    = this.y_var    = 0;   
  134. thisthis.x_target = this.y_target = 0;   
  135. thisthis.w_pos    = this.h_pos    = 0;   
  136. thisthis.w_origin = this.h_origin = 0;   
  137. thisthis.w_var    = this.h_var    = 0;   
  138. thisthis.w_target = this.h_target = 0;   
  139. this.over     = false;   
  140. this.click    = false;   
  141.         /* ==== create shadow ==== */   
  142. this.spa = document.createElement("span");   
  143. this.spa.className = "spaDC";   
  144.         diapo.DC.appendChild(this.spa);   
  145.         /* ==== create thumbnail image ==== */   
  146. this.img = document.createElement("img");   
  147. this.img.className = "imgDC";   
  148. this.img.src = o.src;   
  149. thisthis.img.O = this;   
  150.         diapo.DC.appendChild(this.img);   
  151.         setOpacity(this.img, diapo.transparency);   
  152.         /* ==== mouse events ==== */   
  153. this.img.onselectstart = new Function("return false;");   
  154. this.img.ondrag = new Function("return false;");   
  155. this.img.onmouseover = function(){   
  156. diapo.tx_target=0;   
  157. diapo.txt.innerHTML=this.O.o.alt;   
  158. this.O.over=true;   
  159.             setOpacity(this,this.O.click?diapo.transparency:1);   
  160.         }   
  161. this.img.onmouseout = function(){   
  162. diapo.tx_target=-diapo.nw;   
  163. this.O.over=false;   
  164.             setOpacity(this,diapo.transparency);   
  165.         }   
  166. this.img.onclick = function() {   
  167.             if(!this.O.click){   
  168.                 if(diapo.zo && diapo.zo != this) diapo.zo.onclick();   
  169. this.O.click = true;   
  170. this.O.x_origin = (diapo.nw - (this.O.w_origin * diapo.zoomClick)) / 2;   
  171. this.O.y_origin = (diapo.nh - (this.O.h_origin * diapo.zoomClick)) / 2;   
  172. diapo.zo = this;   
  173.                 setOpacity(this,diapo.transparency);   
  174.             } else {   
  175. this.O.click = false;   
  176. this.O.over = false;   
  177.                 this.O.resize();   
  178. diapo.zo = 0;   
  179.             }   
  180.         }   
  181.         /* ==== rearrange thumbnails based on "imgsrc" images position ==== */   
  182. this.resize = function (){   
  183.             with (this) {   
  184. x_origin = o.offsetLeft;   
  185. y_origin = o.offsetTop;   
  186. w_origin = o.offsetWidth;   
  187. h_origin = o.offsetHeight;   
  188.             }   
  189.         }   
  190.         /* ==== animation function ==== */   
  191. this.position = function (){   
  192.             with (this) {   
  193.                 /* ==== set target position ==== */   
  194. w_target = w_origin;   
  195. h_target = h_origin;   
  196.                 if(over){   
  197.                     /* ==== mouse over ==== */   
  198. w_target = w_origin * diapo.zoomOver;   
  199. h_target = h_origin * diapo.zoomOver;   
  200. x_target = diapo.xm - w_pos / 2 - (diapo.xm - (x_origin + w_pos / 2)) / (diapo.attraction*(click?10:1));   
  201. y_target = diapo.ym - h_pos / 2 - (diapo.ym - (y_origin + h_pos / 2)) / (diapo.attraction*(click?10:1));   
  202.                 } else {   
  203.                     /* ==== mouse out ==== */   
  204. x_target = x_origin;   
  205. y_target = y_origin;   
  206.                 }   
  207.                 if(click){   
  208.                     /* ==== clicked ==== */   
  209. w_target = w_origin * diapo.zoomClick;   
  210. h_target = h_origin * diapo.zoomClick;   
  211.                 }   
  212.                 /* ==== magic spring equations ==== */   
  213.                 x_pos += x_varx_var = x_var * diapo.acceleration + (x_target - x_pos) * diapo.dampening;   
  214.                 y_pos += y_vary_var = y_var * diapo.acceleration + (y_target - y_pos) * diapo.dampening;   
  215.                 w_pos += w_varw_var = w_var * (diapo.acceleration * .5) + (w_target - w_pos) * (diapo.dampening * .5);   
  216.                 h_pos += h_varh_var = h_var * (diapo.acceleration * .5) + (h_target - h_pos) * (diapo.dampening * .5);   
  217.                 diapo.rs += (Math.abs(x_var) + Math.abs(y_var));   
  218.                 /* ==== html animation ==== */   
  219.                 with(img.style){   
  220. left   = Math.round(x_pos) + "px";   
  221. top    = Math.round(y_pos) + "px";   
  222. width  = Math.round(Math.max(0, w_pos)) + "px";   
  223. height = Math.round(Math.max(0, h_pos)) + "px";   
  224. zIndex = Math.round(w_pos);   
  225.                 }   
  226.                 with(spa.style){   
  227. left   = Math.round(x_pos + w_pos * .1) + "px";   
  228. top    = Math.round(y_pos + h_pos * .1) + "px";   
  229. width  = Math.round(Math.max(0, w_pos * 1.1)) + "px";   
  230. height = Math.round(Math.max(0, h_pos * 1.1)) + "px";   
  231. zIndex = Math.round(w_pos);   
  232.                 }   
  233.             }   
  234.         }   
  235.     },   
  236.     /* ==== main loop ==== */   
  237.     run : function(){   
  238. diapo.xm = xm - diapo.nx;   
  239. diapo.ym = ym - diapo.ny;   
  240.         /* ==== caption anim ==== */   
  241.         diapo.tx_pos += diapodiapo.tx_var = diapo.tx_var * .9 + (diapo.tx_target - diapo.tx_pos) * .02;   
  242. diapo.txt.style.left = Math.round(diapo.tx_pos) + "px";   
  243.         /* ==== images anim ==== */   
  244.         for(var i in diapo.O) diapo.O[i].position();   
  245.         /* ==== loop ==== */   
  246.         setTimeout("diapo.run();", 16);   
  247.     },   
  248.     /* ==== load images ==== */   
  249.     images_load : function(){   
  250.         // ===== loop until all images are loaded =====   
  251.         var M = 0;   
  252.         for(var i=0; i<diapo.N; i++) {   
  253.             if(diapo.img[i].complete) {   
  254.                 diapo.img[i].style.position = "relative";   
  255.                 diapo.O[i].img.style.visibility = "visible";   
  256.                 diapo.O[i].spa.style.visibility = "visible";   
  257.                 M++;   
  258.             }   
  259.             resize();   
  260.         }   
  261.         if(M<diapo.N) setTimeout("diapo.images_load();", 128);   
  262.     },   
  263.     /* ==== init script ==== */   
  264.     init : function() {   
  265. diapo.DC = document.getElementById("diapoContainer");   
  266. diapodiapo.img = diapo.DC.getElementsByTagName("img");   
  267. diapo.txt = document.getElementById("caption");   
  268. diapodiapo.N = diapo.img.length;   
  269.         for(i=0; i<diapo.N; i++) diapo.O.push(new diapo.CDiapo(diapo.img[i]));   
  270.         diapo.resize();   
  271. diapo.tx_pos = -diapo.nw;   
  272. diapo.tx_target = -diapo.nw;   
  273.         diapo.images_load();   
  274.         diapo.run();   
  275.     }   
  276. }   
  277. </script>
  278. </head>
  279. <body>
  280. <divid="diapoContainer">
  281. <imgclass="imgsrc"src="conspiracy_21.jpg"alt="Reconsider your Existence">
  282. <imgclass="imgsrc"src="conspiracy_22.jpg"alt="Something Needs to be Discovered">
  283. <imgclass="imgsrc"src="conspiracy_24.jpg"alt="They Said Very Little">
  284. <imgclass="imgsrc"src="conspiracy_26.jpg"alt="Only in Your Mind">
  285. <imgclass="imgsrc"src="conspiracy_32.jpg"alt="The Power of Imagination">
  286. <imgclass="imgsrc"src="conspiracy_29.jpg"alt="Objectivity is Impossible">
  287. <imgclass="imgsrc"src="conspiracy_31.jpg"alt="Cleaning Up Operation">
  288. <imgclass="imgsrc"src="conspiracy_17.jpg"alt="Arbitrary Contents">
  289. <divid="bkgcaption"></div>
  290. <divid="caption"></div>
  291. </div>
  292. <scripttype="text/javascript">
  293. /* ==== start script ==== */   
  294. function dom_onload() {   
  295.     if(document.getElementById("diapoContainer")) diapo.init(); else setTimeout("dom_onload();", 128);   
  296. }   
  297. dom_onload();   
  298. </script>
  299. </body>
  300. </html>

相關推薦

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

Javascript應用--窗戶裡的圖片展示效果（圖片換成自己的即可執行）

Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd

52.原型1 圖片放大效果（動態面板的嵌套使用）

width 同時 重復 添加 再次 包含 移動 背景圖片 alt 首先給動態面板添加一個背景圖片 導入之後只顯示一部分 要進行設置 下方的“重復”設置 選擇拉伸以包含 設置好大小以及位置 然後給面板設置鼠標移入時的動作 放大面板 懂哈ushi線性 同時設置移出時還原原本

JS實現動態圖片展示效果

http://www.111cn.cn/boke/blog/show.php?uid=kp12345&id=28&fid=13691效果挺不錯的，呵<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "ht

jQuery實現QQ空間圖片展示效果

[ { "id": "1.jpg", "title": "圖片1", "user": "M.J", "avatar": "http://0.gravatar.com/avatar/8a97a5bce

JavaScript多張圖片放大鏡效果（不限定圖片尺寸，rem單位）

效果如下：可以展示圖片列表的放大鏡效果，圖片尺寸沒有要求會自動調整至水平垂直居中效果程式碼如下，除了圖片要替換一下，其它的可直接執行檢視效果，enlarge是圖片要放大檢視的倍數，注意：.bigBox的寬高與.tool的寬高比值要與enlarge保持一致，比如本例中這個比值是

jQuery例項：圖片展示效果

開始之前，我就喜歡先看一下效果： http://www.cnblogs.com/QLeelulu/archive/2008/04/01/1133112.html 張娜拉，韓國的 My Digital Story 不知道是什麼圖來的 我的Logo，Studio拼

Echarts + Web實現大屏展示效果（一）

一、效果展示 二、資源下載 1、圖片資源下載        點選這裡 2、js+css 檔案資源下載  點選這裡 三、Demo實現 1、文件結構如下圖所示： 2、Demo.html 程式碼 <!DOCTYPE html> <html l

jQuery:書籍展示效果（水平滾動）

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52

基於javascript實現圖片懶載入（適用於pc端與h5）

這篇文章主要介紹了javascript實現圖片懶載入的方法及思路，在實際開發中有時我們需要用懶載入，也就是延遲載入圖片的方式，來提高網站的親和力,需要的朋友可以參考下。 一、定義 　　圖片延遲載入也稱為懶載入，延遲載入圖片或符合某些條件時才載入某些圖片，通常用於圖片比

Canvas圖片模糊效果（學習筆記）

Canvas圖片模糊效果學習視訊：http://www.imooc.com/learn/601 Demo和學習筆記 index.html <!DOCTYPE html> <html> <head> <meta charset="U

JavaScript實現簡單的圖片輪播（通過點選左右焦點切換）

最終實現效果圖 程式碼塊 <!DOCTYPE html> <html lang="en"> <head> <meta charset

tensorflow圖片預處理和測試效果（resize，crop，pad等）

#%% 讀圖片程式碼 import matplotlib.pyplot as plt # plt 用於顯示圖片 import matplotlib.image as mpimg # mpimg 用於讀取圖片 import tensorflow as tf test_ima

[酷播雲]視頻調用效果（酷播雲代碼使用）

ash ron pan 終端 mov src eos logs v.net [酷播雲]視頻調用效果（酷播雲代碼使用）示例 第1種：多終端 （推薦使用，該代碼可自動兼容微信、手機、PC、平板、智能電視終端） <script src=‘//player.pol

手把手教你Chrome瀏覽器安裝Postman（含下載雲盤鏈接）(轉)

地址欄 用戶 width 選擇 如圖所示 新版 調試 img 發送 文章轉自http://www.ljwit.com/archives/php/278.html 說明： Postman不多介紹，是一款功能強大的網頁調試與發送網頁HTTP請求的Chrome插件。本文主要介紹下

javascript腳本實現瀏覽器自動點擊（阿裏員工秒殺月餅）

-i 窗口 disabled 一個 detail 筆記 學習 firefox ssi 原文地址https://blog.csdn.net/ani521smile/article/details/52575063 秒殺活動頁面 <!DOCTYPE HTML> &

【Unity】實現“擠開”效果（不使用自帶物理引擎）【改】

今天發現被撞擊的小球移動有些生硬，所以改了一下被撞擊之後小球的移動方式。 using System.Collections; using System.Collections.Generic; using UnityEngine; public class Player : MonoB

【Unity】實現“擠開”效果（不使用自帶物理引擎）

using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; public class Player : MonoBehaviour { //

前端每日實戰：140# 視訊演示如何用純 CSS 創作文字的淡入動畫效果（並祝大家中秋節快樂！）

效果預覽 按下右側的“點選預覽”按鈕可以在當前頁面預覽，點選連結可以全屏預覽。 可互動視訊 此視訊是可以互動的，你可以隨時暫停視訊，編輯視訊中的程式碼。 請用 chrome, safari, edge 開啟觀看。 原始碼下載 每日前端實戰系列的全部原始碼請從