jquery 飞入购物车效果
自己参照着网上写呢，在最近的一个项目中使用，防淘宝网添加购物车飞入效果。自动根据购物车div的位置移动过去。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Chainable Transition Effects</title> <script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".Listbox img").hover( function () { var thisTop = $(this).offset().top; //菜品所在位置的高度 var thisLeft = $(this).offset().left; //菜品所在位置的宽度 var css = { display: 'block', top: thisTop-4, left: thisLeft+102 }; $(".W_layer").css(css); }, function () { $(".W_layer").css("display","none"); } ); $(".run").click(function(){ var menID = $(this).attr("id"); var thisTop = $("#img_" + menID).offset().top; //菜品所在位置的高度 var thisLeft = $("#img_" + menID).offset().left; //菜品所在位置的宽度 animatenTop(thisTop,thisLeft); return false; }); }); function animatenTop(thisTop,thisLeft) { var CopyDiv = '<div id="box" style="top:' + thisTop + 'px;left:' + thisLeft + 'px"></div>'; var topLength = $(".shopMenu li").offset().top; //取得到MINI购物车的宽度 var leftLength = $(".shopMenu li").offset().left; //取得到MINI购物车的宽度 $("body").append(CopyDiv); $("body").children("#box").animate({width: "30px",height: "30px", "top": topLength, "left": leftLength, "opacity": .1 }, 900, function(){$(this).remove()}); } </script> <style type="text/css"> body { margin: 20px auto; padding: 0; width: 1000px; font: 80%/120% Arial, Helvetica, sans-serif; } li { list-style:none; } a { font-weight: bold; color: #000000; } .Listbox { float:left; width:600px; border:1px #F00 solid; } .Listbox li { float:left; margin:10px; } .shopMenu { float:left; border:1px #F00 solid; width:200px; } #box { background: #6699FF; height: 100px; width: 100px; position: absolute; } /*hover框*/ .W_layer { position:absolute; -moz-border-radius:4px; -webkit-border-radius:4px; z-index:9999; color:#666; } .W_layer .bg { padding:4px; -moz-border-radius:4px; -webkit-border-radius:4px; background:url("http://img.t.sinajs.cn/t4/style/images/common/layer_bg.png?id=1341302813656") repeat; float:left; } .W_layer dl { width:420px; background-color:#fff; float:left; margin:0; padding:0; border:1px #ccc solid; } .W_layer dl dt { float:left; width:220px; } .W_layer dl dt img { margin:10px; } .W_layer dl dd { float:left; width:200px; margin:0; padding:0; } .W_layer dl dd h3 { font-size:14px; font-weight:bold; } .W_layer .arrow{ position:absolute; overflow:hidden; display:block; background:url("http://img.t.sinajs.cn/t4/style/images/common/layer_arrow.png?id=1341302813656") no-repeat; } .W_layer .arrow_r, .W_layer .arrow_l { width:11px; height:16px; top:20px; right:-6px; background-position:-11px -24px; } .W_layer .arrow_l { right:auto; left:-6px; background-position:0 -24px; } </style> </head> <body> <div class="Listbox"> <li> <p><img src="http://yongshan8.com/Imgs/a.gif" height="100" width="100" id="img_1" /></p> <a href="#" class="run" id="1">点我</a></li> <li> <p><img src="http://yongshan8.com/Imgs/a.gif" height="100" width="100" id="img_2" /></p> <a href="#" class="run" id="2">点我</a></li> <li> <p><img src="http://yongshan8.com/Imgs/a.gif" height="100" width="100" id="img_3" /></p> <a href="#" class="run" id="3">点我</a></li> </div> <div class="shopMenu" style="margin-top:200px;"> <ul> <li id="Null">空饭盒</li> </ul> </div> <div style="z-index: 9999;left:200px;top:100px; display:none;" class="W_layer"> <div class="bg"> <dl> <dt> <img src="http://yongshan8.com/Imgs/a.gif" width="200" height="200" /> </dt> <dd> <h3>红烧肉盖饭</h3> <p>红烧肉盖饭红烧肉盖饭红烧肉盖饭红烧肉盖饭红烧肉盖饭红烧肉盖饭红烧肉盖饭红烧肉盖饭红烧肉盖饭红烧肉盖饭红烧肉盖饭红烧肉盖饭红烧肉盖饭红烧肉盖饭红烧肉盖饭红烧肉盖饭红烧肉盖饭红烧肉盖饭红烧肉盖饭</p> </dd> </dl> <div class="arrow arrow_l"></div> </div> </div> </div> </body> </html>
