实用仿淘宝颜色尺寸选择特效资源-CSDN文库

共1个文件

html：1个

仿淘宝尺寸

4星 · 超过85%的资源需积分: 32 81 浏览量 2014-05-15 14:55:19 上传评论 1 收藏 2KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

1.zip （1个子文件）

index.html 4KB

<!Doctype html> <html> <head> <meta charset="utf-8" /> <title>仿照淘宝商品颜色、尺码选择效果</title> <style type="text/css"> *{margin:0;padding:0;} body{font-size:12px; background:#FFF;} #waper{ width:950px; margin:0 auto; position:relative; left:50%; margin-left:-475px;} #myForm p{padding:5px; height:26px; } #myForm p a{ display:block; width:24px; height:24px; line-height:24px; text-align:center; border:2px solid #C8C9CD; text-decoration:none; color:#000; font-weight:bold; position:relative;} #myForm p a:hover,#myForm p a.selected{border:2px solid #C30008;} .triangle{background:url(http://img01.taobaocdn.com/tps/i1/T1krl0Xk8zXXXXXXXX-194-382.png) -41px -97px no-repeat; width:12px; height:12px; display:block; font-size:0; position:absolute; bottom:0; right:0;} #myForm input{ vertical-align:bottom;padding:3px;} </style> </head> <body> <div id="waper"> <form id="myForm" action="你要提交的页面url" method="post"> <p><input type="radio" name="option" checked="checked" value="10" /></p> <p><input type="radio" name="option" value="20" /></p> <p><input type="radio" name="option" value="30" /></p> <input type="submit" value="Submit" />: </form> </div> <script type="text/javascript"> function addEvent(o,func,type)//添加事件的工具方法 { if(o.addEventListener) { o.addEventListener(type,func,false); } else if(o.attachEvent) { o.attachEvent("on"+type,func); }else{ o['on'+type]=func; } } function getTarget(e)//获取事件源的工具方法 { var target=(e&&e.target)?e.target:(window.event?window.event.srcElement:null); while(target&&target.nodeType!=1&&target.nodeName.toLowerCase()!="body") { target=target.parentNode; } return target; } function cancelClick(e)//点击了a标签之后阻止默认事件的还有冒泡的工具方法 { if(window.event) { window.cancelBubble=true; window.returnValue=false; } else if(e&&e.stopPropagetion&&e.preventDefault) { e.stopPropagetion(); e.preventDefault(); } } function init()//初始化添加事件监听呈现给用户新的界面 { if(!document.getElementById||!document.createTextNode){return;} var p=document.getElementById("myForm").getElementsByTagName("p"); if(!p){return;} var a=document.createElement("a"),input,temp; a.href="#nogo"; for(var i=0;i<p.length;i++) { input= p[i].getElementsByTagName("input")[0]; input.style.display="none"; temp=a.cloneNode(false); temp.innerHTML=input.value; if(input.checked) { temp.innerHTML+="<div class=\"triangle\"></div>"; temp.className="selected" } addEvent(temp,selected,"click"); p[i].appendChild(temp); } } function clearSelect(thisA)//取消选中 { var a=document.getElementById("myForm").getElementsByTagName("a"),targetIndex; for(var i=0;i<a.length;i++) { if(a[i].className.indexOf("selected")!=-1) { a[i].className=a[i].className.replace("selected",""); a[i].removeChild(a[i].getElementsByTagName("div")[0]); } if(a[i]==thisA){targetIndex=i;} } return targetIndex; } function selected(e)//点击时候出发的事件 { var thisA=getTarget(e),index=clearSelect(thisA),triangle=document.createElement("div"); triangle.className="triangle"; thisA.appendChild(triangle); thisA.className="selected"; document.getElementById("myForm").getElementsByTagName("input")[index].checked="checked"; cancelClick(e); } addEvent(window,init,"load"); </script> </body> </html>

评论收藏

内容反馈