整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

JQ实现简单的滑动解锁

始状态

解锁状态

直接上代码：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>滑动解锁</title>

<script src="js/jquery-1.11.0.js"></script>

<style>

*{

margin:0;

padding: 0;

box-sizing: border-box;

-webkit-touch-callout: none;

-webkit-user-select: none;

-khtml-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

}

.outer{

position: relative;

margin:20px auto;

width: 200px;

height: 30px;

line-height: 28px;

border:1px solid #ccc;

background: #ccc9c9;

}

.outer span,.filter-box,.inner{

position: absolute;

top: 0;

left: 0;

}

.outer span{

display: block;

padding:0 0 0 36px;

width: 100%;

height: 100%;

color: #fff;

text-align: center;

}

.filter-box{

width: 0;

height: 100%;

background: green;

z-index: 9;

}

.outer.act span{

padding:0 36px 0 0;

}

.inner{

width: 36px;

height: 28px;

text-align: center;

background: #fff;

cursor: pointer;

font-family: "宋体";

z-index: 10;

font-weight: bold;

color: #929292;

}

.outer.act .inner{

color: green;

}

.outer.act span{

z-index: 100;

}

</style>

</head>

<body>

<div class="outer">

<div class="filter-box"></div>

<span>

滑动解锁

</span>

<div class="inner">>></div>

</div>

</body>

<script>

$(function(){

$(".inner").mousedown(function(e){

var el = $(".inner"),os = el.offset(),dx,$span=$(".outer>span"),$filter=$(".filter-box"),_differ=$(".outer").width()-el.width();

$(document).mousemove(function(e){

dx = e.pageX - os.left;

if(dx<0){

dx=0;

}else if(dx>_differ){

dx=_differ;

}

$filter.css('width',dx);

el.css("left",dx);

});

$(document).mouseup(function(e){

$(document).off('mousemove');

$(document).off('mouseup');

dx = e.pageX - os.left;

if(dx<_differ){

dx=0;

$span.html("滑动解锁");

}else if(dx>=_differ){

dx=_differ;

$(".outer").addClass("act");

$span.html("解锁成功");

el.html('√');

}

$filter.css('width',dx);

el.css("left",dx);

})

})

})

</script>

</html>

效果图：

、遇问题：

产品说：“最近需要弄个活动发到朋友圈中，我把设计图发给你”

产品说：“有6张设计图，我要上下滑动翻页，都要放在一个页面中啊，还有里面图片要能动！要炫酷！，在加一个背景音乐哦”

我（吊炸天，炫酷的，真是折磨人）：“好”

产品：“加油！”

经理：“+1”

老板：“+1”

二、解决思路：

1.要炫酷，要花里胡哨，自己写估计要耗电时间，算了，找插件吧

2.滑动翻页：为了保证用户体验，不会再去加载下一页，自己放到一个页面，所以每个页面放到一个DIV中，通过滑动来显示指定DIV

2.动画效果:自己使用CSS插件：animate

三、伪代码

HTML

<div class="swiper-container" id="swiper-container-v">
 <section class="poster_wrap load" id="load">
 <div class="p_loading">
 <div class="p_loading_logo"></div>
 <p class="p_loading_tip">加载页</p>
 </div>
 </section>
 <div class="swiper-wrapper">
 <!-------------slide1----------------->
 <section class="swiper-slide swiper-slide1 swiper-slide-v">
 <div class="index-top ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="1s">
 <h1>这是第一页</h1>
 </div>
 </section>
 <!-------------slide2----------------->
 <section class="swiper-slide swiper-slide2 swiper-slide-v">
 <h1 class="posit_tit"><i class="about_us_tit_ico"></i>这是第二页</h1>
 <div class="swiper-container ani" id="swiper-container-h" swiper-animate-effect="rotateInUpLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0s">
 <div class="swiper-wrapper">
 <div class="swiper-slide slide1">
 <div class="posit_details_head">
 <h3 class="posit_details_tit">第二页中的第1页</h3>
 </div>
 <div class="job_details">
 <span class="job_address">page1</span>
 </div>
 </div>
 <div class="swiper-slide slide2">
 <div class="posit_details_head">
 <h3 class="posit_details_tit">第二页中的第2页</h3>
 </div>
 <div class="job_details">
 <span class="job_address">page2</span>
 </div>
 </div>
 <div class="swiper-slide slide3">
 <div class="posit_details_head">
 <h3 class="posit_details_tit">第二页中的第3页</h3>
 </div>
 <div class="job_details">
 <span class="job_address">page3</span>
 </div>
 </div>
 </div>
 </div>
 </section>
 </div>
 <!--向上箭头-->
 <div class="arrow-box">
 <img src="images/arrow.png" id="array">
 </div>
</div>

四、解析

使用到的是swiper插件做滑动翻页，一般做活动广告宣传发到朋友圈，简单上手，有炫酷。

五、地址

[演示地址](http://47.105.36.188:3030/toutiao/Swiper上下滑动翻页面带背景音乐/index.html)

[源代码下载](https://github.com/harryluo163/toutiao/tree/master/Swiper上下滑动翻页面带背景音乐)

介：Captcha是开源的滑动验证码框架，需要前后端集成，后端可支持Spring Mvc Spring boot项目等 ，前端可支持纯Html ， Vue ， Uni-app，原生Android，原生IOS。可快速地集成到项目，后端底层需要依赖Redis进行存储。

成品效果：

新建 spring boot 项目

新建项目不做演示了

spring boot 集成Captcha

pom.xml文件引入

<!-- https://mvnrepository.com/artifact/com.anji-plus/spring-boot-starter-captcha -->
<dependency>
    <groupId>com.anji-plus</groupId>
    <artifactId>spring-boot-starter-captcha</artifactId>
    <version>1.3.0</version>
</dependency>

在resources目录下引入资源文件如下图

资源文件下载地址：https://gitee.com/hdx98k/captcha/tree/master/service/springboot/src/main/resources/images


application.yml配置

aj:
  captcha:
    jigsaw: classpath:images/jigsaw
  # 自定义背景图切换
    pic-click: classpath:images/pic-click
  # 存储方式redis
    cache-type: redis
    type: default
  # 支持自定义水印
    water-mark: 黄大侠
    slip-offset: 5
    aes-status: true
    interference-options: 2
    font-style: 1
    font-size: 25
    history-data-clear-enable: false
    req-frequency-limit-enable: false
    req-get-lock-limit: 5
    req-get-lock-seconds: 360
    req-get-minute-limit: 30
    req-check-minute-limit: 60
    req-verify-minute-limit: 60

实现redis存储接口CaptchaCacheService，手动新建类

import com.anji.captcha.service.CaptchaCacheService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.redis.core.RedisTemplate;

import java.util.concurrent.TimeUnit;

public class CaptchaCacheServiceRedisImpl implements CaptchaCacheService {

    @Override
    public String type() {
        return "redis";
    }

    @Autowired
    private RedisTemplate redisTemplate;

    @Override
    public void set(String key, String value, long expiresInSeconds) {
        redisTemplate.opsForValue().set(key, value, expiresInSeconds, TimeUnit.SECONDS);
    }

    @Override
    public boolean exists(String key) {
        return redisTemplate.hasKey(key);
    }

    @Override
    public void delete(String key) {
        redisTemplate.delete(key);
    }

    @Override
    public String get(String key) {
        return (String) redisTemplate.opsForValue().get(key);
    }

	@Override
	public Long increment(String key, long val) {
		return redisTemplate.opsForValue().increment(key,val);
	}
}

需要在META-INF目录下新建个services的文件夹，新建文件com.anji.captcha.service.CaptchaCacheService，名字需要是这个名字，配置该类的类路径如下图


最后启动即可

前端集成Captcha

前端项目演示纯Html

Html部分代码

<div id="captchaContent" ></div>

JS部分代码

<script src="component/captcha/js/verify.js" ></script>
// 初始化验证码
var flagReady = true;
$('#captchaContent').slideVerify({
  baseUrl:http.getConfig().server.serverUrl+"/user",
  containerId:'loginBtn',
  mode:'pop',
  //图片的大小对象
  imgSize : {      
    width: '400px',
    height: '200px',
  },
  barSize:{
    width: '400px',
    height: '40px',
  },
  beforeCheck:function(){ 
    var username=$("#userName").val().trim()
    if(!username && !flagReady){
      toast.error({message:"请输入用户名"})
      return 
    }
    requestData.username=username;
    var password=$("#pwd").val().trim()
    if(!password && !flagReady){
      toast.error({message:"请输入密码"})
      return 
    }
    requestData.password=password;
    return (username && password) || flagReady;
  },
  ready : function() {  //加载完毕的回调
    flagReady=false;
  },
  success : function(params) { //成功的回调
    console.log(params,"params");
    params.username=requestData.username;
    params.password=requestData.password;
    login(params);
  }
});

具体步骤详情官网API文档：https://captcha.anji-plus.com/#/doc

源码地址：https://gitee.com/hdx98k/captcha/tree/master

文章编写不易，希望对你有用！！！[机智]


在线咨询
上一篇：听音乐时，大脑会预测未来
下一篇：HTML背景色教程–如何更改Div背景色，并通过代码示例进行了说明

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 昌江区 袁州区 夷陵区 云安县 大厂回族自治县 济宁 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服