近期项目中用到的一些自己写的或者整理而成的前端效果干货(二)

快速浏览所有PUI Demo

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

一、类似Mobiscroll的vue选择器组件-vue-mobiscroll

之前已经用jQuery实现了一个类Mobiscroll的插件,jquery-scroll-cascade-select,而且代码更加精简,现在考虑用比较火的Vue.js来做出类似的组件。

思路

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

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

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

效果如下:

点击查看 在线演示

Github地址

 

二、超简单的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

 

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

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

效果如下:

 

点击查看 在线演示

 

四、jQuery+css3轮播公告栏

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

效果如下:

点击查看 在线演示

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

五、js+CSS3世界时钟

这种实现方式比较特别,且非常繁琐累赘,不适用于生产环境但可以加深你对js控制已加载的CSS文件的操作方式的理解。

效果如下:

点击查看 在线演示

posted @ 2017-04-19 10:30  Fast Mover  阅读(...)  评论(...编辑  收藏
友情链接: 泡妞秘籍 | A4纸尺寸 | 卡通头像 | +申请友情链接