我似乎在使用一个悬停在边缘附近的滚动解决方案时遇到了一些问题,我已经实现了一个拖动滚动解决方案。
这是我的代码:
演示 1(当前页面):http: //jsfiddle.net/SO_AMK/FdLZJ/
演示 2(我尝试过的):http: //jsfiddle.net/SO_AMK/8CCeA/
HTML 摘录:
<section class="row">
<div class="scroll-left" style="opacity: 0;"></div>
<div class="row-scroll">
<div class="tile">
<img class="tile-image" src="http://cache.gawker.com/assets/images/lifehacker/2011/08/1030-macpack-notational-velocity.jpg" />
<title class="tile-title">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor...</title>
</div>
.....
<div class="tile">
<img class="tile-image" src="http://cache.gawker.com/assets/images/lifehacker/2011/08/1030-macpack-notational-velocity.jpg" />
<title class="tile-title">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor...</title>
</div>
</div>
<div class="scroll-right" style="opacity: 0;"></div>
</section>
<section class="row">
<div class="scroll-left" style="opacity: 0;"></div>
<div class="row-scroll">
<div class="tile">
<img class="tile-image" src="http://cache.gawker.com/assets/images/lifehacker/2011/08/1030-macpack-notational-velocity.jpg" />
<title class="tile-title">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor...</title>
</div>
.....
<div class="tile">
<img class="tile-image" src="http://cache.gawker.com/assets/images/lifehacker/2011/08/1030-macpack-notational-velocity.jpg" />
<title class="tile-title">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor...</title>
</div>
</div>
<div class="scroll-right" style="opacity: 0;"></div>
</section>
jQuery:
$(document).ready(function () {
var pos = 5;
$.fn.loopingScroll = function (direction, scrollElement) {
if (direction == "right") {
pos+=5;
}
else if (direction == "left") {
pos-=5;
}
$(scrollElement).parent().scrollLeft($(scrollElement).parent().data('scrollLeft') + pos);
return this;
}
$(".scroll-left").hover(function(){
scrollLeftLoop = setInterval(function(){
$(this).loopingScroll("left", this);
}, 25);
$(this).fadeIn('fast');
}, function() { clearInterval(scrollLeftLoop); $(this).fadeOut('fast'); });
$(".scroll-right").hover(function(){
scrollRightLoop = setInterval(function(){
$(this).loopingScroll("right", this);
}, 25);
$(this).fadeIn('fast');
}, function() { clearInterval(scrollRightLoop); $(this).fadeOut('fast'); });
});
它应该(去!)是一个 Pulse 替代品/WebApp,因此是设计(我正在研究字体)。
有任何想法吗?
先感谢您。