精仿淘宝网taobao.com网站帮我挑特效代码

发布时间：2014-08-21 11:34:42　来源/作者：学技巧网页制作　分类：图片特效阅读：0次点评一下

<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <title>淘宝帮我挑效果</title> <meta name="author" content="xuejiqiao" /> <meta name="copyright" content="www.xuejiqiao.com" />  <style> * { padding: 0; margin: 0; } li { list-style: none; } img { border: none; } body {background:#fff;font: 12px/1.5 tahoma,arial,宋体b8b\4f53;} a{text-decoration:none;color:#36C;} a:hover {color: #F60;text-decoration: underline;} .bcols {width: 787px;float: left;overflow: hidden;} .bcols ul {width: 800px;} .bcols li {width: 190px;height: 340px;position: relative;float: left;margin-right: 9px;margin-bottom: 9px;overflow: hidden;} .bcols li img{width:188px;height:338px;} .bcols li .tip {position: absolute;right: 1px;bottom: 1px;filter: alpha(opacity=90);background: white;width: 100px; -moz-opacity: 0.9;-khtml-opacity: 0.9;opacity: 0.9; } .bcols li .tip p {padding: 4px 10px;} .bcols li .tip p.mon {background: #E15B74;color: white;padding-right: 0;font-family: "Microsoft YaHei";} .bcols li .tip p.mon span {font-size: 18px;font-weight: bold;color: white;font-family: tahoma;} .bcols li em {position: absolute;top: 3px;right: 3px;display: block;width: 70px;height: 30px; background: url("http://img02.taobaocdn.com/tps/i2/T19ufiXiRnXXciAGbm-70-30.png") no-repeat 0 0;cursor: pointer; } .tiao-collect {position: fixed;_position: absolute;right: 10px;top: 150px;_top: expression(eval(documentElement.scrollTop+150));width: 95px;border: 1px solid #D1D1D1;border-radius: 2px;background: #E5E5E4; } .tiao-collect h3 {width: 100%;height: 25px;text-align: center;font-size: 14px;text-shadow: 0 1px 0 white;line-height: 25px;} .tiao-collect .close {float: right;display: inline-block;width: 16px;height: 16px;line-height: 15px;margin: 5px;font-size: 12px;font-weight: bold;color: silver;text-align: center;vertical-align: middle;overflow: hidden;cursor: pointer;text-decoration: none;font-family: tahoma,arial; } .tiao-collect .close:hover{text-decoration:none;color:#808080;} .tiao-collect .tiao-blank {background: white;text-align: center;} .tiao-collect ul {width: 88px;margin: 0 auto;border: 1px solid #DCDCDB;background: white;} .tiao-collect li {position: relative;width: 70px;height: 70px;margin: 6px auto;text-align: center;border: 1px solid #EEE;} .tiao-collect img {max-width: 70px;max-height: 70px;_width: 70px;_height: 70px;} .tiao-collect li a {display: none;} .tiao-collect li:hover,.tiao-collect li.hover{border:1px solid #888;} .tiao-collect li:hover a,.tiao-collect li.hover a{display:block;width:100%;position:absolute;bottom:0;right:0;background:white;color:#656A74;text-align:right;} .tiao-collect li:hover a i, .tiao-collect li.hover a i {display: inline-block;width: 11px;height: 12px;background: url('http://www.html5sum.com/images/ico.png') 0 -81px;vertical-align: bottom;margin: 2px;_overflow: hidden; } .tiao-collect button {display: block;width: 88px;height: 30px;margin: 6px auto;border: 1px solid #BCBCBC;text-align: center;text-shadow: 0 1px 0 white; font-size: 13px;font-weight: bold;background: #E9EAE8;cursor: pointer; background: -moz-linear-gradient(top,#F9FAF8,#E2E2E2); background: -webkit-gradient(linear,0 0,0 bottom,from(#F9FAF8),to(#E2E2E2)); background: -o-linear-gradient(top,#F9FAF8,#E2E2E2); filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#F9FAF8,endcolorstr=#E2E2E2,gradientType=0); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#F9FAF8,endcolorstr=#E2E2E2,gradientType=0); } .tiao-collect button:active{background:#F6F7F4;} .tiao-collect .right-arrow {display: inline-block;margin: 2px 3px 1px 2px;width: 0;height: 0;font-size: 0;line-height: 0; border-width: 4px 0 4px 4px;border-style: dashed dashed dashed solid;border-color: transparent transparent transparent #C32B36; -webkit-transition: -webkit-transform .2s ease-in; -moz-transition: -moz-transform .2s ease-in; -o-transition: -o-transform .2s ease-in; transition: transform .2s ease-in; } .back{position:absolute;right:20px;top:10px;color:#000;text-shadow:1px 1px 3px #999999;text-decoration:none;z-index:99999;} </style>  </head> <body>  <div class="bcols"> <ul id="J_P4P_ContainerA_1" class="layout"> <li> <a target="_blank" href="http://www.xuejiqiao.com" title="甜美亮片系带雪纺小披肩"> <img src="http://xuangoul.com/uploads/121214/1-12121415510AG.jpg" alt="甜美亮片系带雪纺小披肩"> </a> <div class="tip"> <p class="t"><a target="_blank" href="http://www.xuejiqiao.com" title="甜美亮片系带雪纺小披肩">2012新款140胸围130大码女装夏东贸显瘦高端正品连衣裙子</a></p> <p class="mon">￥<span>95.00</span></p> </div> <em class="J_choose" data-id="1" data-pic="http://xuangoul.com/uploads/121214/1-12121415510AG.jpg"></em> </li> <li> <a target="_blank" href="http://www.xuejiqiao.com" title="甜美亮片系带雪纺小披肩"> <img src="http://xuangoul.com/uploads/121214/1-12121415510AG.jpg" alt="甜美亮片系带雪纺小披肩"> </a> <div class="tip"> <p class="t"><a target="_blank" href="http://www.xuejiqiao.com" title="甜美亮片系带雪纺小披肩">甜美亮片系带雪纺小披肩</a></p> <p class="mon">￥<span>95.00</span></p> </div> <em class="J_choose" data-id="2" data-pic="http://xuangoul.com/uploads/121214/1-12121415510AG.jpg"></em> </li> <li> <a target="_blank" href="http://www.xuejiqiao.com" title="甜美亮片系带雪纺小披肩"> <img src="http://xuangoul.com/uploads/121214/1-12121415510AG.jpg" alt="甜美亮片系带雪纺小披肩"> </a> <div class="tip"> <p class="t"><a target="_blank" href="http://www.xuejiqiao.com" title="甜美亮片系带雪纺小披肩">甜美亮片系带雪纺小披肩</a></p> <p class="mon">￥<span>95.00</span></p> </div> <em class="J_choose" data-id="3" data-pic="http://xuangoul.com/uploads/121214/1-12121415510AG.jpg"></em> </li> <li> <a target="_blank" href="http://www.xuejiqiao.com" title="甜美亮片系带雪纺小披肩"> <img src="http://xuangoul.com/uploads/121214/1-12121415510AG.jpg" alt="甜美亮片系带雪纺小披肩"> </a> <div class="tip"> <p class="t"><a target="_blank" href="http://www.xuejiqiao.com" title="甜美亮片系带雪纺小披肩">甜美亮片系带雪纺小披肩</a></p> <p class="mon">￥<span>95.00</span></p> </div> <em class="J_choose" data-id="4" data-pic="http://xuangoul.com/uploads/121214/1-12121415510AG.jpg"></em> </li> </ul> </div>  <script type="text/javascript"> (function(){ /* aChooseLi : 右边的li的字符串 aEmId : 获取左边被点击的数据的id（值） aEmIdary : 存储左边被点击的数据的id(数组)，判断比较，不存入相同的值 delData : 存储左边被删除的数据（数组） */ var aChooseLi='',aEmId=0,aEmIdary = [],delData = []; var strRight = '<div id="J_TiaoCollectWrapper" style="display:block;">'+ '<div class="tiao-collect">'+ '<h3><a class="close" href="javascript:void(0);" onclick="$(J_TiaoCollectWrapper).style.display=\'none\';">X</a>帮我挑</h3>' + '<div class="tiao-blank" style="display: none; "><br>'+ '选择纠结的宝贝, 发起"帮我挑", 让淘友给你购物建议<br><br>'+ '<span">点击"加入挑选",选择宝贝<br><br></span">'+ '</div>'+ '<ul>'+ '</ul>'+ '<p>'+ '<button>'+ '发起 '+ '<i class="right-arrow"></i>'+ '</button>'+ '</p>'+ '</div>'+ '</div>'; ZHJ.helpChoose = function(id){ var aEm = id.getElementsByTagName('em'); /* 向右侧弹框插入被点击的内容便利‘帮我挑'按钮（em）点击按钮,向右侧插入被点击内容 */ for(var i=0;i<aEm.length;i++){ (function(i){ //ZHJ.util.addEvent(aEm[i],'click',ZHJ.util.bind(ZHJ.helpChoose_click,this)); aEm[i].onclick = function(){ ZHJ.classes.arryOperate.del(delData, aEmIdary);//在aEmIdary(被比较的数据)中删除与aEmIdary(删除的被比较的数据)里元素相同的数据 delData = [];//清空aEmIdary(删除的被比较的数据),以便下面继续使用，不会造成重复。 if(!$('J_TiaoCollectWrapper')){ ZHJ.appendStr(document.getElementsByTagName('body')[0],strRight); } ZHJ.cssStyle($('J_TiaoCollectWrapper'),'display','block'); aEmPic = aEm[i].attributes['data-pic'].nodeValue; aEmId = aEm[i].attributes['data-id'].nodeValue; /*if(aEmIdary.length < 2){ ZHJ.cssStyle(ZHJ.getByClass($('J_TiaoCollectWrapper'),'tiao-blank')[0],'display','none'); aChooseLi = '<li class="">'+ '<img src="'+aEmPic+'">'+ '<a href="javascript:void(0);">'+ '移除'+ '<i></i>'+ '</a>'+ '</li>'; //$('J_TiaoCollectWrapper').getElementsByTagName('ul')[0].innerHTML = aChooseLi;//这里我曾经用innerHTML,可为移除后再添加数据时添加了麻烦，移除的数据在添加新的数据后又会显现出来，所有我改了想了，我不管原来怎么样，我只要在最后的li下面插入数据就好了，此时每次插入的数据是单一的，不会在出现上面的问题。 ZHJ.appendStr($('J_TiaoCollectWrapper').getElementsByTagName('ul')[0],aChooseLi); aEmIdary.push(aEmId); ZHJ.classes.doWhileExists('J_TiaoCollectWrapper',ZHJ.helpChooseRi); }else{ alert('您已经添加了此宝贝'); }*/ if(ZHJ.helpData(aEmIdary,aEmId)){ alert('您已经添加了此宝贝'); }else{ ZHJ.cssStyle(ZHJ.getByClass($('J_TiaoCollectWrapper'),'tiao-blank')[0],'display','none'); aChooseLi = '<li class="">'+ '<img src="'+aEmPic+'">'+ '<a href="javascript:void(0);">'+ '移除'+ '<i></i>'+ '</a>'+ '</li>'; //$('J_TiaoCollectWrapper').getElementsByTagName('ul')[0].innerHTML = aChooseLi;//这里我曾经用innerHTML,可为移除后再添加数据时添加了麻烦，移除的数据在添加新的数据后又会显现出来，所有我改了想了，我不管原来怎么样，我只要在最后的li下面插入数据就好了，此时每次插入的数据是单一的，不会在出现上面的问题。 ZHJ.appendStr($('J_TiaoCollectWrapper').getElementsByTagName('ul')[0],aChooseLi); aEmIdary.push(aEmId); ZHJ.classes.doWhileExists('J_TiaoCollectWrapper',ZHJ.helpChooseRi); } } })(i); } }; /* 判断是否存入了以存的数据 */ ZHJ.helpData = function(aEmIdary,aEmId){ var j=0; while(j<aEmIdary.length){ if(aEmIdary[j]==aEmId){ return true; break; } j++; } }; /* 删除右侧内容 */ ZHJ.helpChooseRi = function(id){ var aLiRight = id.getElementsByTagName('li'); var liLength = aLiRight.length;//计算右边被挑选的数据长度 for(var h=0;h<aLiRight.length;h++){ (function(h){ aLiRight[h].onmouseover = function(){ this.className = 'hover'; }; aLiRight[h].onmouseout = function(){ this.className = ''; }; aLiRight[h].onclick = function(){ this.parentNode.removeChild(this); liLength--; if(liLength<1){//如果最后一个点击过后长度为0,那么右边的提示说明就要显示出来 ZHJ.cssStyle(ZHJ.getByClass(id,'tiao-blank')[0],'display','block'); } delData.push(aEmIdary[h]); //aEmIdary.splice(h, 1);//将删除的数据从数组中删除,这种写法是在删除数据后，在重新组合的数据中在删除，而我需要在原来的数组中不停的操作.这一部分的操作转做在点击产品时操作。我将每次删除的数据存在数组中，与原来的被挑选的数据进行比较，删除相同的。 }; })(h); } }; ZHJ.classes.doWhileExists('J_P4P_ContainerA_1',ZHJ.helpChoose); })(); </script> </body> </html>

(www.xuejiqiao.com)提示：可修改后再运行代码!

这是一款精仿知名网站淘宝网taobao.com中，一个帮我挑功能的特效代码，比较有新意...

本文版权归原作者所有，转载请注明原文来源出处，学技巧网站制作感谢您的支持！

学技巧网站制作

精仿淘宝网taobao.com网站帮我挑特效代码

JS实现鼠标点亮或熄灭灯泡特效

非常适合商品宣传的jquery幻灯切换特效

仿淘宝商品宝贝图片放大效果js特效