近期项目中用到的一些本身写的或者整理而成的前端效果干货（二）

目录

1、相似Mobiscroll的vue选择器组件
2、超简单的jQuery的Tab选项卡和Accordion折叠菜单
3、jQuery+CSS3流星弹幕优化版
4、jQuery+CSS3轮播公告栏
5、js+CSS3世界时钟

更多项目...

快速浏览全部PUI Demo

想查看源代码，能够自行F12，或在github中直接查看源码，或者欢迎直接留言。

1、相似Mobiscroll的vue选择器组件－vue-mobiscroll

以前已经用jQuery实现了一个类Mobiscroll的插件，jquery-scroll-cascade-select，并且代码更加精简，如今考虑用比较火的Vue.js来作出相似的组件。

思路：

由于Vue.js是mvvm模式，数据驱动视图，实现起来跟jQuery的Dom驱动视图有点不同，但数据驱动更加简单，只要改变数据，视图将自动被更新。

步骤1、先给组件添加一些属性或者绑一些数据变量；

步骤2、这一步跟jQuery实现的思路相似，给组件的Dom元素绑定一些Touch、Mouse事件去动态更新组件的属性或者变量。这样就能够了，视图会自动被更新的。

效果以下：

点击查看　在线演示

Github地址

 

2、超简单的jQuery的Tab选项卡和Accordion折叠菜单

有效js代码只有12行就能够实现两种功能，彻底由jQuery+css控制显示隐藏

效果以下：

点击查看　在线演示

代码以下：

        $(function () {
            // 绑定tabs
            var $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

 

3、jQuery+CSS3流星弹幕优化版

以前实现过用css动画transition+left来实现，但会出现卡顿的状况，动画顺畅，现优化了一下，改成transition + transform:translate3D来实现，比以前流畅多了，有效代码只有20行左右，可自行F12查看。

效果以下：

 

点击查看　在线演示

 

4、jQuery+css3轮播公告栏

 其实就是一个无缝轮播组件，实现思路也比较简单，模拟获取获得数据而后prepend到前面，若是数据超过自定义的30条数据就删除掉。

效果以下：

点击查看　在线演示

注意代码中的crowns只是个样式组合，能够不用或者忽略不计，用于区分第1、第二和第三条数据而已。

5、js+CSS3世界时钟

这种实现方式比较特别，且很是繁琐累赘，不适用于生产环境但能够加深你对js控制已加载的CSS文件的操做方式的理解。

效果以下：

点击查看　在线演示