大家好我需要有关此编码的帮助,因为我想让某人在刷卡解锁时访问特定页面,而当滑动结束时,此人应自动转移到特定页面。
请帮助谢谢
$(function () {
$('.opened').hide();
$('.closed').draggable({
axis: 'x',
containment: 'parent',
drag: function (event, ui) {
if (ui.position.left > 230) {
}
},
stop: function (event, ui) {
if (ui.position.left < 230) {
$(this).animate({ left: 17 });
}
if (ui.position.left < 15) {
$(this).animate({ left: 17 });
}
if (ui.position.left > 230) {
$(this).animate({ left: 230 }, function () {
$(this).hide().animate({ left: 17 });
$('.opened').show();
$('.padlock-loop').addClass('padlock-open');
});
}
}
});
$('.opened').draggable({
axis: 'x',
containment: 'parent',
drag: function (event, ui) {
if (ui.position.left < 5) {
}
},
stop: function (event, ui) {
if (ui.position.left > 15) {
$(this).animate({ left: 230 });
}
if (ui.position.left > 230) {
$(this).animate({ left: 230 });
}
if (ui.position.left < 15) {
$(this).animate({ left: 17 }, function () {
$(this).hide().animate({ left: 230 });
$('.closed').show();
$('.padlock-loop').removeClass('padlock-open');
});
}
}
});
});
//@ sourceURL=pen.js
body {
background: #5b8052;
font-family: "helvetica neue", helvetica, arial, sans-serif;
font-size: 0.8em;
}
.padlock {
position: absolute;
margin: 0 auto;
left: 50%;
top: 50%;
margin-top: -125px;
margin-left: -30px;
}
.padlock-loop {
position: absolute;
display: block;
top: 8px;
margin-bottom: 8px;
margin-left: 4px;
height: 30px;
width: 40px;
border-top: 6px solid #4D7046;
border-left: 6px solid #4D7046;
border-right: 6px solid #4D7046;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
}
.padlock-open {
top: 0;
}
.padlock-body {
position: absolute;
display: block;
top: 44px;
width: 60px;
height: 60px;
background: #4D7046;
}
.padlock:before {
content: "";
position: absolute;
height: 8px;
width: 6px;
left: 4px;
top: 36px;
background: #4D7046;
}
.padlock-body:before {
content: "";
position: absolute;
top: 20px;
left: 26px;
height: 8px;
width: 8px;
background: #3A5933;
border-radius: 50%;
}
.padlock-body:after {
content: "";
position: absolute;
top: 22px;
left: 24px;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 16px solid #3A5933;
}
.slider-wrapper {
position: absolute;
margin: 0 auto;
top: 50%;
left: 50%;
margin-top: 20px;
margin-left: -140px;
background: #496942;
/*background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#507348), to(#5b8052));
background-image: -webkit-linear-gradient(top, #507348, #5b8052);
background-image: -moz-linear-gradient(top, #507348, #5b8052);
background-image: -ms-linear-gradient(top, #507348, #5b8052);
background-image: -o-linear-gradient(top, #507348, #5b8052);*/
border-radius: 999px;
}
.slider-shape {
position: relative;
padding-left: 10px;
width: 280px;
height: 50px;
border-radius: 999px;
overflow: hidden;
/*box-shadow: inset 0 2px 11px rgba(0, 0, 0, 0.5), inset 0 -1px 1px rgba(255, 255, 255, 0.55);*/
}
.open {
display: block;
position: absolute;
left: 65px;
width: 150px;
height: 50px;
color: rgba(255, 255, 255, 0.5);
line-height: 50px;
text-transform: uppercase;
}
.close {
display: block;
position: absolute;
left: 0;
margin-left: -120px;
height: 50px;
color: rgba(255, 255, 255, 0.5);
text-align: center;
line-height: 50px;
text-transform: uppercase;
}
.slider-circle {
margin-top: 4px;
height: 42px;
width: 42px;
background: #5b8052;
border-radius: 50%;
/*box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.6), inset 0 -1px 1px rgba(255, 255, 255, 0.7);*/
cursor: move;
}
.closed {
position: absolute;
left: 17px;
}
.opened {
position: absolute;
left: 230px;
}
<!DOCTYPE html><html class=''>
<head><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="canonical" href="http://codepen.io/waylaid/pen/BKIkj" />
<link rel='stylesheet prefetch' href='//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'>
</head><body>
<div class="padlock">
<span class="padlock-loop"></span>
<span class="padlock-body"></span>
</div>
<div class="slider-wrapper">
<div class="slider-shape">
<div class="slider-circle closed">
<span class="open">Slide to unlock</span>
<span class="close">Slide to lock</span>
</div>
<div class="slider-circle opened">
<span class="open">Slide to unlock</span>
<span class="close">Slide to lock</span>
</div>
</div>
</div>
<script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src='//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script src='//codepen.io/assets/editor/live/css_live_reload_init.js'></script>
</body></html>
答案 0 :(得分:0)
您可以提供以下内容:
if (ui.position.left > 230) {
$(this).animate({ left: 230 }, function () {
window.open("page2.html");
$(this).hide().animate({ left: 17 });
$('.opened').show();
$('.padlock-loop').addClass('padlock-open');
});
您可以提供要打开的新网页的路径,而不是“page2.html”。
打开页面的另一种方法是:
window.location.href = "page2.html"
或者
$(this).load("page2.html");