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

目录

一、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总目录

想查看源代码,可以自行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手机端

非常实用的多功能对话框组件,已大规模应用到目前项目手机网页中。效果如下:

点击查看 在线演示

时间: 2024-10-11 17:06:14

近期项目中用到的一些自己写的或者整理而成的前端效果干货的相关文章

之前项目中用到的简单的自定义弹出提示框的实现,整理整理,当然开源的插件很多,但自己写的可以随意发挥

效果如下: html代码: <div class="container"> <div class="wrapper" style="background-color:white; position:relative;"> <div class="box" style="background-color:red; position:absolute; left:100px; top:300

近期开发项目中用到的编码小技巧汇总说明(二)

之前有总结发表过<近期开发项目中用到的编码小技巧汇总说明>,虽没有涉及什么高大上的东西,但都是一些很实用的平时大家可能用到的知识,今天继续分享一些小技巧,欢迎大家了解,不足之处,可以直接评论留言谢谢! 接上篇序号 6.解决当同一个类在不同的项目中(命名空间不同,但类的定义完全相同的情况)使用BinaryFormatter进行序列化后再反序列化时出现找不到程序集的问题或反序列化的结果为null 原代码:(DataSetSurrogate分别在API项目中,客户端项目中都存在,类定义一样但由于不在

细数Java项目中用过的配置文件(ini 篇)

Java 菜鸟,会把可变的配置信息写死在代码里:Java 老鸟,会把可变的配置信息提取到配置文件中.坊间流传这么一句非科学的衡量标准,来评判程序员的级别. 那么,项目中的配置信息,你平时都是怎样来实现的呢?你项目中用过哪些配置文件呢? 近期将结合实际项目或源码,说说这些年用过的那些有关配置的奇技淫巧,看看能否帮你提高研发能力(那怕是提高一丢丢,就算成功). 1. 后缀为 .ini 的文件,你用过没? 后缀为 .ini 的文件,是 Initialization File 的缩写,主要用于程序的初始

项目中用到的那些方便流行的库-强烈推荐

简介 本文主要对我们项目中的使用过的一些库流行库做些介绍,后期再对其中的一些库,如RxJava,RxAndroid,retrofit ,androidannotations,react-native,做细节的分析,到时候再附上使用的demo. 本文中提到的库,都是目前流行的,而且使用量比较大,是非常好用的库,强烈推荐~ Rx系列 ReactiveX是ReactiveExtensions的缩写,简写为Rx,Rx是一个编程模型,目标是提供一致的编程接口,帮助开发者更方便的处理异步数据流,Rx库支持

我在一个前端项目中用js整理的一些通用方法,其中使用到的思想,主要就是约定了。

把名称和后台来的json数据约定起来,可以达到的效果就是可以将东西统一化,减少差异,提升模块等的通用性,此后就可以实现具体不同模块内容可以自动或拷贝赋值的方式 顺带,这个前端项目中用到的控件,一般是手写,其他类型,比如菜单是  accordion.js这个手风琴控件 /* File Created: 十二月 18, 2014  *@Author iGO *@LastModify 2014-12-19 **/ //使用闭包,为了增加开发效率而写的自动化赋值的类 //todo: string对象 添

项目中用到的input 遇到的问题的归类

input 前几天 为了这个词 用在搜索框被我们总监喷,为了加强印象,我把它记录下来 最原始的造型 <input type="text" value="搜索"/> 作成搜索框 比较尴尬,因为鼠标放上去 字居然还在 ,特难受 解决此问题!!!第一中方法 <input type="text" value="搜索" id="sou"/> $("#sou").focus(

iOS 项目中用到的一些开源库和第三方组件

iOS 项目中用到的一些 iOS 开源库和第三方组件 分享一下我目前所在公司 iOS 项目中用到的一些 iOS 开源库和第三方组件, 感谢开源, 减少了我们的劳动力, 节约了我们大量的时间, 让我们有更多的时间和精力能更加专注的做好自己的产品 用到的组件 1.通过CocoaPods安装 项目名称 项目信息 AFNetworking 网络请求组件 FMDB 本地数据库组件 SDWebImage 多个缩略图缓存组件 UICKeyChainStore 存放用户账号密码组件 Reachability 监

项目中用了汉字正则表达式,出现异常:Cannot merge new index 65993 into a non-jumbo instruction

在项目中用了汉字正则表达式,编译并运行,Eclipse控制台输出如下异常信息: Unable to execute dex: Cannot merge newindex 65993 into a non-jumbo instruction!? Conversion to Dalvikformat failed: Unable to execute dex: Cannot merge new index 65993 into anon-jumbo instruction! 解决方法: 将dex.f

python在运维项目中用到的redis数据类型

先感叹下,学东西一定要活学活用!   我用redis也有几年的历史了,今个才想到把集合可以当python list用.  最近做了几个项目都掺杂了redis, 遇到了一些个问题和开发中提高性能的方法,这都分享出来,共同学习. 下面先简单讲讲Redis集合的数据类型. sadd,创建一个集合,并添加数据. [[email protected] ~]# redis-cli redis 127.0.0.1:6379>  redis 127.0.0.1:6379>  redis 127.0.0.1:6