50,526
社区成员
发帖
与我相关
我的任务
分享js如何让图片移动
过程是这样的 上面的代码是组长写的，我也差不多看明白了， 就是给一个class=goodss 的图片 从左面克隆变小 飞到右上角（就是商品图片 飞到右上角的购物车上） 可是组长说 你给2级页面也加一个。。我蒙了。。
就是一点购物车 商品图片就会变小 飞到右上角 上面的那个代码 写在js里 就是干这个的。。已经成功的
然后我照虎画猫 拷过去 也给商品的图片加上class=goodss 然后 现在一点加入购物车 然后就飞到右上角了
可是问题来了。。飞的时候，那个图片是这页里面最后一个图片 而不是我点的那个 而且都是从左面固定位置飞的 不是我想要的 点哪个哪个飞。。。我一想 这些产品都是一个class 因为他们都是一段代码里 从数据库里查出来的。。。然后我查了一下 说分别加样式 我迷茫了。。怎么加啊。。
我就是在这里加的class=goodss
...全文
请发表友善的回复…
发表回复
哎呦林88 2014-11-29
- 打赏
- 举报
全弄好了 谢谢大神
tony4geek 2014-11-28
- 打赏
- 举报
'top': imgObj.offset().top +'px',
'left': imgObj.offset().left +'px',
'width': imgObj.width() +'px',
'height':imgObj.height() +'px'
哎呦林88 2014-11-27
- 打赏
- 举报
能细说一下吗 有点迷糊#24
哎呦林88 2014-11-27
- 打赏
- 举报
你测试下不行吗？[/quote]
直接改js端吗 把我发的第一副图里面的覆盖掉？？ 为什么有百度呢
哎呦林88 2014-11-27
- 打赏
- 举报
624703280
tony4geek 2014-11-27
- 打赏
- 举报
你测试下不行吗？
哎呦林88 2014-11-27
- 打赏
- 举报
大神们 谁能加我QQ 帮帮我啊。。。新人跪谢了。。。 谢谢楼上的几位大神 虽然我有点看不懂 但是还是非常感谢
tony4geek 2014-11-27
- 打赏
- 举报
function fly(e){
var flym=$(e).find("img").clone().css('opacity','0.7')
alert(flym);
}
<a href="#" onclick="javascript:fly(this)">
<img src="http://www.baidu.com/img/bd_logo1.png" class="goodss" />
</a>
slwsss 2014-11-27
- 打赏
- 举报
var flym=$(this).parents('div').find('.goodss').clone().css('opacity',0.7)
bichir 2014-11-27
- 打赏
- 举报
<img src="../${show.tp}" class="goodss"/>
改成
<img src="../${show.tp}" class="goodss goodss${status.count}"/>
${status.count}是当前循环的位置，这只是一个例子而已.
后成后的html可能是
<img src="../xxxx.jpg" class="goodss goodss1"/>
<img src="../mmmmm.jpg" class="goodss goodss2"/>
然后在你的js中动态的获取这个goodss1或goodss2
var flym = $(".goodss"+i)......后面的所有$(".goodss")都改成$(".goodss"+i)这样就可以定位到当前的img了。
有可能你看不明白，算了不说了。
tony4geek 2014-11-27
- 打赏
- 举报
天猫里面也有啊。参考看卡呢
哎呦林88 2014-11-27
- 打赏
- 举报
[quote=引用 32 楼 rui888 的回复:]
没有。。。你是说26楼的思路吗。。。我就照着26楼说的做了 然后现在已经可以 点哪个就飞哪个图片了。。现在的问题是他都从一个固定的地方飞 而不是点哪个产品的图片 就飞哪个。。。
tony4geek 2014-11-27
- 打赏
- 举报
解决了吧。
tony4geek 2014-11-27
- 打赏
- 举报
你看看26 楼怎么写的。
哎呦林88 2014-11-27
- 打赏
- 举报
[quote=引用 27 楼 rui888 的回复:]
我查了一下 貌似是因为这个地方写了固定位置 而不是相对位置。。。可是我对js一知半解 您能顺便帮我也改一下吗
我查了一下 貌似是因为这个地方写了固定位置 而不是相对位置。。。可是我对js一知半解 您能顺便帮我也改一下吗
tony4geek 2014-11-27
- 打赏
- 举报
<div class="img_info1">
<div class="img_img">
<a
href='/specialNetWork/special/goodsDetail?sp_id=${show.spId }&tp="${show.tp}"'>
<img src="../${show.tp }" class="goodss"/> </a>
</div>
<div class="text_info">
<div class="text_info_123">
<a
href='/specialNetWork/special/goodsDetail?sp_id=${show.spId }&tp="${show.tp}"'><span
class="text_des">${show.mc}</span> </a><br />
<div class="text_value">￥${show.cxjg }</div>
<div class="text_pro">￥${show.yjg}</div>
</div>
</div>
<div class="queren" style="font-size:13px;color:gray;">
购买数量：
<input type="button" value="-" class="queren2" onclick="subNum(${show.spId })">
<input type="text" value="1" class="sl" id="num${show.spId }" />
<input type="button" value="+" class="queren1" onclick="addNum(${show.spId })">
</div>
<div class="queren_shopping_cat">
<input type="button" value="加入购物车 " class="qvjiesuan"
onclick="send_b(${show.spId },'${show.tp}',${show.cxjg },'${show.mc }',this)" />
</div>
</div>
什么意思 啊？不就是一个图片啊。 你可以看看24楼/
哎呦林88 2014-11-27
- 打赏
- 举报
[quote=引用 26 楼 rui888 的回复:]
恩人啊 现在点哪个图片就是哪个图片了 好开心 只不过都从左上角那个产品往购物车里飞 而不是我点的那个产品那飞 这个有办法改吗#17
tony4geek 2014-11-27
- 打赏
- 举报
你把24 楼 html 保存运行打开看看啊。 你的意思不是二级页面 每个图片添加购物车？
tony4geek 2014-11-27
- 打赏
- 举报
你的代码
<div class="queren" style="font-size: 13px; color: gray;">
购买数量：
<input type="button" value="-" class="queren2" onclick="subNum(${show.spId })">
<input type="text" value="1" class="sl" id="num${show.spId }" />
<input type="button" value="+" class="queren1" onclick="addNum(${show.spId })">
</div>
<div class="queren_shopping_cat">
<input type="button" value="加入购物车 " class="qvjiesuan" onclick="send_b(${show.spId },'${show.tp}',${show.cxjg },'${show.mc }',this)" />
</div>
function send_b(sp_id, tp, cxjg, mc,e){
var imgObj= $(e).parent().parent().find(".img_img").find("img");
//或者 imgObj = $(e).parent().parent().find(".goodss");
var flym = imgObj.clone().css('opacity','0.7');
flym.css({
'z-index': 9000,
'display': 'block',
'position': 'absolute',
'top': imgObj.offset().top +'px',
'left': imgObj.offset().left +'px',
'width': imgObj.width() +'px',
'height':imgObj.height() +'px'
});
$('body').append(flym);
flym.animate({
top:$('.gwc').offset().top+15,
left:$('.gwc').offset().left+65,
width:15,
height:15,
},1000);
}
哎呦林88 2014-11-27
- 打赏
- 举报
[quote=引用 24 楼 rui888 的回复:]
这下我彻底迷茫了#24 怎么多了这么添加购物车的按钮....一个不就够了吗 我看都写的是一样的啊。。。这个是放页面的 还是放js里面的呢。。。
加载更多回复（15）
