202 移动端常用开发插件:fastclick ,Swiper ,lsuperslide,iscroll,zy.media.js

1.5.1 什么是插件

移动端要求的是快速开发,所以我们经常会借助于一些插件来帮我完成操作,那么什么是插件呢?

JS 插件:是 js 文件,它遵循一定规范编写,方便程序展示效果,拥有特定功能且方便调用。如轮播图和瀑布流插件。

特点:它一般是为了解决某个问题而专门存在,其功能单一,并且比较小。

我们以前写的animate.js 也算一个最简单的插件

fastclick 插件解决 300ms 延迟。

GitHub官网地址: https://github.com/ftlabs/fastclick


1.5.2 插件的使用

  1. 引入 js 插件文件。
  2. 按照规定语法使用。
  3. fastclick 插件解决 300ms 延迟。
  4. GitHub官网地址: https://github.com/ftlabs/fastclick
    if ('addEventListener' in document) {
                document.addEventListener('DOMContentLoaded', function() {
                           FastClick.attach(document.body);
                }, false);
    }

1.5.3 Swiper 插件的使用

中文官网地址: https://www.swiper.com.cn/

  1. 引入插件相关文件。
  2. 按照规定语法使用

1.5.4 其他移动端常见插件:lsuperslide、iscroll

lsuperslide: http://www.superslide2.com/

l iscroll: https://github.com/cubiq/iscroll


1.5.5 插件的使用总结

1.确认插件实现的功能

2.去官网查看使用说明

3.下载插件

4.打开demo实例文件,查看需要引入的相关文件,并且引入

5.复制demo实例文件中的结构html,样式css以及js代码


1.5.6 移动端视频插件 zy.media.js

H5 给我们提供了 video 标签,但是浏览器的支持情况不同。

不同的视频格式文件,我们可以通过source解决。

但是外观样式,还有暂停,播放,全屏等功能我们只能自己写代码解决。

这个时候我们可以使用插件方式来制作。

我们可以通过 JS 修改元素的大小、颜色、位置等样式。

原文地址:https://www.cnblogs.com/jianjie/p/12195957.html

时间: 2024-11-05 19:32:08

202 移动端常用开发插件:fastclick ,Swiper ,lsuperslide,iscroll,zy.media.js的相关文章

Eclipse常用开发插件

以下是我整理的自己开发过程中的常用Eclipse插件,按字母排序: (1)    AmaterasUML         介绍:Eclipse的UML插件,支持UML活动图,class图,sequence图,usecase图等:支持与Java class/interface之间的相互导入导出.         官方网站:http://amateras.sourceforge.jp/cgi-bin/fswiki_en/wiki.cgi?page=AmaterasUML         插件下载UR

移动端触摸滑动插件Swiper

移动端触摸滑动插件Swiper 04/02/2015 一.了解Swiper 目前移动端项目一般都需要具有触屏焦点图的效果,如果你也需要实现这一功能的话,Swiper是一个不错的选择. 1.他不需要加载任何公共库(如jQuery)即可运行,这保证了Swiper的轻量和运行速度.Swiper也可以在加载了公共库的环境下安全的动行,如jQuery,Zepto,jQuery Moblie等. 2.Swiper默认的触摸比例为1:1,你可以通过修改Swiper的设置来改变这个比例. 3.Swiper 增加

Sublime Text 前端开发常用扩展插件推荐

Sublime Text 前端开发常用扩展插件推荐 Sublime Text Sublime Text 是程序员们公认的编码神奇,拥有漂亮的用户界面和强大的功能 更重要的是,Sublime Text 易于扩展,众多开发人员为其贡献插件,而且通过包管理工具 —— Package Control 可以方便安装和管理. Package Control 安装方法 首先通过快捷键 ctrl+` 或者 View > Show Console 打开控制台,然后粘贴相应的 Python 安装代码. Sublim

开发extjs常用的插件

Spket是目前支持Ext 2.0最为出色的IDE. 它采用.jsb project file 文件并将继承于基类和所有文档的内容嵌入到生成代码提示的Script doc中.注:不支持配置项的代码提示. 一.Spket Eclipse插件与IDE Spket提供了Eclipse插件和独立的IDE环境来支持ExtJs开发,下载地址:http://spket.com/download.html,在下载页面找到如下图所示的地方. Plugin是将Spket直接配置为Eclipse插件进行使用,而Spk

常用的前端开发插件与工具合集

常用的前端开发插件与工具合集 Font Awesome字体图标插件 Font Awesome的矢量图标,将使您的网站在视网膜级的高分屏上大放异彩. 完美兼容其它框架 尽管是为Bootstrap设计,但Font Awesome同样能与其它框架完美协同运作. Font Awesome https://fontawesome.com/ SweetAlert系列(数据Ajax)插件 SweetAlert 是 JavaScript 原生 'alert' 弹窗的完美替代品... SweetAlert 让弹窗

Sublime Text 3前端开发常用优秀插件介绍

Package Control插件管理 提到Sublime Text插件安装,就不得不提Package Control [官方文档] 简而言之,它是用来管理插件的插件 所以,首次使用前也是需要安装的 使用Ctrl+`(Esc键下方)快捷键或者通过View->Show Console菜单打开命令行 将以下代码复制后粘贴到如上图中"<代码粘贴处>",然后按Enter(回车),稍等片刻 import urllib.request,os,hashlib; h = '2915d

移动端页面开发的一些常用的设置

viewport 视口(可视区窗口)设置详解 当我们试图在iPhone中输出屏幕宽度的时候,会发现屏幕宽度是980,居然和pc屏幕宽度差不多大 苹果主导的这些手机厂商,为了使用户获得完整的WEB体验,很多设备都会欺骗浏览器返回一个数值较大的视口,告诉浏览器,别以为我身子小,但是我想以980px宽度显示这个页面(分辨率和视口没有关系(开发中根据视口来算的)) 视口对于我们实现响应式是很不方便的.980太大了,不符合我们心中的期待,我们心中认为手机屏幕尺寸应该在320到400之间 默认不设置view

移动端web开发常见问题

上一篇总结了一些有关html5和css3的面试题,这一篇是有关于移动端web开发的常见问题,希望一样对你有一些帮助. Meta相关 1. 添加到主屏后的标题(IOS) <meta name="apple-mobile-web-app-title" content="标题"> 2. 启用 WebApp 全屏模式(IOS) 当网站添加到主屏幕后再点击进行启动时,可隐藏地址栏(从浏览器跳转或输入链接进入并没有此效果) <meta name="a

移动端web开发技巧(转)

原文链接:http://liujinkai.com/2015/06/06/mobile-web-skill/ 移动端web开发技巧 这是一个最好的时代,因为我们站在潮流中:但也是一个最坏的时代,因为我们站在潮头上. META相关 1. 添加到主屏后的标题(IOS) <meta name="apple-mobile-web-app-title" content="标题"> 2. 启用 WebApp 全屏模式(IOS) 当网站添加到主屏幕后再点击进行启动时,