2020-12-04

TouchSlide 是纯javascript打造的触屏滑动特效插件，面向手机、平板电脑等移动终端，
能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。

也是大话主席 superslide旗下的一款移动端触摸滑动插件。superslide也是PC端优秀的js特性插件。

移动端网页触摸内容滑动js插件TouchSlide

DEMO演示地址：http://www.superslide2.com/TouchSlide/demo.html

 

第三个超实用的移动端触摸滑动js插件：iSlider

iSlider是一个表现出众，无任何插件依赖的手机平台javascript滑动组件。它能够处理任何元素，例如图片或者DOM元素。是百度团队开发完成的。
常用的几个移动端插件
zepto.js   //移动端用的，跟jq用法一样，基本没什么两样，所以只要会用jq就会用zepto

echo.js   //这是一个懒加载的插件，跟jquery.lazyload，相比是比较小的吧，没用过，不过是牛人推荐的。

iscroll.js   //主要是做滑动效果的

sortable.js  //拖拽排序人效果

hammer.js  //是一款开源的移动端脚本框架，他可以完美的实现在移端开发的大多数事件，如：点击、滑动、拖动、多点触控等事件。不需要依赖任何其他的框架，并且整个框架非常小，\在使用时非常简单
基于zepto的移动端轻量级日期插件
https://www.cnblogs.com/yuanzm/p/5241323.html
多选
js手机移动端选择插件 mobileSelect.js
https://github.com/onlyhom/mobileSelect.js
http://www.wangeditor.com/
wangEditor
移动端插件
移动端插件的使用---zepto、iScroll、swiper、swipe、fastclick
html5 直播聊天项目—— weLiveShow 微直播 webapp，使用到了 h5+css3+iscroll+zepto+swiper+wlsPop 等技术进行混合开发，实现了互动聊天，给播主打赏、发红包、私信、送礼物等功能。
iScroll是一个高性能，资源占用少，无依赖，多平台的javascript滚动插件。
web前端-移动端常用插件总结（超实用）

萌面怪瘦呀 2018-04-24 10:30:59  5983  收藏 9
文章标签： H5 web前端 移动端H5 前端插件
版权

 1. zepoto.js 轻量级移动端类库，里面有封装tap、swipe事件，类似jquery.js,引用后可用jquery，也可以引用jquery压缩版 
 http://www.zeptojs.cn/#contents

 

 2. touch.js 移动端触摸事件库，zepto的tap事件可能在某些情况下会出问题，所以用touch.js,使用时参考文档库：
 http://www.cnblogs.com/Chen-XiaoJun/articles/5826698.html
  有拖拽、滑动、旋转等 现成的效果

 

 3. hammar.js 类似touch.js

 

 4.fastclick.js 解决click的300ms的延迟和点透bug，通常用tap做点击事件，使用参考：

 
 http://blog.csdn.net/zfy865628361/article/details/49512095

 

 5. annimate.css 动画库 里面定义了一些常用的css动画。 移动端很吃性能，避免频繁操作dom，所以用css3的动画、过度等，性能好，使用时直接加animated和动画的类名即可。

 
 https://daneden.github.io/animate.css/

 

 6. swiper.js 移动端触摸滑动插件，做轮播效果 ，效果以及使用参考: 
 http://www.swiper.com.cn/
 

 

 7.iscroll-4插件 解决web-app中区域滚动问题，滑动时有惯性运动，本质：利用css3属性让dom运动
CSS3移动端插件(zepto,iscroll,swiper,echo)

DaftJayee 2020-07-13 20:02:32  79  收藏
分类专栏： css 文章标签： css
版权
简介：

1.zepto.js（相当于手机端的jq库，轻量级，有些功能比如ajax，touch要引入额外的js(zepto官网有)）

2.iscroll.js(滚动条)

3.swiper.js&swiper.css(滑动)

4.echo.js(懒加载)
1
2
3
4
5
6
7
一、zepto（js库）

jQuery.js  ===>pc
zepto.js   ===>移动端 (轻量级)

相同点：
        api几乎差不多一样
不同点：
        1》事件不同
        2》体积大小

******注意:在移动端页面中使用click事件会有300毫秒的延迟
    
click ===>tap
swipeLeft    四个方向的滑屏
swipeRight
swipeUp
swipeDown
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
二、iscroll.js(滚动条)

IScroll.js插件是兼容所有移动端滚动条事件的插件，在某些安卓机中，我们无法通过overflo:scroll这个css属性来出现滚动条；它也可以非常好的在一个容器元素中处理滚动;

要求:
    1》要给滚动区域加入一个父元素(下面案例的#listIscroll就是这个加入的父元素)
    2》父元素的高度值要小于，滚动区块的高度
    3》new IScroll(".list",{
        
        scrollbars: true 
        是否显示滚动条。默认为false;
        fadeScrollbars:true
        滚动条淡入淡出效果,当然前提是你滚动条显示了。默认为false;
        bounce: false 
        滚动到达容器边界时是否执行反弹动画。默认为true;
        click:true 
        iScroll禁止默认鼠标的点击行为，如果要使用设置true;默认为false;

    });
案例：
 <div id="list" class="list">  <!--new IScroll加给list-->
    <div  id="listIscroll">    <!--“要给滚动区域加入一个父元素，高度小于滚动区域”-->
         <a href="">
               <p>内容1</p>
            </a>
            <a href="">
               <p>内容2</p>
            </a>
            <a href="">
               <p>内容3</p>
            </a>
    </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
三、swiper（滑动）

官网：https://www.swiper.com.cn/

使用：

    1》获取到swiper.js、swiper.css
    2》先把dom元素赋值
    3》new Swiper
    4》设置功能（参数）

        {
            loop:true  ==>循环
            autoplay   ==>自动播放
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
四、图片懒加载（预加载） echo.js
未出现在屏幕上的图片暂时不加载
使用:
1>引入echo.js
2>在dom节点图片上加入

        data-echo='要加载的图片路径'

    3>echo.init()

移动端插件的使用---zepto、iScroll、swiper、swipe、fastclick
osc_hmkjllgv
2019/06/10 13:36
阅读数 87
大咖揭秘Java人都栽在了哪？点击免费领取《大厂面试清单》，攻克面试难关~>>>
　　

1、移动端插件（js类库）---项目中常用（开发中特别喜欢用插件，因为可以提供效率，在减少带宽和减少服务器压力的前提下按需引用插件）

 　　zepto也算一个

　　a、fastclick.js---解决移动端click事件的延迟问题和点透问题（在移动端中click事件有延时，最先触发的是touch事件，之后才是click，大概延时了300ms，延时存在的原因：是为了区分出是单击还是双击事件）

　　　　

 　　b、iScroll.js---一个可以实现客户端原生滑动滚动效果的类库，主要是实现滚动滑动效果的  （也是分模块的，不同的功能在不同的js中）

　　　　

　　　　用iScroll插件实现元素滚动代码非常简洁

　　　　 1、引入插件  iScroll.js(这个js里面就包含了最常见的功能)

　　　　 2、按照文档   

　　　　　　　　　搭建html结构；复制js代码；自己定制功能和样式

　　　　

　　c、swipe.js ---轮播图插件

　　　　使用方式：参照他的说明文档

　　　　例如：js

　　　　　　

　　d、swiper.js---插件兼容pc端，即移动端和pc端都可以使用

　　　　swiper功能还是蛮多的  滑动、轮播、3d切换、（h5 css3）小动画

　　　　官网上有中文文档

h5+css3+iscroll+zepot+swiper+wlsPop架构开发了一个仿陌陌、火山小视频，项目效果挺不错哒！同时解决了在直播页面聊天时候页面撑起的问题。
https://www.jq22.com/demo/jquery-daohuan-150101214822/
人力资源管理系统演示SSO
https://www.cnblogs.com/guushuuse/archive/2009/05/04/1449032.html
web前端项目案例实战
https://www.cnblogs.com/xiaoyan2017/p/9904049.html

http://www.mydiyclub.com/color/color.htm
http://www.mydiyclub.com/color/2_2.htm
http://www.jc2006.com/
https://www.ycfy8.com/
https://netease.im/
纯css3制作的后台管理面板
jquery-能拖拽宽度的table 使用【colResizable】第三方插件
谷歌实现量子超越性？3 分 20 秒解决超算要算 1 万年的问题

StackExchange.Redis通用封装类分享
Mongodb(1)
https://www.zcool.com.cn/discover
http://m.oneniceapp.com/sneakerweb/productdetail?id=211872
https://www.cnblogs.com/gaobing1252/p/9576818.html
https://www.cnblogs.com/xiaoyan2017/p/9807881.html
http://m.oneniceapp.com/sneakerweb/productlist
https://www.120ask.com/ask?title=
https://www.lanrenzhijia.com/js/css3/2446.html