我使用 BXslider.js 创建了一个带有全屏图像 slider 的主页. slider 中的每个图像都有一个带有 anchor 链接的标题文本。 点击 anchor 链接后,您将转到一个详细信息页面。如果您从主页移动到详细信息页面,则会出现一个过渡。这与 jquery.smoothstate.js 上的演示基本相同。页面。
我遇到一个问题,BXslider 在包含 jquery.smoothstate javascript 后损坏了。每次您在 BXslider 中按下箭头按钮 prev 或 next 时, slider 本身都会覆盖自身并复制 prev/next 按钮,图像将消失。在 Firebug 中,我没有收到任何警告或错误。这使得调试变得困难。希望有人能帮我解决这个问题。
提前致谢!
下面是我为我的 bxslider.js/smootstate 网站编写的代码。
首页代码
<div id="main" class="m-scene">
<div class="scene-element scene-element--fadeinup">
<section id="banner">
<div class="inner">
<div id="box">
<div class="relative-box">
<div class="logo"></div>
<h2>Client-name</h2>
<div id="captions">
<p>" This is a caption "</p>
</div>
</div>
<a href="/generic.html" class="more">To genericpage</a>
</div>
<ul class="bxslider">
<li style="background-image: url('/images/pic1.jpg');"></li>
<li style="background-image: url('/images/pic2.jpg');"></li>
<li style="background-image: url('/images/pic3');"></li>
<li style="background-image: url('/images/pic4.jpg');"></li>
<li style="background-image: url('/images/pic5.jpg');"></li>
</ul>
</div>
</section>
</div>
</div>
</div>
通用 html/css 选择器
我正在为 jquery.smootstate.js 使用通用的 html/选择器。以下 html 与主页和详细信息页面相同。
<div id="main" class="m-scene">
<div class="scene-element scene-element--fadeinup">
css3 转换
scene-element & scene-element--fadeinup 选择器用于 css3 页面动画。
@keyframes fadeInUp{
0%{opacity:0; transform:translate3d(0,100%,0);}
100%{opacity:1;transform:none;}
}
.m-scene .scene-element{
animation-duration: 0.25s;
transition-timing-function: ease-in;
animtation-fill-mode: both;
}
.m-scene .scene-element--fadeinup {animation-name:fadeInUp;}
.m-scene.is-exiting .scene-element {animation-direction: alternate-reverse;}
jquery.smoothstate.js 的 javascript
(function($) {
'use strict';
var $body = $('html, body'),
content = $('#smooth').smoothState({
// Runs when a link has been activated
onStart: {
duration: 250, // Duration of our animation
render: function (url, $container) {
// toggleAnimationClass() is a public method
// for restarting css animations with a class
content.toggleAnimationClass('is-exiting');
// Scroll user to the top
$body.animate({
scrollTop: 0
});
}
}
}).data('smoothState');
//.data('smoothState') makes public methods available
})(jQuery);
最佳答案
从我的错误中吸取教训
1.不要在jquery.smoothstate中DIY命名空间
我用过 #smooth
而不是 #main
作为容器<div>
.我的 jquery 函数试图调用 jquery.smoothstate 但它不起作用,因为 #main
在 jquery.smoothstate.js 库中用作标识符。
2.定义 anchor 而不是让每个链接都成为平滑状态的一部分
在我修正了上述错误后,又遇到了另一个问题。我在源代码中使用 bxslider。每次我在 BXslider 中按下箭头 next 或 prev 时, slider 的新副本就会出现在原始 slider 上方。
我已经通过定义选项 anchor 解决了这个问题。这是 jquery.smoothstate 的一部分。这将排除所有其他 anchor 。
3.toggleAnimationClass 已弃用
使用而不是 toggleAnimationClass 函数调用 restartCSSAnimations();
使用 addClass() 添加临时类'is-exited'
这是完整的工作源:
(function($) {
'use strict';
content = $('#main').smoothState({
// Runs when a link has been activated
prefetch: true,
pageCacheSize: 4,
anchors: 'link',
onStart: {
duration: 250, // Duration of our animation
render: function (url, $container) {
//add temporary class #main
$('#main').addClass('is-exited');
// for restarting css animations with a class
content.restartCSSAnimations();
}
}
}).data('smoothState');
})(jQuery);
关于javascript - 当我将 BXslider.js 与 Jquery.smoothState.js 结合使用时,它被破坏了。我该如何解决?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32934177/