这是一款精仿知名网站淘宝网taobao.com中，一个帮我挑功能的特效代码，比较有新意...
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>淘宝帮我挑效果</title>
<meta name="author" content="css3train" />
<meta name="copyright" content="http://tianmaotbsc.diandian.com/" />
<!-- style begin -->
<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>
<!-- style end -->
<script type="text/javascript" src="http://www.css3train.com/zhjcom.js"></script>
</head>
<body>
<!-- html begin -->
<div class="bcols">
<ul id="J_P4P_ContainerA_1" class="layout">
<li>
<a target="_blank" href="http://www.css3train.com" title="甜美亮片系带雪纺小披肩">
<img src="http://www.html5sum.com/images/1.jpg" alt="甜美亮片系带雪纺小披肩">
</a>
<div class="tip">
<p class="t"><a target="_blank" href="http://www.css3train.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://www.html5sum.com/images/1.jpg"></em>
</li>
<li>
<a target="_blank" href="http://www.css3train.com" title="甜美亮片系带雪纺小披肩">
<img src="http://www.html5sum.com/images/2.jpg" alt="甜美亮片系带雪纺小披肩">
</a>
<div class="tip">
<p class="t"><a target="_blank" href="http://zuyppp.diandian.com/" title="甜美亮片系带雪纺小披肩">甜美亮片系带雪纺小披肩</a></p>
<p class="mon">￥<span>95.00</span></p>
</div>
<em class="J_choose" data-id="2" data-pic="http://www.html5sum.com/images/2.jpg"></em>
</li>
<li>
<a target="_blank" href="http://www.css3train.com" title="甜美亮片系带雪纺小披肩">
<img src="http://www.html5sum.com/images/3.jpg" alt="甜美亮片系带雪纺小披肩">
</a>
<div class="tip">
<p class="t"><a target="_blank" href="http://www.css3train.com" title="甜美亮片系带雪纺小披肩">甜美亮片系带雪纺小披肩</a></p>
<p class="mon">￥<span>95.00</span></p>
</div>
<em class="J_choose" data-id="3" data-pic="http://www.html5sum.com/images/3.jpg"></em>
</li>
<li>
<a target="_blank" href="http://www.css3train.com" title="甜美亮片系带雪纺小披肩">
<img src="http://www.html5sum.com/images/4.jpg" alt="甜美亮片系带雪纺小披肩">
</a>
<div class="tip">
<p class="t"><a target="_blank" href="http://www.css3train.com" title="甜美亮片系带雪纺小披肩">甜美亮片系带雪纺小披肩</a></p>
<p class="mon">￥<span>95.00</span></p>
</div>
<em class="J_choose" data-id="4" data-pic="http://www.html5sum.com/images/4.jpg"></em>
</li>
</ul>
</div>
<!-- html end -->
<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>
