近期項目中用到的一些自己寫的或者整理而成的前端效果干貨


目錄

一、jQuery 上下滾動抽獎效果
二、JQ地址級聯划動選擇器-中國省市區
三、JQ地址級聯划動選擇器-日期
四、JQ地址級聯划動選擇器-日期時間
五、jQuery + animation.css滑動解鎖
六、jQuery.countdown jQuery倒計時插件
七、Simple Switch 簡單的jQuery Switch開關插件
八、jQuery下拉刷新
九、Three.js全景小游戲,找小黃豆
十、Egret小游戲,手勢控制彈球球 
十一、jQuery + animate.css 記分牌翻牌效果
十二、jQuery中國省市區地址選擇器
十三、React中國省市區地址選擇器
十四、簡單的jQuery + css3內容輪播
十五、CSS3簡單動畫制作
十六、簡單的pixi.js動畫及動畫制作思路
十七、jQ+CSS3轉盤
十八、jQuery.sdialog簡單的jQuery對話框組件For手機端


更多項目...

快速瀏覽所有PUI Demo 

想查看源代碼,可以自行F12,或在github中直接查看源碼,或者歡迎直接留言。

一、jQuery上下滾動抽獎效果

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

點擊查看 在線演示

 

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

純前端實現的地址級聯選擇器,這種類mobiscroll級聯地址選擇器非常實用。效果如下:

點擊查看 在線演示

 

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

類mobiscroll級聯日期選擇器。效果如下:

點擊查看 在線演示

 

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

類mobiscroll級聯日期時間選擇器。效果如下:

點擊查看 在線演示

 

五、jQuery + animation.css滑動解鎖

類iphone滑屏解鎖交互效果。效果如下:

點擊查看 在線演示

 

六、jQuery.countdown jQuery倒計時插件

可自定義的jQuery倒計時插件。效果如下:

點擊查看 在線演示

 

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

目錄比較常用的開關選擇器。效果如下:

點擊查看 在線演示

 

八、jQuery下拉刷新

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

點擊查看 在線演示

 

九、Three.js全景小游戲,找小黃豆

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

點擊查看 在線演示

 

十、Egret小游戲,手勢控制彈球球

Egret是專業的h5游戲制作引擎,作為前端不學一下裝裝B說不過去,不過要用到typescript,有面向對象的編碼思路,可能有些人不太習慣呵可。注意玩法是要左右甩甩手機來控制球球移動,效果如下:

點擊查看 在線演示

 

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

類翻牌效果,籃球比賽經常看到的記份牌就這效果。效果如下:

點擊查看 在線演示

 

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

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

點擊查看 在線演示

 

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

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

點擊查看 在線演示

 

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

上下翻屏滾動類的內容輪播,用於展示促銷信息、中獎信息、滾動新聞等等。效果如下:

點擊查看 在線演示

 

十五、CSS3簡單動畫制作

CSS3手工動畫制作入門類的教程,當然可以參考animate.css來學習更加容易上手。效果如下:

點擊查看 在線演示

 

十六、簡單的pixi.js動畫及動畫制作思路

pixi.js是個非常不錯的動畫制作引擎,可以用來制作很眩的動畫效果,這里是入門級的使用范例。效果如下:

點擊查看 在線演示

 

十七、jQ+CSS3轉盤

可以直接修改用於自己的抽獎轉盤,轉動角度及時間可以自定義。效果如下:

點擊查看 在線演示

 

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

非常實用的多功能對話框組件,已大規模應用到目前項目手機網頁中。效果如下:

點擊查看 在線演示

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM