目錄

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

更多項(xiàng)目...

快速瀏覽所有PUI Demo

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

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

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

思路：

因?yàn)閂ue.js是mvvm模式，數(shù)據(jù)驅(qū)動(dòng)視圖，實(shí)現(xiàn)起來(lái)跟jQuery的Dom驅(qū)動(dòng)視圖有點(diǎn)不一樣，但數(shù)據(jù)驅(qū)動(dòng)更加簡(jiǎn)單，只要改變數(shù)據(jù)，視圖將自動(dòng)被更新。

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

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

效果如下：

點(diǎn)擊查看　在線演示

Github地址

?

二、超簡(jiǎn)單的jQuery的Tab選項(xiàng)卡和Accordion折疊菜單

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

效果如下：

點(diǎn)擊查看　在線演示

代碼如下：

$(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)化版

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

效果如下：

?

點(diǎn)擊查看　在線演示

?

四、jQuery+css3輪播公告欄

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

效果如下：

點(diǎn)擊查看　在線演示

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

五、js+CSS3世界時(shí)鐘

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

效果如下：

點(diǎn)擊查看　在線演示

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

總結(jié)

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

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