近期項目中用到的一些本身寫的或者整理而成的前端效果乾貨

目錄

1、jQuery 上下滾動抽獎效果
2、JQ地址級聯划動選擇器-中國省市區
3、JQ地址級聯划動選擇器-日期
4、JQ地址級聯划動選擇器-日期時間
5、jQuery + animation.css滑動解鎖
6、jQuery.countdown jQuery倒計時插件
7、Simple Switch 簡單的jQuery Switch開關插件
8、jQuery下拉刷新
9、Three.js全景小遊戲，找小黃豆
10、Egret小遊戲，手勢控制彈球球 
11、jQuery + animate.css 記分牌翻牌效果
12、jQuery中國省市區地址選擇器
十3、React中國省市區地址選擇器
十4、簡單的jQuery + css3內容輪播
十5、CSS3簡單動畫製做
十6、簡單的pixi.js動畫及動畫製做思路
十7、jQ+CSS3轉盤
十8、jQuery.sdialog簡單的jQuery對話框組件For手機端

更多項目...

快速瀏覽全部PUI Demo 

想查看源代碼，能夠自行F12，或在github中直接查看源碼，或者歡迎直接留言。

1、jQuery上下滾動抽獎效果

這jQuery插件主要是被使用到一些抽獎頁面。效果以下：

點擊查看　在線演示

 

2、JQ地址級聯划動選擇器-中國省市區

純前端實現的地址級聯選擇器，這種類mobiscroll級聯地址選擇器很是實用。效果以下：

點擊查看　在線演示

 

3、JQ地址級聯划動選擇器-日期

類mobiscroll級聯日期選擇器。效果以下：

點擊查看　在線演示

 

4、JQ地址級聯划動選擇器-日期時間

類mobiscroll級聯日期時間選擇器。效果以下：

點擊查看　在線演示

 

5、jQuery + animation.css滑動解鎖

類iphone滑屏解鎖交互效果。效果以下：

點擊查看　在線演示

 

6、jQuery.countdown jQuery倒計時插件

可自定義的jQuery倒計時插件。效果以下：

點擊查看　在線演示

 

7、Simple Switch 簡單的jQuery Switch開關插件

目錄比較經常使用的開關選擇器。效果以下：

點擊查看　在線演示

 

8、jQuery下拉刷新

類原生的目前比較流行的下拉刷新jQuery插件。效果以下：

點擊查看　在線演示

 

9、Three.js全景小遊戲，找小黃豆

Three.js入門級的Demo使用例子，全影效果震撼裝逼一流。效果以下：

點擊查看　在線演示

 

10、Egret小遊戲，手勢控制彈球球

Egret是專業的h5遊戲製做引擎，做爲前端不學一下裝裝Ｂ說不過去，不過要用到typescript，有面向對象的編碼思路，可能有些人不太習慣呵可。注意玩法是要左右甩甩手機來控制球球移動，效果以下：

點擊查看　在線演示

 

11、jQuery + animate.css 記分牌翻牌效果

類翻牌效果，籃球比賽常常看到的記份牌就這效果。效果以下：

點擊查看　在線演示

 

12、jQuery中國省市區地址選擇器

純前端實現的級聯的地址下拉選擇器。效果以下：

點擊查看　在線演示

 

十3、React中國省市區地址選擇器

純前端實現的級聯的地址下拉選擇器。效果以下：

點擊查看　在線演示

 

十4、簡單的jQuery + css3內容輪播

上下翻屏滾動類的內容輪播，用於展現促銷信息、中獎信息、滾動新聞等等。效果以下：

點擊查看　在線演示

 

十5、CSS3簡單動畫製做

CSS3手工動畫製做入門類的教程，固然能夠參考animate.css來學習更加容易上手。效果以下：

點擊查看　在線演示

 

十6、簡單的pixi.js動畫及動畫製做思路

pixi.js是個很是不錯的動畫製做引擎，能夠用來製做很眩的動畫效果，這裏是入門級的使用範例。效果以下：

點擊查看　在線演示

 

十7、jQ+CSS3轉盤

能夠直接修改用於本身的抽獎轉盤，轉動角度及時間能夠自定義。效果以下：

點擊查看　在線演示

 

十8、jQuery.sdialog簡單的jQuery對話框組件For手機端

很是實用的多功能對話框組件，已大規模應用到目前項目手機網頁中。效果以下：

點擊查看　在線演示