目錄

一、類似Mobiscroll的vue選擇器組件
二、超簡單的jQuery的Tab選項卡和Accordion折疊菜單
三、jQuery+CSS3流星彈幕優(yōu)化版
四、jQuery+CSS3輪播公告欄
五、js+CSS3世界時鐘

更多項目...

快速瀏覽所有PUI Demo

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

一、類似Mobiscroll的vue選擇器組件－vue-mobiscroll

之前已經(jīng)用jQuery實現(xiàn)了一個類Mobiscroll的插件，jquery-scroll-cascade-select，而且代碼更加精簡，現(xiàn)在考慮用比較火的Vue.js來做出類似的組件。

思路：

因為Vue.js是mvvm模式，數(shù)據(jù)驅(qū)動視圖，實現(xiàn)起來跟jQuery的Dom驅(qū)動視圖有點不一樣，但數(shù)據(jù)驅(qū)動更加簡單，只要改變數(shù)據(jù)，視圖將自動被更新。

步驟一、先給組件添加一些屬性或者綁一些數(shù)據(jù)變量；

步驟二、這一步跟jQuery實現(xiàn)的思路類似，給組件的Dom元素綁定一些Touch、Mouse事件去動態(tài)更新組件的屬性或者變量。這樣就可以了，視圖會自動被更新的。

效果如下：

點擊查看　在線演示

Github地址

?

二、超簡單的jQuery的Tab選項卡和Accordion折疊菜單

有效js代碼只有12行就可以實現(xiàn)兩種功能，完全由jQuery+css控制顯示隱藏

效果如下：

點擊查看　在線演示

代碼如下：

$(function () {// 綁定tabsvar $ne_tabs = $('#ne_tabs'),$ne_body = $('#ne_body');$ne_tabs.find('li').click(function () {var This = $(this);$ne_tabs.find('li').removeClass('selected');$ne_body.find('.page').removeClass('selected');This.addClass('selected');$ne_body.find('#' + This.attr('id') + '_page').addClass('selected');});$ne_body.find('li').click(function () {$(this).toggleClass('active');});}); View Code

?

三、jQuery+CSS3流星彈幕優(yōu)化版

之前實現(xiàn)過用css動畫transition+left來實現(xiàn)，但會出現(xiàn)卡頓的情況，動畫順暢，現(xiàn)優(yōu)化了一下，改為transition + transform:translate3D來實現(xiàn)，比之前流暢多了，有效代碼只有20行左右，可自行F12查看。

效果如下：

?

點擊查看　在線演示

?

四、jQuery+css3輪播公告欄

?其實就是一個無縫輪播組件，實現(xiàn)思路也比較簡單，模擬獲取得到數(shù)據(jù)然后prepend到前面，如果數(shù)據(jù)超過自定義的30條數(shù)據(jù)就刪除掉。

效果如下：

點擊查看　在線演示

注意代碼中的crowns只是個樣式組合，可以不用或者忽略不計，用于區(qū)分第一、第二和第三條數(shù)據(jù)而已。

五、js+CSS3世界時鐘

這種實現(xiàn)方式比較特別，且非常繁瑣累贅，不適用于生產(chǎn)環(huán)境但可以加深你對js控制已加載的CSS文件的操作方式的理解。

效果如下：

點擊查看　在線演示

轉(zhuǎn)載于:https://www.cnblogs.com/fastmover/p/6732063.html

總結

以上是生活随笔為你收集整理的近期项目中用到的一些自己写的或者整理而成的前端效果干货（二）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。