Question

jquery 如何将对象移动到指定坐标

如图：点击任意一个图标，该行图标整体移动，被点击的图标移动至黄色框内。

这是我目前的代码：
$(function(){
var $btnPrev=$(".source_01_btn_pre");
var $btnNext=$(".source_01_btn_next");
var $bList=$(".source_01_list");
var $logosBig=$(".source_01_logo_b");
var $logoBig=$(".source_01_logo_b li")
var logoWidth=$logoBig.width();
var curtIndex=$logoBig.index(this);
var mid=$bList.offset().left+$bList.width();
var X=$logosBig.position().left+logoWidth*(curtIndex+1);
var page=1;
var pages=$logoBig.length;
$logoBig.click(function(){
$logosBig.stop(true,false).animate({left:X-mid},600);
});
$btnNext.click(function(){
if(!$logosBig.is(":animated")){
if(X==mid){
$btnNext.stop(true,false).animate({opacity:"0.80"},200);
}else{
$logosBig.animate({left:"-="+logoWidth},600);
}
}
});
$btnPrev.click(function(){
if(!$logosBig.is(":animated")){
if(X==mid){
$btnPrev.stop(true,false).animate({opacity:"0.80"},200);
}else{
$logosBig.animate({left:"+="+logoWidth},600);
}
}
});
});

Answer 1

不看你代码了，说说思路吧，首先，你得获取图标和黄框的位置，然后两个值相减，这是你需要移动的距离，然后用jq的animate函数，明白怎么干了吧

追问

思路我是清楚的。。问题是代码实现起来有些问题啊

Answer 2

没明白什么意思..

追问

黄色的框是固定的，比如点击【百度贴吧】，这一行图标就整体向左移动，直到【百度贴吧】进入到黄色的框内才停止移动。
如果点击【天涯社区】，这一行图标就整体向右移动，直到【天涯社区】进入到黄色的框内才停止移动。

追答

1
2
3
4
5
6
7

结构是这样的时候，可以利用div.contain的scrollLeft的特性，以及div.contain的样式设置为reltive的情况下，结合li的positio().left，注意ul不要设置position,可以完成效果
$("li").click(function(){
var scroll_to=$(this).position().left-$(this).outerWidth();
var scroll_position=scroll_to+$("div.contain").scrollLeft();
$("div.contain").animate({scrollLeft:scroll_position},300);
});

追问

var scroll_to=$(this).position().left+$(this).width()/2;
var scroll_position=$bList.width()/2-scroll_to;
$s01.stop(true,false).animate({left:scroll_position},300);
最终实现代码，谢谢你了！