请看一下这个 DEMO 。
使用 this post 中的代码我已成功通过单击左侧或右侧链接使图像水平移动。
我想要实现的是以某种方式使图像跳跃更平滑。
这是我的代码:
<script>
var scrollDiv = function(dir, px) {
var scroller = document.getElementById('scroller');
if (dir == 'l'){
scroller.scrollLeft -= px;
}
else if (dir == 'r'){
scroller.scrollLeft += px;
}
}
</script>
<a class="tArrowL" href="javascript: void(0);" onclick="scrollDiv('l', 80); return false;">« left</a>
<a class="tArrowR" href="javascript: void(0);" onclick="scrollDiv('r', 80); return false;">right »</a>
<div class="wrapOut">
<div id="scroller" class="wrapIn">
<img id="" src="http://lorempixel.com/output/nature-q-c-1044-480-2.jpg" />
</div>
</div>
我尝试使用animate
函数,但没有成功:
var scrollDiv = function(dir, px) {
var scroller = document.getElementById('scroller');
if (dir == 'l'){
scroller.animate( { scrollLeft: '-= px' }, 1000);
}
else if (dir == 'r'){
scroller.animate( { scrollLeft: '+= px' }, 1000);
}
}
我正在触摸屏桌面上的 Windows 8 上的 IE 10 上进行测试,因此它也必须适用于滑动/点击事件。
如有任何帮助,我们将不胜感激!
最佳答案
<强> DEMO
您需要为scrollLeft
设置动画jQuery 对象的属性 scroller
,而不是 HTMLObject scroller
,因为前者具有方法 animate
.
var scrollDiv = function (dir, px) {
var scroller = document.getElementById('scroller'), // HTMLObject
go; // holds '+=' or '-='
if (dir == 'l') go = '-=';
else go = '+='; // no need for else-if here
// `$(HTMLObject)` ---> `jQuery Object`
$(scroller).animate({
scrollLeft: go + px // becomes '-=int' or '+=int'
}, 500); // duration
}
关于javascript - 向左/向右滚动带有动画的图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23063870/