任何人都可以帮助将导航箭头添加到此处的代码段
使用jQuery在屏幕外滑动div并给出第一个答案.... http://jsfiddle.net/jtbowden/ykbgT/2/
我希望能够添加方向箭头或上一个/下一个链接
代码如下
HTML:
<div id="container"> <div id="box1" class="box">Div #1</div> <div id="box2" class="box">Div #2</div> <div id="box3" class="box">Div #3</div> <div id="box4" class="box">Div #4</div> <div id="box5" class="box">Div #5</div> </div>CSS:
body { padding: 0px; } #container { position: absolute; margin: 0px; padding: 0px; width: 100%; height: 100%; overflow: hidden; } .box { position: absolute; width: 50%; height: 300px; line-height: 300px; font-size: 50px; text-align: center; border: 2px solid black; left: 150%; top: 100px; margin-left: -25%; } #box1 { background-color: green; left: 50%; } #box2 { background-color: yellow; } #box3 { background-color: red; } #box4 { background-color: orange; } #box5 { background-color: blue; }JavaScript的:
$('.box').click(function() { $(this).animate({ left: '-50%' }, 500, function() { $(this).css('left', '150%'); $(this).appendTo('#container'); }); $(this).next().animate({ left: '50%' }, 500); });它工作出色,但导航是一个方向,并通过单击框激活
提前致谢
AOR
Can anyone help with adding navigation arrows to the code snippet found here
Slide a div offscreen using jQuery and the first answer given .... http://jsfiddle.net/jtbowden/ykbgT/2/
I want to be able to add direction arrows or prev/next links
Code below
html:
<div id="container"> <div id="box1" class="box">Div #1</div> <div id="box2" class="box">Div #2</div> <div id="box3" class="box">Div #3</div> <div id="box4" class="box">Div #4</div> <div id="box5" class="box">Div #5</div> </div>css:
body { padding: 0px; } #container { position: absolute; margin: 0px; padding: 0px; width: 100%; height: 100%; overflow: hidden; } .box { position: absolute; width: 50%; height: 300px; line-height: 300px; font-size: 50px; text-align: center; border: 2px solid black; left: 150%; top: 100px; margin-left: -25%; } #box1 { background-color: green; left: 50%; } #box2 { background-color: yellow; } #box3 { background-color: red; } #box4 { background-color: orange; } #box5 { background-color: blue; }javascript:
$('.box').click(function() { $(this).animate({ left: '-50%' }, 500, function() { $(this).css('left', '150%'); $(this).appendTo('#container'); }); $(this).next().animate({ left: '50%' }, 500); });It works brilliantly but navigation is one direction and activated by clicking the boxes
thanks in advance
aor
最满意答案
应该很容易做:)
制作一个“导航控件”包装元素:
var $controller = $('<div class="control-wrapper" />);添加2个主要元素作为左右移动按钮:
var $left = $('<span class="move left" />').appendTo($controller), $right = = $('<span class="move right"/>').appendTo($controller);为每个动画的每个移动元素添加一个事件处理程序:
$left.click(function(event) { ////MOVE THE NAV LEFT }; $right.click(function(event) { ////MOVE THE NAV RIGHT };用函数调用替换注释来移动导航(你已经有了向左移动它的逻辑;))
注意:确保将“ cursor:pointer ”添加到按钮元素CSS类,以便它们看起来可以单击给用户。
Should be easy to do :)
make a "navigation control" wrapper element:
var $controller = $('<div class="control-wrapper" />);add 2 main elements to act as left and right movement buttons:
var $left = $('<span class="move left" />').appendTo($controller), $right = = $('<span class="move right"/>').appendTo($controller);add an event handler to each movement element for each animation:
$left.click(function(event) { ////MOVE THE NAV LEFT }; $right.click(function(event) { ////MOVE THE NAV RIGHT };replace the comments with function calls to move the nav (you already have the logic to move it left ;) )
NOTE: Make sure you add "cursor: pointer" to the button element CSS classes so that they appear to be clickable to the user.
更多推荐
left,px,%',电脑培训,计算机培训,IT培训"/> <meta name="description&q
发布评论