整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
始狀態(tài)
解鎖狀態(tài)
直接上代碼：
<!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>滑動(dòng)解鎖</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>
滑動(dòng)解鎖
</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("滑動(dòng)解鎖");
}else if(dx>=_differ){
dx=_differ;
$(".outer").addClass("act");
$span.html("解鎖成功");
el.html('√');
}
$filter.css('width',dx);
el.css("left",dx);
})
})
})
</script>
</html>
效果圖：
、遇問(wèn)題：
產(chǎn)品說(shuō)：“最近需要弄個(gè)活動(dòng)發(fā)到朋友圈中，我把設(shè)計(jì)圖發(fā)給你”
產(chǎn)品說(shuō)：“有6張?jiān)O(shè)計(jì)圖，我要上下滑動(dòng)翻頁(yè)，都要放在一個(gè)頁(yè)面中啊，還有里面圖片要能動(dòng)！要炫酷！，在加一個(gè)背景音樂(lè)哦”
我（吊炸天，炫酷的，真是折磨人）：“好”
產(chǎn)品：“加油！”
經(jīng)理：“+1”
老板：“+1”
二、解決思路：
1.要炫酷，要花里胡哨，自己寫估計(jì)要耗電時(shí)間，算了，找插件吧
2.滑動(dòng)翻頁(yè)：為了保證用戶體驗(yàn)，不會(huì)再去加載下一頁(yè)，自己放到一個(gè)頁(yè)面，所以每個(gè)頁(yè)面放到一個(gè)DIV中，通過(guò)滑動(dòng)來(lái)顯示指定DIV
2.動(dòng)畫效果:自己使用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">加載頁(yè)</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>這是第一頁(yè)</h1> </div> </section> <!-------------slide2-----------------> <section class="swiper-slide swiper-slide2 swiper-slide-v"> <h1 class="posit_tit"><i class="about_us_tit_ico"></i>這是第二頁(yè)</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">第二頁(yè)中的第1頁(yè)</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">第二頁(yè)中的第2頁(yè)</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">第二頁(yè)中的第3頁(yè)</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插件做滑動(dòng)翻頁(yè)，一般做活動(dòng)廣告宣傳發(fā)到朋友圈，簡(jiǎn)單上手，有炫酷。
五、地址
[演示地址](http://47.105.36.188:3030/toutiao/Swiper上下滑動(dòng)翻頁(yè)面帶背景音樂(lè)/index.html)
[源代碼下載](https://github.com/harryluo163/toutiao/tree/master/Swiper上下滑動(dòng)翻頁(yè)面帶背景音樂(lè))
介：Captcha是開(kāi)源的滑動(dòng)驗(yàn)證碼框架，需要前后端集成，后端可支持Spring Mvc Spring boot項(xiàng)目等 ，前端可支持純Html ， Vue ， Uni-app，原生Android，原生IOS。可快速地集成到項(xiàng)目，后端底層需要依賴Redis進(jìn)行存儲(chǔ)。
成品效果：
新建項(xiàng)目不做演示了
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
# 存儲(chǔ)方式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實(shí)現(xiàn)redis存儲(chǔ)接口CaptchaCacheService，手動(dòng)新建類
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目錄下新建個(gè)services的文件夾，新建文件com.anji.captcha.service.CaptchaCacheService，名字需要是這個(gè)名字，配置該類的類路徑如下圖
最后啟動(dòng)即可
前端項(xiàng)目演示純Html
Html部分代碼
<div id="captchaContent" ></div>JS部分代碼
<script src="component/captcha/js/verify.js" ></script>// 初始化驗(yàn)證碼
var flagReady = true;
$('#captchaContent').slideVerify({
baseUrl:http.getConfig().server.serverUrl+"/user",
containerId:'loginBtn',
mode:'pop',
//圖片的大小對(duì)象
imgSize : {
width: '400px',
height: '200px',
},
barSize:{
width: '400px',
height: '40px',
},
beforeCheck:function(){
var username=$("#userName").val().trim()
if(!username && !flagReady){
toast.error({message:"請(qǐng)輸入用戶名"})
return
}
requestData.username=username;
var password=$("#pwd").val().trim()
if(!password && !flagReady){
toast.error({message:"請(qǐng)輸入密碼"})
return
}
requestData.password=password;
return (username && password) || flagReady;
},
ready : function() { //加載完畢的回調(diào)
flagReady=false;
},
success : function(params) { //成功的回調(diào)
console.log(params,"params");
params.username=requestData.username;
params.password=requestData.password;
login(params);
}
});具體步驟詳情官網(wǎng)API文檔：https://captcha.anji-plus.com/#/doc
源碼地址：https://gitee.com/hdx98k/captcha/tree/master
文章編寫不易，希望對(duì)你有用！！！[機(jī)智]
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
