40款经典前端特效插件---分享

JavaScript016

40款经典前端特效插件---分享,第1张

1.flavr—超级漂亮的jQuery扁平弹出对话框     

2.轻量级触摸响应滑块插件JQuery lightSlider      

3.带37种3D动画特效的跨浏览器CSS3动画框架       

4.jquery整屏滚动插件Scrollify        

5.jquery旋转木马插件SLICK         

6.jquery文字动画插件LetterFX          

7.jquery文本翻转插件Wodry.js       

8.jquery通知插件toastr       

9.jQuery滚动执行动画插件FadeThis      

10.jquery表单验证插件Bootstrap Validator       

11.jCountdown倒计时插件jQuery           

12.iCheck不一样的checkbok         

13.Owl Carousel强大的响应式jQuery焦点图轮播插件   

14.magic-带64种动画效果的CSS3动画库     

15.jQuery实时搜索插件-HideSeek       

16.bootstrap modal对话框             

17.一款模拟CSS3动画的js插件-move.js              

18.可替代CSS3 transition和transform的jQuery插件          

19.基于bootstrap的jQuery多功能模态对话框插件

20.带CSS3过渡效果的js模态窗口插件        

21.支持移动触摸设备的简洁js幻灯片插件

22.jQuery轻量级响应式扁平风格tabs选项卡插件

23.jQuery轻量级响应式Tooltip插件

24.jQuery简单且功能强大的图片剪裁插件

25.带CSS3动画过渡效果的jQuery模态窗口插件

26.中国省市区地址三级联动jQuery插件

27.移动端优先且支持jQuery和Zepto的模态对话框插件

28.jQuery简单实用的tooltip插件

29.带CSS3过渡动画效果的jQuery Tabs选项卡插件

30.x0popup-纯js弹出对话框插件

31.WOW.js-元素在页面滚动时展示CSS3动画JS插件

32.Windows8样式的消息提示框jQuery插件

33.jQuery星级评分插件

34.fsBanner-实用的网站响应式Banner手风琴插件

35.draggabilly-功能强大的拖动拖拽元素插件

36.验证插件vali.js

37.响应式jQuery图片放大镜插件magnificent.js

38.可快速生成各种阴影效果的jQuery插件

39.基于jquery的非常逼真的全屏下雪效果

40.纯文本Loading加载指示器特效

恰好写过。

ng的组件分为两种形式,一种是用directive封装的custom element形式的component,比如Button、Tooltip这种;另外一种则是以Service形式封装成一个单例的object由angular的IoC注入到controller中,比如notification、或者你需要的modal。

首先要为modal服务设计API,比如modal.open modal.close, 然后要为弹出的modal设计遮罩层,并且确定当同时有多个modal出现在页面上时,遮罩层唯一。

其次,出于ng的特殊性,每次open一个新modal时,都需要利用ng内置的$compile服务对modal内的模板进行编译,并且为了支持controllerAs的关键词,这部分连接需要手动在服务中处理(具体怎么处理百度一下吧,很容易)

以下是我当初设计时写的一些参数,或许你可以参照。

API:    

.open(options) => Modal Object Instance    

options ::= {    

    template: String | dom<class|Id>,    

    className: String,    

    scope: AngularScope,    

    hooks:{    

        onOpen: Function,    

        onClose: Function    

    },    

    controller:String,    

    controllerAs:String,       

    title: String    

}    

.closeAll    

.close(id)    

id ::= Number

额外的,这里有一个简单的实现,供你参考https://github.com/btford/angular-modal/blob/master/modal.js