• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >JavaScript > jQuery使用unlock.js插件实现滑动解锁

jQuery使用unlock.js插件实现滑动解锁

作者: 字体:[增加 减小] 来源:互联网 时间:2017-05-11

通过本文主要向大家介绍了unlock.js,unlock优酷插件下载,unlock优酷插件,unlock插件,unlock等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

unlock.js插件具有以下特点:

滑动解锁。

尺寸、颜色、字体大小等都可以个性化定制。

完成解锁后会有回调函数,用来触发进一步的数据处理。

如何使用

1. 首先在页面中引入unlock.css和unlock.js文件。

<link href="css/unlock.css" rel="external nofollow" rel="stylesheet">
<script src='js/unlock.js'></script>
</div>

2. 然后布置简单的HTML的结构,使用一个<div>作为滑块的容器。

<!--滑块容器-->
<div id = "foo"></div> 
</div>

3. 最后初始化插件。在页面DOM元素加载完毕之后,可以通过下面的方法来初始化该滑动解锁插件。

var $container = $('#foo');
$container.slideToUnlock(options); 
</div>

配置参数

unlock.js滑动解锁插件的配置参数有:

参数 默认值 描述
width 默认为容器的宽度 滑块的宽度
height 默认为容器的高度 滑块的高度
bgColor #E8E8E8 滑块的背景颜色
progressColor #FFE97F progress的颜色
handleColor #fff 滑块手柄的颜色
succColor #78D02E
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • jQuery使用unlock.js插件实现滑动解锁

相关文章

  • 2017-05-11HTML中使背景图片自适应浏览器大小实例详解
  • 2017-05-11ES6新特性一: let和const命令详解
  • 2017-05-11微信小程序之picker日期和时间选择器
  • 2017-05-11详解vue事件对象、冒泡、阻止默认行为
  • 2017-05-11Node.js常用工具之util模块
  • 2017-05-11JavaScript自动点击链接 防止绕过浏览器访问的方法
  • 2017-08-17理解websocket协议解决消息发送问题 Could not decode a text frame as UTF-8.
  • 2017-05-11Zepto实现密码的隐藏/显示
  • 2017-05-11Mongoose学习全面理解(推荐)
  • 2017-05-11超全面的javascript中变量命名规则

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • 使用gulp搭建本地服务器并实现模拟ajax
    • jQuery实现导航回弹效果
    • jQuery实现简易的输入框字数计数功能示例
    • JS二叉树的简单实现方法示例
    • JavaScript数组去重的6个方法
    • 支持移动端原生js轮播图
    • jQuery点击头像上传并预览图片
    • jquery实现焦点轮播效果
    • js获取当前页的URL与window.location.href简单方法
    • JS图片压缩(pc端和移动端都适用)

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有