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

JavaScript017

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加载指示器特效

Clipic.js插件可以为移动端 (仅支持移动端) 提供头像上传并裁剪成指定尺寸,用原生js开发的,轻量级,包含html跟css,不到8kb。点此链接体验: https://teojs.github.io/clipic/

https://github.com/teojs/clipic

参数说明

width:Number (默认:500) – 裁剪宽度

height:Number (默认:500) – 裁剪高度

ratio:Number (可选) – 裁剪的比例,当传入ratio时width/height将无效

src:String (必传) – 需要裁剪的图片,可以是图片链接,或者 base64

type:String (默认:jpeg) – 裁剪后图片的类型,仅支持 jpeg/png 两种

quality:Number (默认:0.9) – 压缩质量

buttonText:Array (默认:[‘取消’, ‘重置’, ‘完成’]) – 底部三个按钮文本

http://bbs.itying.com/topic/5cb17892c6a71b10bcef96b0

一、滚动插件,常用于移动端

二、初始化

    (1)html结构:   

        <div class="wrapper">

            只能让第一个子元素滚动

            <div>

                可放入多个子元素

            </div>

        </div>

    (2)css:  外层盒子是定高的

        <1>直接给定一个高度

        <2>在移动端,如果需要滚动,且需要高度全屏

            position: absolute (定位父元素是body)

            top:0

            bottom:0

    (3) 引入iscroll.js

        var myscroll = new IScroll(".wrapper")

三、自定义配置

        var myscroll = new IScroll(".wrapper",{

            scrollX: true,  //能够水平滚动

            scrollY: false , //在水平滚动时,禁止垂直滚动

            snap: "li"  // snap: true

            click: true,

            //如果希望监听滚动事件,则不能引入iscroll.js,

            而需要引入iscroll-probe.js, 同时结合 probeType属性

            probeType: 3 // 也可以是1,2

        })

四、iscroll实例支持的事件

    myscroll.on("scroll",function(){})

    myscroll.on("scrollStart",function(){})

    myscroll.on("scrollEnd",function(){})

    myscroll.on("refresh",function(){})

五、iscoll实例的常用属性

    1. this.currentPage.pageX

    2. this.currentPage.pageY

    3. this.currentPage.x

    4. this.currentPage.y

    5. this.x

    6. this.y

六、实例的方法

    1.myscroll.refresh()  //非常重要的方法,在数据更新后,一定要调用一次该方法

    2. myscroll.scrollTo()

    3. myscroll.scrollBy()

    3. myscroll.goToPage()