2. 程式人生 > >Javascript應用--震撼的圖片展示效果（圖片換成你的圖片名就可以運行了）

Javascript應用--震撼的圖片展示效果（圖片換成你的圖片名就可以運行了）

阿新 • • 發佈：2018-12-31
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>1</title>
  5. <metahttp-equiv="imagetoolbar"content="no">
  6. <styletype="text/css">
  7.     html {   
  8.         overflow: hidden;   
  9.     }   
  10.     body {   
  11.         margin: 0px;   
  12.         padding: 0px;   
  13.         background: #000;   
  14.         width: 100%;   
  15.         height: 100%;   
  16.     }   
  17.     #imageFlow {   
  18.         position: absolute;   
  19.         width: 100%;   
  20.         height: 80%;   
  21.         left: 0%;   
  22.         top: 10%;   
  23.         background: #000;   
  24.     }   
  25.     #imageFlow .diapo {   
  26.         position: absolute;   
  27.         left: -1000px;   
  28.         cursor: pointer;   
  29.         -ms-interpolation-mode: nearest-neighbor;   
  30.     }   
  31.     #imageFlow .link {   
  32.         border: dotted #fff 1px;   
  33.         margin-left: -1px;   
  34.         margin-bottom: -1px;   
  35.     }   
  36.     #imageFlow .bank {   
  37.         visibility: hidden;   
  38.     }   
  39.     #imageFlow .top {   
  40.         position: absolute;   
  41.         width: 100%;   
  42.         height: 40%;   
  43.         background: #181818;   
  44.     }   
  45.     #imageFlow .text {   
  46.         position: absolute;   
  47.         left: 0px;   
  48.         width: 100%;   
  49.         bottom: 16%;   
  50.         text-align: center;   
  51.         color: #FFF;   
  52.         font-family: verdana, arial, Helvetica, sans-serif;   
  53.         z-index: 1000;   
  54.     }   
  55.     #imageFlow .title {   
  56.         font-size: 0.9em;   
  57.         font-weight: bold;   
  58.     }   
  59.     #imageFlow .legend {   
  60.         font-size: 0.8em;   
  61.     }   
  62.     #imageFlow .scrollbar {   
  63.         position: absolute;   
  64.         left: 10%;   
  65.         bottom: 10%;   
  66.         width: 80%;   
  67.         height: 16px;   
  68.         z-index: 1000;   
  69.     }   
  70.     #imageFlow .track {   
  71.         position: absolute;   
  72.         left: 1%;   
  73.         width: 98%;   
  74.         height: 16px;   
  75.         filter: alpha(opacity=30);   
  76.         opacity: 0.3;   
  77.     }   
  78.     #imageFlow .arrow-left {   
  79.         position: absolute;   
  80.     }   
  81.     #imageFlow .arrow-right {   
  82.         position: absolute;   
  83.         right: 0px;   
  84.     }   
  85.     #imageFlow .bar {   
  86.         position: absolute;   
  87.         height: 16px;   
  88.         left: 25px;   
  89.     }   
  90. </style>
  91. <scripttype="text/javascript">
  92. var imf = function () {   
  93.     var lf = 0;   
  94.     var instances = [];   
  95.     function getElementsByClass (object, tag, className) {   
  96.         var o = object.getElementsByTagName(tag);   
  97.         for ( var i = 0, n = o.length, ret = []; i <n; i++)   
  98.             if (o[i].className == className) ret.push(o[i]);   
  99.         if (ret.length == 1) retret = ret[0];   
  100.         return ret;   
  101.     }   
  102.     function addEvent (o, e, f) {   
  103.         if (window.addEventListener) o.addEventListener(e, f, false);   
  104.         else if (window.attachEvent) r = o.attachEvent('on' + e, f);   
  105.     }   
  106.     function createReflexion (cont, img) {   
  107.         var flx = false;   
  108.         if (document.createElement("canvas").getContext) {   
  109. flx = document.createElement("canvas");   
  110. flx.width = img.width;   
  111. flx.height = img.height;   
  112.             var context = flx.getContext("2d");   
  113.             context.translate(0, img.height);   
  114.             context.scale(1, -1);   
  115.             context.drawImage(img, 0, 0, img.width, img.height);   
  116. context.globalCompositeOperation = "destination-out";   
  117.             var gradient = context.createLinearGradient(0, 0, 0, img.height * 2);   
  118.             gradient.addColorStop(1, "rgba(255, 255, 255, 0)");   
  119.             gradient.addColorStop(0, "rgba(255, 255, 255, 1)");   
  120. context.fillStyle = gradient;   
  121.             context.fillRect(0, 0, img.width, img.height * 2);   
  122.         } else {   
  123.             /* ---- DXImageTransform ---- */   
  124. flx     = document.createElement('img');   
  125. flx.src = img.src;   
  126. flx.style.filter = 'flipv progid:DXImageTransform.Microsoft.Alpha(' +   
  127.                                'opacity=50, style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy=' +   
  128.                                (img.height * .25) + ')';   
  129.         }   
  130.         /* ---- insert Reflexion ---- */   
  131. flx.style.position = 'absolute';   
  132. flx.style.left     = '-1000px';   
  133.         cont.appendChild(flx);   
  134.         return flx;   
  135.     }   
  136.     /* //////////// ==== ImageFlow Constructor ==== //////////// */   
  137.     function ImageFlow(oCont, size, zoom, border) {   
  138. this.diapos     = [];   
  139. this.scr        = false;   
  140. this.size       = size;   
  141. this.zoom       = zoom;   
  142. this.bdw        = border;   
  143. this.oCont      = oCont;   
  144. this.oc         = document.getElementById(oCont);   
  145. this.scrollbar  = getElementsByClass(this.oc,   'div', 'scrollbar');   
  146. this.text       = getElementsByClass(this.oc,   'div', 'text');   
  147. this.title      = getElementsByClass(this.text, 'div', 'title');   
  148. this.legend     = getElementsByClass(this.text, 'div', 'legend');   
  149. this.bar        = getElementsByClass(this.oc,   'img', 'bar');   
  150. this.arL        = getElementsByClass(this.oc,   'img', 'arrow-left');   
  151. this.arR        = getElementsByClass(this.oc,   'img', 'arrow-right');   
  152. thisthis.bw         = this.bar.width;   
  153. thisthis.alw        = this.arL.width - 5;   
  154. thisthis.arw        = this.arR.width - 5;   
  155. thisthis.bar.parent = this.oc.parent  = this;   
  156. thisthis.arL.parent = this.arR.parent = this;   
  157. thisthis.view       = this.back       = -1;   
  158.         this.resize();   
  159. this.oc.onselectstart = function () { return false; }   
  160.         /* ---- create images ---- */   
  161.         var img   = getElementsByClass(this.oc, 'div', 'bank').getElementsByTagName('a');   
  162. this.NF = img.length;   
  163.         for (var i = 0, o; o = img[i]; i++) {   
  164.             this.diapos[i] = new Diapo(this, i,   
  165.                                         o.rel,   
  166.                                         o.title || '- ' + i + ' -',   
  167.                                         o.innerHTML || o.rel,   
  168.                                         o.href || '',   
  169.                                         o.target || '_self'   
  170.             );   
  171.         }   
  172.         /* ==== add mouse wheel events ==== */   
  173.         if (window.addEventListener)   
  174.             this.oc.addEventListener('DOMMouseScroll', function(e) {   
  175.                 this.parent.scroll(-e.detail);   
  176.             }, false);   
  177.         else this.oc.onmousewheel = function () {   
  178.             this.parent.scroll(event.wheelDelta);   
  179.         }   
  180.         /* ==== scrollbar drag N drop ==== */   
  181. this.bar.onmousedown = function (e) {   
  182.             if (!e) e = window.event;   
  183.             var scl = e.screenX - this.offsetLeft;   
  184.             var self = this.parent;   
  185.             /* ---- move bar ---- */   
  186. this.parent.oc.onmousemove = function (e) {   
  187.                 if (!e) e = window.event;   
  188. self.bar.style.left = Math.round(Math.min((self.ws - self.arw - self.bw), Math.max(self.alw, e.screenX - scl))) + 'px';   
  189. self.view = Math.round(((e.screenX - scl) ) / (self.ws - self.alw - self.arw - self.bw) * self.NF);   
  190.                 if (self.view != self.back) self.calc();   
  191.                 return false;   
  192.             }   
  193.             /* ---- release scrollbar ---- */   
  194. this.parent.oc.onmouseup = function (e) {   
  195. self.oc.onmousemove = null;   
  196.                 return false;   
  197.             }   
  198.             return false;   
  199.         }   
  200.         /* ==== right arrow ==== */   
  201. thisthis.arR.onclick = this.arR.ondblclick = function () {   
  202.             if (this.parent.view <this.parent.NF - 1)   
  203.                 this.parent.calc(1);   
  204.         }   
  205.         /* ==== Left arrow ==== */   
  206. thisthis.arL.onclick = this.arL.ondblclick = function () {   
  207.             if (this.parent.view > 0)   
  208.                 this.parent.calc(-1);   
  209.         }   
  210.     }   
  211.     /* //////////// ==== ImageFlow prototype ==== //////////// */   
  212. ImageFlow.prototype = {   
  213.         /* ==== targets ==== */   
  214.         calc : function (inc) {   
  215.             if (inc) this.view += inc;   
  216.             var tw = 0;   
  217.             var lw = 0;   
  218.             var o = this.diapos[this.view];   
  219.             if (o && o.loaded) {   
  220.                 /* ---- reset ---- */   
  221.                 var ob = this.diapos[this.back];   
  222.                 if (ob && ob != o) {   
  223. ob.img.className = 'diapo';   
  224. ob.z1 = 1;   
  225.                 }   
  226.                 /* ---- update legend ---- */   
  227.                 this.title.replaceChild(document.createTextNode(o.title), this.title.firstChild);   
  228.                 this.legend.replaceChild(document.createTextNode(o.text), this.legend.firstChild);   
  229.                 /* ---- update hyperlink ---- */   
  230.                 if (o.url) {   
  231. o.img.className = 'diapo link';   
  232. window.status = 'hyperlink: ' + o.url;   
  233.                 } else {   
  234. o.img.className = 'diapo';   
  235. window.status = '';   
  236.                 }   
  237.                 /* ---- calculate target sizes & positions ---- */   
  238. o.w1 = Math.min(o.iw, this.wh * .5) * o.z1;   
  239.                 var x0 = o.x1 = (this.wh * .5) - (o.w1 * .5);   
  240.                 var x = x0 + o.w1 + this.bdw;   
  241.                 for (var i = this.view + 1, o; o = this.diapos[i]; i++) {   
  242.                     if (o.loaded) {   
  243. o.x1 = x;   
  244. o.w1 = (this.ht / o.r) * this.size;   
  245.                         x   += o.w1 + this.bdw;   
  246.                         tw  += o.w1 + this.bdw;   
  247.                     }   
  248.                 }   
  249. x = x0 - this.bdw;   
  250.                 for (var i = this.view - 1, o; o = this.diapos[i]; i--) {   
  251.                     if (o.loaded) {   
  252. o.w1 = (this.ht / o.r) * this.size;   
  253. o.x1 = x - o.w1;   
  254.                         x   -= o.w1 + this.bdw;   
  255.                         tw  += o.w1 + this.bdw;   
  256.                         lw  += o.w1 + this.bdw;   
  257.                     }   
  258.                 }   
  259.                 /* ---- move scrollbar ---- */   
  260.                 if (!this.scr && tw) {   
  261.                     var r = (this.ws - this.alw - this.arw - this.bw) / tw;   
  262. this.bar.style.left = Math.round(this.alw + lw * r) + 'px';   
  263.                 }   
  264.                 /* ---- save preview view ---- */   
  265. thisthis.back = this.view;   
  266.             }   
  267.         },   
  268.         /* ==== mousewheel scrolling ==== */   
  269.         scroll : function (sc) {   
  270.             if (sc <0) {   
  271.                 if (this.view <this.NF - 1) this.calc(1);   
  272.             } else {   
  273.                 if (this.view > 0) this.calc(-1);   
  274.             }   
  275.         },   
  276.         /* ==== resize  ==== */   
  277.         resize : function () {   
  278. thisthis.wh = this.oc.clientWidth;   
  279. thisthis.ht = this.oc.clientHeight;   
  280. thisthis.ws = this.scrollbar.offsetWidth;   
  281.             this.calc();   
  282.             this.run(true);   
  283.         },   
  284.         /* ==== move all images  ==== */   
  285.         run : function (res) {   
  286.             var i = this.NF;   
  287.             while (i--) this.diapos[i].move(res);   
  288.         }   
  289.     }   
  290.     /* //////////// ==== Diapo Constructor ==== //////////// */   
  291. Diapo = function (parent, N, src, title, text, url, target) {   
  292. this.parent        = parent;   
  293. this.loaded        = false;   
  294. this.title         = title;   
  295. this.text          = text;   
  296. this.url           = url;   
  297. this.target        = target;   
  298. this.N             = N;   
  299. this.img           = document.createElement('img');   
  300. this.img.src       = src;   
  301. thisthis.img.parent    = this;   
  302. this.img.className = 'diapo';   
  303. thisthis.x0            = this.parent.oc.clientWidth;   
  304. thisthis.x1            = this.x0;   
  305. this.w0            = 0;   
  306. this.w1            = 0;   
  307. this.z1            = 1;   
  308. thisthis.img.parent    = this;   
  309. this.img.onclick   = function() { this.parent.click(); }   
  310.         this.parent.oc.appendChild(this.img);   
  311.         /* ---- display external link ---- */   
  312.         if (url) {   
  313. this.img.onmouseover = function () { this.className = 'diapo link'; }   
  314. this.img.onmouseout  = function () { this.className = 'diapo'; }   
  315.         }   
  316.     }   
  317.     /* //////////// ==== Diapo prototype ==== //////////// */   
  318. Diapo.prototype = {   
  319.         /* ==== HTML rendering ==== */   
  320.         move : function (res) {   
  321.             if (this.loaded) {   
  322.                 var sx = this.x1 - this.x0;   
  323.                 var sw = this.w1 - this.w0;   
  324.                 if (Math.abs(sx) > 2 || Math.abs(sw) > 2 || res) {   
  325.                     /* ---- paint only when moving ---- */   
  326.                     this.x0 += sx * .1;   
  327.                     this.w0 += sw * .1;   
  328.                     if (this.x0 <this.parent.wh && this.x0 + this.w0 > 0) {   
  329.                         /* ---- paint only visible images ---- */   
  330. this.visible = true;   
  331.                         var o = this.img.style;   
  332.                         var h = this.w0 * this.r;   
  333.                         /* ---- diapo ---- */   
  334. o.left   = Math.round(this.x0) + 'px';   
  335. o.bottom = Math.floor(this.parent.ht * .25) + 'px';   
  336. o.width  = Math.round(this.w0) + 'px';   
  337. o.height = Math.round(h) + 'px';   
  338.                         /* ---- reflexion ---- */   
  339.                         if (this.flx) {   
  340.                             var o = this.flx.style;   
  341. o.left   = Math.round(this.x0) + 'px';   
  342. o.top    = Math.ceil(this.parent.ht * .75 + 1) + 'px';   
  343. o.width  = Math.round(this.w0) + 'px';   
  344. o.height = Math.round(h) + 'px';   
  345.                         }   
  346.                     } else {   
  347.                         /* ---- disable invisible images ---- */   
  348.                         if (this.visible) {   
  349. this.visible = false;   
  350. this.img.style.width = '0px';   
  351.                             if (this.flx) this.flx.style.width = '0px';   
  352.                         }   
  353.                     }   
  354.                 }   
  355.             } else {   
  356.                 /* ==== image onload ==== */   
  357.                 if (this.img.complete && this.img.width) {   
  358.                     /* ---- get size image ---- */   
  359. thisthis.iw     = this.img.width;   
  360. thisthis.ih     = this.img.height;   
  361. thisthis.r      = this.ih / this.iw;   
  362. this.loaded = true;   
  363.                     /* ---- create reflexion ---- */   
  364. this.flx    = createReflexion(this.parent.oc, this.img);   
  365.                     if (this.parent.view <0) thisthis.parent.view = this.N;   
  366.                     this.parent.calc();   
  367.                 }   
  368.             }   
  369.         },   
  370.         /* ==== diapo onclick ==== */   
  371.         click : function () {   
  372.             if (this.parent.view == this.N) {   
  373.                 /* ---- click on zoomed diapo ---- */   
  374.                 if (this.url) {   
  375.                     /* ---- open hyperlink ---- */   
  376.                     window.open(this.url, this.target);   
  377.                 } else {   
  378.                     /* ---- zoom in/out ---- */   
  379. thisthis.z1 = this.z1 == 1 ? this.parent.zoom : 1;   
  380.                     this.parent.calc();   
  381.                 }   
  382.             } else {   
  383.                 /* ---- select diapo ---- */   
  384. thisthis.parent.view = this.N;   
  385.                 this.parent.calc();   
  386.             }   
  387.             return false;   
  388.         }   
  389.     }   
  390.     /* //////////// ==== public methods ==== //////////// */   
  391.     return {   
  392.         /* ==== initialize script ==== */   
  393.         create : function (div, size, zoom, border) {   
  394.             /* ---- instanciate imageFlow ---- */   
  395.             var load = function () {   
  396.                 var loaded = false;   
  397.                 var i = instances.length;   
  398.                 while (i--) if (instances[i].oCont == div) loaded = true;   
  399.                 if (!loaded) {   
  400.                     /* ---- push new imageFlow instance ---- */   
  401.                     instances.push(   
  402.                         new ImageFlow(div, size, zoom, border)   
  403.                     );   
  404.                     /* ---- init script (once) ---- */   
  405.                     if (!imf.initialized) {   
  406. imf.initialized = true;   
  407.                         /* ---- window resize event ---- */   
  408.                         addEvent(window, 'resize', function () {   
  409.                             var i = instances.length;   
  410.                             while (i--) instances[i].resize();   
  411.                         });   
  412.                         /* ---- stop drag N drop ---- */   
  413.                         addEvent(document.getElementById(div), 'mouseout', function (e) {   
  414.                             if (!e) e = window.event;   
  415.                             var tg = e.relatedTarget || e.toElement;   
  416.                             if (tg && tg.tagName == 'HTML') {   
  417.                                 var i = instances.length;   
  418.                                 while (i--) instances[i].oc.onmousemove = null;   
  419.                             }   
  420.                             return false;   
  421.                         });   
  422.                         /* ---- set interval loop ---- */   
  423.                         setInterval(function () {   
  424.                             var i = instances.length;   
  425.                             while (i--) instances[i].run();   
  426.                         }, 16);   
  427.                     }   
  428.                 }   
  429.             }   
  430.             /* ---- window onload event ---- */   
  431.             addEvent(window, 'load', function () { load(); });   
  432.         }   
  433.     }   
  434. }();   
  435. /* ==== create imageFlow ==== */   
  436. //          div ID    , size, zoom, border   
  437. imf.create("imageFlow", 0.15, 1.5, 10);   
  438. </script>
  439. </head>
  440. <body>
  441. <divid="imageFlow">
  442. <divclass="top"></div>
  443. <divclass="bank">
  444. <arel="ct37.jpg"title="Myselves"href="http://www.design-studio.cn/">My identity lies in not knowing who I am</a>
  445. <arel="ct60.jpg"title="Discoveries"href="http://www.design-studio.cn/">...are made by not following instructions</a>
  446. <arel="sf53.jpg"title="Nothing"href="http://www.design-studio.cn/">...can come between us</a>
  447. <arel="sf48.jpg"title="New life"href="http://www.design-studio.cn/">Here you come!</a>
  448. <arel="ct81.jpg"title="Optimists"href="http://www.design-studio.cn/">They don't know all the facts yet</a>
  449. <arel="ct134.jpg"title="Empathy"href="http://www.design-studio.cn/">Emotional intimacy</a>
  450. <arel="ct41.jpg"title="Much work"href="http://www.design-studio.cn/">...remains to be done before we can announce our total failure to make any progress</a>
  451. <arel="ct75.jpg"title="System error"href="http://www.design-studio.cn/">Errare Programma Est</a>
  452. <arel="bl201.jpg"title="Nonexistance"href="http://www.design-studio.cn/">There's no such thing</a>
  453. <arel="ct137.jpg"title="Inside"href="http://www.design-studio.cn/">I抦 now trapped, without hope of escape or rescue</a>
  454. <arel="ct65.jpg"title="E-Slaves"href="http://www.design-studio.cn/">The World is flat</a>
  455. <arel="or105.jpg"title="l0v3"href="http://www.design-studio.cn/">1 l0v3 j00 - f0r3v3r</a>
  456. <arel="ct139.jpg"title="T minus zero"href="http://www.design-studio.cn/">111 111 111 x 111 111 111 = 12345678987654321</a>
  457. <arel="ct27.jpg"title="The End"href="http://www.design-studio.cn/">...has not been written yet</a>
  458. </div>
  459. <divclass="text">
  460. <divclass="title">Loading</div>
  461. <divclass="legend">Please wait...</div>
  462. </div>
  463. <divclass="scrollbar">
  464. <imgclass="track"src="sb.gif"alt="">
  465. <imgclass="arrow-left"src="sl.gif"alt="">
  466. <imgclass="arrow-right"src="sr.gif"alt="">
  467. <imgclass="bar"src="sc.gif"alt="">
  468. </div>
  469. </div>
  470. </body>
  471. </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

MyBatis動態SQL（認真看看， 以後寫SQL就爽多了）

MyBatis 令人喜歡的一大特性就是動態 SQL。 在使用 JDBC 的過程中， 根據條件進行 SQL 的拼接是很麻煩且很容易出錯的。 MyBatis 動態 SQL 的出現， 解決了這個麻煩。 MyBatis通過 OGNL 來進行動態 SQL 的使用的。 目前， 動態 SQL 支援以下幾種標籤

curl -l的資訊詳解（這樣還看不懂，就沒天理了）

[[email protected] ~]# curl -I "http://www.baidu.com" HTTP/1.1 200 OK Accept-Ranges: bytes Cache-Control: private, no-cache, no-store, proxy-reva

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

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

js實現圖片滑動及放大鏡效果（仿淘寶京東圖片展示）

程式碼地址： https://github.com/EsionChang/HTML/tree/master/ThreeInOne 實現效果為： 滑鼠放到小圖上，上部的大圖會滑動到相應的位置，滑動方式為減速。滑鼠移動到上部的大圖上，會顯示大圖的對應放大部位。

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

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

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

jQuery例項：圖片展示效果

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

Android 系統自帶圖片裁剪功能（適配7.0、8.0、對了還有小米手機）

前段時間寫了如何獲取相簿和拍照之後的照片並且進行顯示和上傳，這一次是如何進行圓形影象製作，經常看我寫的筆記的人會知道，我很懶。那麼我就懶的自定義了，目前需求就用原生的就好了，大神的輪子，我會在後面進行推薦。這篇筆記是依賴於：Android呼叫相簿、相機（相容6.0、7.0、8.0） 文

【CV學習筆記】———— 基本圖片處理知識（此坑還未填完，不定期更新）

題外話：最近一段時間學校比賽賊多，都是一些創新創業類的，超級費腦子，每天晚上都是一波頭腦風暴，找老師找小夥伴一起討論，每次都是第一天的點子第二天就被我們自己否決了，不得不說，創新創業類的比賽發現機會的眼光很重要，勇氣更重要 ——————————————————————————以下為正文—

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

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

【Javascript學習筆記】【DOM實戰— —jQ實現點選任意位置關閉某處的效果（常用於模態框後面的遮罩層）】

【Javascript學習筆記】 目錄 目錄 原理 效果 程式碼 實戰程式碼 快捷連結 點選任意位置關閉某處 而且點選對應處並不會hide掉自己 原理

TP 5 上傳圖片回顯 （AJAX非同步上傳圖片TP5)

直接上程式碼 PHP程式碼如下 /** * 上傳 */ public function upload_photo(){ $file = $this

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

圖片內容管家 （把文字隱藏到圖片裡）

最近學習 javafx 自己編寫了一款軟體  （網上雖然也有類似功能的軟體，但是介面不夠美觀，功能比較單一，或者操作比較複雜） 注：安裝說明、使用說明、關於等更多詳細資訊，請訪問官方網址。 軟體直接下載地址：特別說明：需要軟體使用前需要安裝 java執行環境。（ 官網和3

【CV學習筆記】———— 基本圖片處理知識（此坑還未填完，不定期更新）

題外話：最近一段時間學校比賽賊多，都是一些創新創業類的，超級費腦子，每天晚上都是一波頭腦風暴，找老師找小夥伴一起討論，每次都是第一天的點子第二天就被我們自己否決了，不得不說，創新創業類的比賽發現機會的眼光很重要，勇氣更重要 ———————————————————