原创 javascript 圖片懶加載

對於有較多圖片的網頁,如果我們一次把圖片全部加載完會嚴重影響頁面加載速度和浪費帶寬的,在這種情況下就需要用到懶加載。懶加載的實現原理是,在可視區域內的圖片先加載出來,沒有在可視區內的圖片先用一張默認的小圖片代替。隨着頁面的滑動,下邊的圖片

原创 css3遮罩——新功能引導層

看了張鑫旭的《騰訊微雲黑色遮罩引導蒙版更好的CSS實現方式》和《CSS3下的圓形遮罩效果實現與應用》,終於搞明白了遮罩新功能引導層是如何實現的。 原文鏈接:http://www.zhangxinxu.com/wordpress/?p=52

原创 css3動畫庫

CSS Animation-非常全的動畫庫 演示地址    下載地址:http://www.dowebok.com/98.html CSS Shake – 搖擺搖擺!動感的 CSS 抖動效果 演示地址    github下載地址:

原创 htmlcanvas2實現將網頁生成圖片,自定義保存圖片的名稱

首先熟悉htmlcanvas2的使用方法,看看github的使用說明 https://github.com/niklasvh/html2canvas html2canvas(document.body).then(fun

原创 幾款表單驗證插件

nice validator 簡單、智能、令人愉悅的表單驗證方案,需要引入jQuery https://niceue.com/validator/ Validform   一行代碼搞定整站的表單驗證,需要引入jQuery http://v

原创 checkbox實現全選,全不選,反選。Bootstrap-用ICheck插件給CheckBox換新裝!

先來了解一下checkbox的checked屬性。複選框的正確使用方法:複選框選中,就爲複選框增加checked屬性,複選框不選中,移除checked屬性。無論複選框的checked屬性是true和false,複選框都是選中的。jquer

原创 css3實現小箭頭,各種圖形

https://segmentfault.com/a/1190000002780453#articleHeader18 css實現各種圖形真是太讚了,再也不用切圖了,直接用css就可以實現。 最常用的就是用css實現的小三角了 #tr

原创 CSS小技巧

1 如何實現盒子在頁面中水平垂直居中 .mydiv{width:300px;height:200px;position:absolute;left:50%;top:50%;margin:-100px 0 0 -150px; } 2 左

原创 css3實現多行文本溢出顯示省略號...

我們常用的就是實現單行文本溢出顯示省略號,此時需要定寬度,代碼如下: .box{width:200px; overflow: hidden; text-overflow:ellipsis;//文本溢出顯示省略號

原创 JQuery實現點擊縮略圖查看大圖效果

點擊縮略圖查看大圖效果,這裏存在一個如何獲取圖片真實大小的問題。在手機端頁面,插入的圖片大小都是按照圖片的原始尺寸在展示的,如果圖片太大完全超出手機的屏幕尺寸 ,我們的bootstrap響應式針對圖片的解決方案如下: .img-resp

原创 offsetWidth,clientWidth的區別

偏移量 offsetWidth    元素在水平方向上佔用的空間大小                        包括元素的寬度、可見的垂直滾動條寬度、左邊框高度和右邊框高度                         offset

原创 調用微信接口實現圖片預覽效果

最近在微信開發中用到了點擊圖片查看預覽圖的效果。在網上搜到了兩種解決方案,大家可以作爲參考:解決方案一:http://www.mamicode.com/info-detail-124081.html解決方案二:http://www.cn

原创 jQuery京東分類導航菜單

$('.all-sort-list > .item').hover(function(){ var eq = $('.all-sort-list > .item').index(this), //獲取當前滑過是第幾個元素

原创 js事件委託

一個ul列表,裏邊有一個1000個li元素,如何爲這1000個li元素添加click事件? <ul id="list"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</l

原创 jQuery跟隨鼠標方向出現遮罩層

鼠標進入和鼠標離開,判斷鼠標劃入的方向,direction:0上 1右 2下 3左 *{margin:0;padding:0;list-style: none;} .main{width:922px;margin:0 auto;} .i