前端效果

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

目录

一、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-08-24 22:22:25

前端效果的相关文章

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

目录 一.jQuery 上下滚动抽奖效果 二.JQ地址级联划动选择器-中国省市区 三.JQ地址级联划动选择器-日期 四.JQ地址级联划动选择器-日期时间 五.jQuery + animation.css滑动解锁 六.jQuery.countdown jQuery倒计时插件 七.Simple Switch 简单的jQuery Switch开关插件 八.jQuery下拉刷新 九.Three.js全景小游戏,找小黄豆 十.Egret小游戏,手势控制弹球球 十一.jQuery + animate.css

(巨坑)改了tpl文件之后,前端效果没反应

通常前端修改很小的部分代码,并不会立即显示出效果.比如,原来是 ,修改后是 虽然只是加多了一个函数,但是作用很大,这种情况下,可能是由于浏览器缓存的原因,修改后的代码没有被重新加载.这个时候,只需要在修改的代码处插入alert(1),这个时候就会使页面重新加载新的代码.

使用$("#codeId").addClass("error");$("#codeId").html("登录名不能为空");向前端添加html代码,前端效果未出来?

$("#codeId").addClass("error"); $("#codeId").html("登录名不能为空"); 判断进行校验登录名为空时,提示信息红色"登录名不能为空",效果未出现的原因: 1.确定jquery已引入并起效 2.确定选择的id是正确的 3.$("#codeId").html("登录名不能为空"); 4.确保"hidden"

扒取网站前端所有的东西,偷取前端效果。放iis中出无法写入webconfig错。

扒网站前端,自己大多数只做后端. 火狐安装ScrapBook插件,在FIREFOX上ALT键,保存页面,ALT+K在侧栏显示,导出文件.一个页面的所有文件(css js)都会打包生成新的文件和一个index. 一个网站,多个页面都可以这样扒取.然后一个页面放一个文件夹.多个文件夹放在一起,放进vs或iis中. 再自己改jquery和改前端和后端交互的事件等. 要设置文件夹权限,否则报错,无法“读取webconfig”文件的错误. 打开iis管理器,在“网站”右击,添加网站, 网站名,随便起.内容

收藏5款基于jquery的web前端效果预览

1.基于jquery的圆形动画按钮 今天要给大家带来一款基于jquery的圆形动画按钮.这款按钮鼠标经过的时候以边框转圈,然后逐渐消息,在实例中给出了四种颜色的demo. 在线演示 源码下载 2.使用jQuery和CSS3制作数字时钟 数字时钟可以应用在一些WEB倒计时效果.WEB闹钟效果以及基于HTML5的WEB APP中,本文将给大家介绍不借助任何图片,如何使用CSS3和HTML来制作一个非常漂亮的数字时钟效果. 在线演示 源码下载 3.基于纯 CSS3 技术实现美观的标签云效果 标签云是博

评论回复jQuery实现前端效果

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css">

点击添加本地图片的前端效果制作

UI就一般就行. 实现点击打开本地上传图片窗口. 方法1:给UI样式"input"的父标签加绝对定位,在UI样式"input"标签后面加<input type="file">,给这个标签设置宽度大小都跟UI样式"input"标签的宽高一致然后通过定位在其上,透明度设为0,这样就可以了. 方法2:不用给UI样式"input"的父标签加绝对定位,<input type="file&q

周末作业:抽屉网前端效果

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,

前端效果库收藏

1.一系列Css transition单一过渡效果:http://leaverou.github.io/animatable/ 2.Css transition过渡效果自定义timing-function:http://cubic-bezier.com(贝塞尔曲线)