求飞入飞出购物车特效

HaChengShen 2013-08-10 08:59:34

像这样的http://www.1yyg.com/list/i120.html

最好是JQUERY 要列表的哦，多个点击都生效的！

要求用点击 <a onclick="" >sdfsdf</a> 或是用id 亦可

...全文

215 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

fzfei2 2013-08-10

打赏
举报

上面写错了，改了下


<!doctype html>
<html>
<head>
<style>
        #box{
            height:150px;
            width:150px;
            border:solid 1px #ccc;
            background:#eef;
            text-align:center;
        }
        #box img{
        		width:135px;
        		height:120px;
        		margin:4px 4px 0px 4px;
        }
        
        #box .bnt{
        		height:20px;
        		line-height:20px;
        }
        
        ._box{ position: absolute;z-index:9 }
        #car{
            height:50px;
            width:50px;
            background:#ecc;
            border:solid 1px #ccc;
            position: absolute;
            left:500px;
            top:300px;
        }
   
</style>
</head>
 <body>
 
<div id="box">  
	<img  src="http://goodsimg.1yyg.com/GoodsPic/pic-200-200/20120612160647259.jpg"/>	
	<a href="#">物品1</a> <a class="bnt"  href="javascript:;"   >加入</a>
</div>
<div id="box">  
	<img  src="http://goodsimg.1yyg.com/GoodsPic/pic-200-200/20120612160647259.jpg"/>	
	<a href="#">物品2</a> <a class="bnt"  href="javascript:;"  >加入</a>
</div><div id="box">  
	<img  src="http://goodsimg.1yyg.com/GoodsPic/pic-200-200/20120612160647259.jpg"/>	
	<a href="#">物品3</a> <a class="bnt"  href="javascript:;" >加入</a>
</div>
   
<div id="car"> 
    
</div>    
<script src="http://code.jquery.com/jquery-1.4.1.min.js">    </script> 
<script>
    $(function(){
            var tmp ;
            $('#box .bnt').live('click',function(){
                    if(tmp) tmp.remove(); 
                    var box=$(this).parent();
                    var img=box.find("img");
                    tmp=img.clone();
                    var p=$(img).offset();
                    var p2=$(car).offset();
                    tmp.addClass('_box').css(p).appendTo(box  );
                     p2=$.extend(p2,{height:5,width:5,opacity:10});
                      $(tmp).animate(p2, "slow",function(){
                          tmp.remove();  
                      });
            });
    });
</script> 
</body>
</html>

fzfei2 2013-08-10

打赏
举报

稍改了下


<!doctype html>
<html>
<head>
<style>
        #box{
            height:150px;
            width:150px;
            border:solid 1px #ccc;
            background:#eef;
            text-align:center;
        }
        #box img{
        		width:135px;
        		height:120px;
        		margin:4px 4px 0px 4px;
        }
        
        #box .bnt{
        		height:20px;
        		line-height:20px;
        }
        
        ._box{ position: absolute;z-index:9 }
        #car{
            height:50px;
            width:50px;
            background:#ecc;
            border:solid 1px #ccc;
            position: absolute;
            left:500px;
            top:300px;
        }
   
</style>
</head>
 <body>
 
<div id="box">  
	<img  src="http://goodsimg.1yyg.com/GoodsPic/pic-200-200/20120612160647259.jpg"/>	
	<a href="#">物品1</a> <a class="bnt"  href="javascript:;"   >加入</a>
</div>
<div id="box">  
	<img  src="http://goodsimg.1yyg.com/GoodsPic/pic-200-200/20120612160647259.jpg"/>	
	<a href="#">物品2</a> <a class="bnt"  href="javascript:;"  >加入</a>
</div><div id="box">  
	<img  src="http://goodsimg.1yyg.com/GoodsPic/pic-200-200/20120612160647259.jpg"/>	
	<a href="#">物品3</a> <a class="bnt"  href="javascript:;" >加入</a>
</div>
   
<div id="car"> 
    
</div>    
<script src="http://code.jquery.com/jquery-1.4.1.min.js">    </script> 
<script>
    $(function(){
            var tmp ;
            $('#box .bnt').live('click',function(){
                    if(tmp) tmp.remove(); 
                    var box=$(this).parent();
                    var img=box.parent().find("img");
                    tmp=img.clone();
                    var p=$(img).offset();
                    var p2=$(car).offset();
                    tmp.addClass('_box').css(p).appendTo(box  );
                     p2=$.extend(p2,{height:5,width:5,opacity:10});
                      $(tmp).animate(p2, "slow",function(){
                          tmp.remove();  
                      });
            });
    });
</script> 
</body>

</html>

fzfei2 2013-08-10