私はこれらすべてに不慣れで、このサイトのような画像移動効果を得ようとしています: http://www.heroku.com/ . ナビゲーション リンクがクリックされたときに画像を div に沿って移動するにはどうすればよいですか?
2 に答える
1
メインページの折り紙のステージ画像のことで、鶴をクリックすると矢印がハイライト表示されますか?このまさにこのページで、彼らは jQuery animate メソッドを使用しています。home.js ファイルのコード全体を見ることができます。
そのようなことを試してみたい場合は、(jQueryを使用して)次のような同様のことを行います。
$(function () {
var slider = $('#slider'),
first = $('.list-item').first(),
margin = (first.outerWidth() - first.innerWidth()) / 2,
// compute the offset for the slider
// you will have to tailor those to your specific implementation
offset = (slider.outerWidth() / 2) +
((first.outerWidth() - slider.outerWidth()) / 2);
// attach click event to the menu elements
$('.list-item').on('click', function () {
var self = $(this),
siblings = self.siblings(),
x;
// if not active, move the slider accordingly
if (!self.hasClass('active')) {
siblings.removeClass('active');
self.addClass('active');
x = offset + margin + self.position().left;
// the magic happens here :)
slider.animate({
left: x
}, 500);
}
});
// trigger the click event for the first list element
first.trigger('click');
});
もちろん、HTML 要素を適切に準備し、スタイルを追加し、余白、外側/内側の幅などを調整する必要があります。
ここで私の 5 分間のチュートリアル/例を見つけることができます: http://jsfiddle.net/krwck/bjVdN/10/
于 2012-07-12T20:15:14.483 に答える
0
おそらく、そのための最良の選択は JQuery でしょう。あなたが定義することができます
<a class='menu'>Option 1</a>
<a class='menu'>Option 2</a>
<a class='menu'>Option 3</a>
<div id='moveable'></div>
このようにJQueryを使用するよりも:
$(".menu").click(function(){
$("#moveable").animate({
right: '+=150',
}, 500, function() {
// Animation complete.
});
});
いくつかの CSS スタイルも必要になります。これが少し役立つことを願っています。
このリンクも役立つかもしれません: http://api.jquery.com/animate/
于 2012-07-12T19:10:11.630 に答える