zikkeung zikkeung
zikkeung
/ Html5實現末上傳圖片即可預覽.html
Last active
November 26, 2019 07:25
|-|{"files":{"Html5實現末上傳圖片即可預覽.html":{"env":"plain"},"readAsDataURL":{"env":"plain"}},"tag":"Uncategorized"}
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Image preview on realtime</title> | |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> | |
| <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> | |
| </head> | |
| <body> | |
| <h3>即時預覽Image</h3> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <title>Document</title> | |
| <style type="text/css"> | |
| p{ | |
| font-size:20px; | |
| background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); | |
| -webkit-background-clip: text; |
zikkeung
/ IE支持CSS3多背景
Created
July 23, 2013 10:15
多背景CSS中中越靠前的图片越在上面显示，对于IE浏览器，滤镜所带来的背景是在上面显示的，由于滤镜的背景图无法定位
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #multi-bg { | |
| background: url(images/bg-image-1.gif) top left repeat; | |
| background: url(images/bg-image-1.gif) center center no-repeat, url(images/bg-image-2.gif) top left repeat; | |
| filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='images/bg-image-2.gif', sizingMethod='crop'); | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <video width="640" height="360" controls> | |
| <source src="__VIDEO__.MP4" type="video/mp4" /> | |
| <source src="__VIDEO__.OGV" type="video/ogg" /> | |
| <object width="640" height="360" type="application/x-shockwave-flash" data="__FLASH__.SWF"> | |
| <param name="movie" value="__FLASH__.SWF" /> | |
| <param name="flashvars" value="controlbar=over&image=__POSTER__.JPG&file=__VIDEO__.MP4" /> | |
| <img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__" | |
| title="No video playback capabilities, please download the video below" /> | |
| </object> | |
| </video> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| -webkit-backface-visibility: hidden; | |
| -moz-backface-visibility: hidden; | |
| -ms-backface-visibility: hidden; | |
| backface-visibility: hidden; | |
| -webkit-perspective: 1000; | |
| -moz-perspective: 1000; | |
| -ms-perspective: 1000; | |
| perspective: 1000; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| window.addEventListener('keydown', function (e) { | |
| if (e.keyIdentifier === 'F12') { | |
| require('nw.gui').Window.get().showDevTools(); | |
| } | |
| }); |
zikkeung
/ HTML5的datalist实现自动补齐功能
Created
August 2, 2013 02:35
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <input name="frameworks" list="frameworks" /> | |
| <datalist id="frameworks"> | |
| <option value="Foundation"> | |
| <option value="Bootstrap"> | |
| <option value="Dojo Toolkit"> | |
| <option value="jQuery"> | |
| <option value="YUI"> | |
| </datalist> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| * { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| #container * { | |
| border: 1px solid black; | |
| } |
zikkeung
/ IE下面的CSS设置滚动条
Created
August 2, 2013 03:07
Thumb: 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
Track: 滚动条的轨道（里面装有Thumb）
Buttons: 滚动条的轨道的两端，允许通过点击微调小方块的位置。
Corner: 两个滚动条的交汇处。
Resizer: 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| scrollbar-arrow-color: color; /*三角箭头的颜色*/ | |
| scrollbar-face-color: color; /*立体滚动条的颜色（包括箭头部分的背景色）*/ | |
| scrollbar-3dlight-color: color; /*立体滚动条亮边的颜色*/ | |
| scrollbar-highlight-color: color; /*滚动条的高亮颜色（左阴影？）*/ | |
| scrollbar-shadow-color: color; /*立体滚动条阴影的颜色*/ | |
| scrollbar-darkshadow-color: color; /*立体滚动条外阴影的颜色*/ | |
| scrollbar-track-color: color; /*立体滚动条背景颜色*/ | |
| scrollbar-base-color:color; /*滚动条的基色*/ |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link rel="apple-touch-icon" href="/apple-touch-icon.png"/> | |
| <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-precomposed.png"/> | |
| 以上你只能选其一，二者的区别在于如果使用apple-touch-icon，那么iOS会给icon加上一些NB的效果， | |
| 包括圆角，阴影，反光。如果使用apple-touch-icon-precomposed则iOS不会加这个效果。 | |
| 如果你的网站也要可以在Ipad上访问，那么你还要针对不同的设备准备不同尺寸的icon， | |
| 你可以通过sizes属性来指定icon的尺寸： | |
| <link rel="apple-touch-icon" href="touch-icon-iphone.png" /> |
OlderNewer