如何解决Js脚本干扰另一个
这只是我拥有的一个项目的示例。基本上我需要
<script src='https://www.lowescdn.com/scaffold/1.2.0/js/scaffold.min.js'></script>
运行一个光滑的转盘。并且必须与其他脚本一起放在最后,否则它将无法正常工作。
在我放置此代码时,First Panel和Second Panel错误的动画没有过渡,但是当我删除脚本时,它可以正常工作。有什么主意吗?
https://codepen.io/jinzagon/pen/GRZNNaN
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav" style="color:white;z-index:99999999;position:absolute;">
<a style="color:white;" href="#1" class="reveal-up" id='open'>First Panel</a>
<br>
<a style="color:white;" href="#2" class="reveal-up" id='close'>Second panel</a>
</div>
<div class="panel-up" id="1">
<div class="panel-content">
<div class="close"></div>
<p style="margin-bottom: 30px; color:white;">FIRST PANEL</p>
</div>
</div>
<div class="panel-up" id="2">
<div class="panel-content">
<div class="close"></div>
<p style="margin-bottom: 30px; color:white;">SECOND PANEL</p>
</div>
</div>
<img class="ip" style="opacity:1; z-index:-5; position:absolute; transform: scale(1.2)" src="https://images.unsplash.com/photo-1431440869543-efaf3388c585?ixlib=rb-1.2.1&w=1000&q=80">
<div class="content" style="color:white">
<h2 style="margin-top:10px;">Lorem ipsum dolor sit amet,consectetur adipiscing elit. Suspendisse ultricies aliquet quam quis faucibus. Maecenas at nibh hendrerit ex lobortis tristique. Ut hendrerit aliquet lacus,sed bibendum nisl dapibus non. Etiam eleifend eu ipsum at varius. Nam metus odio,placerat eu lacus quis,euismod finibus magna.</p>
<ul>
<li><code>ESC</code> - Close all windows</li>
<li><code>R></code> - Open panel with pressing "R" </li>
</ul>
</div>
<script src='https://www.lowescdn.com/scaffold/1.2.0/js/scaffold.min.js'></script>
CSS
.content {
padding: 50px;
position: absolute;
width: 90%;
-webkit-transition: all .7s ease;
transition: all .7s ease;
transform: scale(1);
opacity:1;
bottom:10%;
}
.content.hidefor-panel-up {
bottom: 20%;
transform: scale(0.95);
opacity:0;
}
.ip {
display:block;
width:100%; height:100%;
object-fit: cover;
position: absolute;
-webkit-transition: all 1s ease;
transition: all 1s ease;
opacity:1;
top:0;
opacity:1; z-index:-5; position:absolute;
}
.ip.hidefor-panel-up {
opacity:1;
top: 10%;
}
*,*:before,*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-family: "Lucida Console",Monaco,monospace;
background: #06113E;
line-height: 1.5em;
font-size: 15px;
overflow: hidden;
}
code {
border: 1px solid #dddddd;
background: #efefef;
border-radius: 3px;
padding: 3px 5px;
}
h1,h2,h3 {
margin-bottom: 0.5em;
}
ul {
margin: 30px 40px;
}
li {
margin: 5px 0;
}
.panel {
padding: 20px;
}
.panel-content {
position: relative;
/*background: #efefef;*/
padding: 30px 50px;
overflow-y: auto;
height: 100%;
}
.panel-content .close {
line-height: 15px;
position: absolute;
text-align: center;
cursor: pointer;
display: block;
color: #ffffff;
right: 5px;
top: 5px;
height: 15px;
width: 15px;
content: "✖";
}
.panel-content .close:before {
line-height: 15px;
position: absolute;
text-align: center;
cursor: pointer;
display: block;
color: #ffffff;
right: 5px;
top: 5px;
height: 15px;
width: 15px;
content: "✖";
}
.panel-left {
z-index: 10;
box-shadow: 0 0 10px rgba(0,0.5);
background: #eeeeee;
position: fixed;
display: block;
bottom: 0;
top: 0;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
left: -100%;
width: 45%;
}
.panel-left.expanded {
left: 0;
}
.panel-up {
z-index: 10;
position: fixed;
display: block;
bottom: 0;
-webkit-transition: all .7s ease;
transition: all 0.7s ease-out;
bottom: -20%;
width: 100%;
}
.panel-up.expanded {
bottom: 0;
}
.reveal-left {
float: left;
}
.reveal-up {
float: right;
}
.nav {
padding: 10px;
margin: 0 auto;
height: 10px;
width: 90%;
}
.nav button {
padding: 4px 6px;
}
.nav a {
font-weight: bold;
color: #222;
}
.bottom {
background: yellow;
display: block;
position: fixed;
width: 100%;
bottom: 0;
}
JS
// Reveal & Close Panels
var revealPanel = function (buttonReveal,panel,buttonClose) {
$(document).ready(function() {
// Reveal panel
$(buttonReveal).on('click',function() {
$(panel).addClass('expanded');
console.log('hidefor-'+panel);
$(".content").addClass('hidefor-'+panel.substr(1));
$(".ip").addClass('hidefor-'+panel.substr(1));
});
// Close panel
$(buttonClose).on('click',function() {
$(panel).removeClass('expanded');
$(".content").removeClass('hidefor-panel-up');
$(".ip").removeClass('hidefor-panel-up');
});
// ESC to close Panel
$(document).bind("keydown",function(e) {
if (e.keyCode == 27) {
$(panel).removeClass('expanded');
$(".content").removeClass('hidefor-panel-up');
$(".ip").removeClass('hidefor-panel-up');
}
});
});
}
revealPanel('.reveal-up','.panel-up','.close');
//revealPanel('.reveal-left','.panel-left','.close');
$('#open').on('click',function() {
$('.panel-up').hide();$('#1').show();
});
$('#close').on('click',function() {
$('.panel-up').hide();$('#2').show();
});
// Reveal Panel with Shortcuts
$(document).ready(function() {
$(document).bind("keydown",function(e) {
if (e.keyCode == 76) {
console.log(e.keyCode);
$('.panel-left').addClass('expanded');
}
if (e.keyCode == 82) {
$('.panel-up').hide();$('#1').show();
$('.panel-up').addClass('expanded');
$(".content").addClass('hidefor-panel-up');
$(".ip").addClass('hidefor-panel-up');
}
});
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。