仿google adsense颜色选择器代码，从中易广告联盟程序提取原创第2/2页

原创更新时间：2007年11月24日 21:34:51 原创作者：

<!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=gb2312" /> <title>仿goolge adsense颜色选择器 代码提取</title> <style type="text/css"> BODY {     PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-WEIGHT: normal; FONT-SIZE: 12px; PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: #02418a; PADDING-TOP: 0px; FONT-FAMILY: Arial } FORM {     MARGIN: 0px } INPUT {     MARGIN: 0px } TABLE {     FONT-WEIGHT: normal; FONT-SIZE: 12px; LINE-HEIGHT: 170%; FONT-FAMILY: Arial } A:link {     COLOR: #02418a; TEXT-DECORATION: none } A:visited {     COLOR: #02418a; TEXT-DECORATION: none } A:hover {     COLOR: #ff0000; TEXT-DECORATION: none } .colorhover {     BORDER-RIGHT: blue 1px solid; BORDER-TOP: blue 1px solid; DISPLAY: block; MARGIN-LEFT: 4px; BORDER-LEFT: blue 1px solid; WIDTH: 20px; CURSOR: pointer; BORDER-BOTTOM: blue 1px solid; HEIGHT: 16px } TABLE.palette {     BORDER-RIGHT: #999999 1px solid; BORDER-TOP: #999999 1px solid; FONT-SIZE: 5px; BACKGROUND: #000000; BORDER-LEFT: #999999 1px solid; BORDER-BOTTOM: #999999 1px solid; BORDER-COLLAPSE: collapse } TABLE.palette TD A {     DISPLAY: block; TEXT-DECORATION: none } TABLE.palette TD A DIV {     WIDTH: 20px; HEIGHT: 20px } TABLE.palette A {     BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 1px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; BORDER-LEFT: #cccccc 1px solid; PADDING-TOP: 1px; BORDER-BOTTOM: #cccccc 1px solid } TABLE.palette A:hover {     BORDER-RIGHT: red 1px solid; BORDER-TOP: red 1px solid; BORDER-LEFT: red 1px solid; CURSOR: pointer; BORDER-BOTTOM: red 1px solid } </style> <script type="text/javascript"> //中易广告联盟程序 By www.zyiis.com QQ:381611116  function showPicker(colorField,atElement){          var picker=document.getElementById("color_picker");              var element=(atElement!=undefined)     ?atElement     :document.getElementById("zyad_style_color_"+colorField);         //alert (getTopOffset(document.all.zyad_style_color_border));     pickerField=colorField;         picker.style.top=getTopOffset(element);         picker.style.left=getLeftOffset(element)+90;         picker.style.display='block';         document.onmouseup=hidePicker;          } function hidePicker(){               var picker=document.getElementById("color_picker");         pickerField=null;         picker.style.display='none';         clicked=false;          } function getTopOffset(element){          return (element==document.body)     ?0     :(element.offsetTop+getTopOffset(element.offsetParent));          } function getLeftOffset(element){          return (element==document.body)     ?0     :(element.offsetLeft+getLeftOffset(element.offsetParent));          } function selectColor(colorValue){          elem("colorsample-"+pickerField).style.backgroundColor='#'+colorValue;                   if(external){                  elem("zyad_style_color_"+pickerField).value=colorValue;                      }          if(pickerField=='background')elem("zyad_style_bg").style.backgroundColor='#'+colorValue;              if(pickerField=='border'){                  elem("zyad_style_bg").style.border=" 1px solid #"+colorValue;                                   elem("zyad_style_copy").style.backgroundColor='#'+colorValue;                 elem("zyad_style_copy").style.color='#'+getTextHex(colorValue);                      }          if(pickerField=='sitename')     {                  elem("zyad_style_site_name").style.color='#'+colorValue;                 elem("zyad_style_site_name1").style.color='#'+colorValue;                      }     if(pickerField=='intro')     {                  elem("zyad_style_site_intro").style.color='#'+colorValue;                 elem("zyad_style_site_intro1").style.color='#'+colorValue;                      }     if(pickerField=='siteurl')     {                  elem("zyad_style_site_siteurl").style.color='#'+colorValue;                 elem("zyad_style_site_siteurl1").style.color='#'+colorValue;                      }     pickerField=null;         hidePicker();         getcode();          } function elem(element) {          return document.getElementById(element);          } function toColor(h){          return [parseInt(h.substring(0,2),16),     parseInt(h.substring(2,4),16),     parseInt(h.substring(4,6),16)];          } function getTextHex(c){               if(c=="FFFFFF")     {                  return "000";                      }     else      {                  return "FFFFFF";                      }           } function get_trans_codes() {          getcode()      } function copymetasearch(sel_obj){          highlightmetasearch(sel_obj);         textRange=sel_obj.createTextRange();         textRange.execCommand("RemoveFormat");         textRange.execCommand("Copy");          } function highlightmetasearch(sel_obj){          sel_obj.select();     sel_obj.focus();          } ///// function get_Option_Value(Options){          if(Options&&Options.length){                  for(var i=0;i<Options.length;i++){                          if(Options[i].selected){                                  return Options[i].value;                                              }                      }              }else {                  return ;                       }      } function get_radio_value(field){          if(field&&field.length){                  for(var i=0;i<field.length;i++){                          if(field[i].checked){                                  return field[i].value;                                              }                      }              }else {                  return ;                       }      } function get_checkbox_value(field){          if(field.checked){                  return field.value;                      }     return "";          } function get_style_codes(){          style=elem("get_style").value;         var p=style.split(',');         zyad_style_color_border=p[0];         zyad_style_color_sitename=p[1];         zyad_style_color_background=p[2];         zyad_style_color_intro=p[3];         zyad_style_color_siteurl=p[4];         var zyad_style_copy_d=get_radio_value(form_zyad_codes.ad_iframe);              elem("zyad_style_color_border").value=zyad_style_color_border;              elem("zyad_style_color_sitename").value=zyad_style_color_sitename;         elem("zyad_style_color_background").value=zyad_style_color_background;         elem("zyad_style_color_intro").value=zyad_style_color_intro;         elem("zyad_style_color_siteurl").value=zyad_style_color_siteurl;         if(zyad_style_copy_d==1){                           elem("zyad_style_bg").style.border=" 1px solid #"+zyad_style_color_border;              }     else      {         elem("zyad_style_bg").style.border=" 0px solid #ffffff";                               }     elem("zyad_style_copy").style.backgroundColor='#'+zyad_style_color_border;         elem("zyad_style_copy").style.color='#'+getTextHex(zyad_style_color_border);         elem("zyad_style_site_name1").style.color='#'+zyad_style_color_sitename;         elem("zyad_style_site_name").style.color='#'+zyad_style_color_sitename;              elem("colorsample-border").style.backgroundColor=zyad_style_color_border;         elem("colorsample-sitename").style.backgroundColor=zyad_style_color_sitename;         elem("colorsample-background").style.backgroundColor=zyad_style_color_background;         elem("colorsample-intro").style.backgroundColor=zyad_style_color_intro;         elem("colorsample-siteurl").style.backgroundColor=zyad_style_color_siteurl;         getcode();          } //中易广告联盟程序 By www.zyiis.com QQ:381611116  </script> </head> <body> <table cellspacing="2" cellpadding="1" border="0">   <tbody>     <tr></tr>     <tr>       <td>边框</td>       <td>#         <input maxlength="6" size="6" value="336699"                                name="zyad_style_color_border" /></td>       <td><span class="colorhover" id="colorsample-border"                                onmouseover="this.style.borderColor='red';"                                style="BACKGROUND: #336699"                                onclick="showPicker('border');"                                onmouseout="this.style.borderColor='blue';"></span></td>     </tr>     <tr>       <td>标题</td>       <td>#         <input maxlength="6" size="6" value="0000ff"                                name="zyad_style_color_sitename" /></td>       <td><span class="colorhover" id="colorsample-sitename"                                onmouseover="this.style.borderColor='red';"                                style="BACKGROUND: #0000ff"                                onclick="showPicker('sitename');"                                onmouseout="this.style.borderColor='blue';"></span></td>     </tr>     <tr>       <td>背景</td>       <td>#         <input maxlength="6" size="6" value="FFFFFF"                                name="zyad_style_color_background" /></td>       <td><span class="colorhover"                                id="colorsample-background"                                onmouseover="this.style.borderColor='red';"                                style="BACKGROUND: #ffffff"                                onclick="showPicker('background');"                                onmouseout="this.style.borderColor='blue';"></span></td>     </tr>     <tr>       <td>字符</td>       <td>#         <input maxlength="6" size="6" value="000000"                                name="zyad_style_color_intro" /></td>       <td><span class="colorhover" id="colorsample-intro"                                onmouseover="this.style.borderColor='red';"                                style="BACKGROUND: #000000"                                onclick="showPicker('intro');"                                onmouseout="this.style.borderColor='blue';"></span></td>     </tr>     <tr>       <td>网址</td>       <td>#         <input maxlength="6" size="6" value="008000"                                name="zyad_style_color_siteurl" /></td>       <td><span class="colorhover" id="colorsample-siteurl"                                onmouseover="this.style.borderColor='red';"                                style="BACKGROUND: #008000"                                onclick="showPicker('siteurl');"                                onmouseout="this.style.borderColor='blue';"></span></td>     </tr>   </tbody> </table> <span id="color_picker"              style="DISPLAY: none; POSITION: absolute"> <table class="palette" cellspacing="0" cellpadding="0" border="0">   <tbody>     <tr>       <td><a onmousedown="selectColor('FFFFCC');"                    href="#">         <div style="BACKGROUND-COLOR: #ffffcc"></div>       </a></td>       <td><a onmousedown="selectColor('FFFF66');"                    href="#">         <div style="BACKGROUND-COLOR: #ffff66"></div>       </a></td>       <td><a onmousedown="selectColor('FFCC66');"                    href="#">         <div style="BACKGROUND-COLOR: #ffcc66"></div>       </a></td>       <td><a onmousedown="selectColor('F2984C');"                    href="#">         <div style="BACKGROUND-COLOR: #f2984c"></div>       </a></td>       <td><a onmousedown="selectColor('E1771E');"                    href="#">         <div style="BACKGROUND-COLOR: #e1771e"></div>       </a></td>       <td><a onmousedown="selectColor('B47B10');"                    href="#">         <div style="BACKGROUND-COLOR: #b47b10"></div>       </a></td>       <td><a onmousedown="selectColor('A9501B');"                    href="#">         <div style="BACKGROUND-COLOR: #a9501b"></div>       </a></td>       <td><a onmousedown="selectColor('6F3C1B');"                    href="#">         <div style="BACKGROUND-COLOR: #6f3c1b"></div>       </a></td>       <td><a onmousedown="selectColor('804000');"                    href="#">         <div style="BACKGROUND-COLOR: #804000"></div>       </a></td>       <td><a onmousedown="selectColor('CC0000');"                    href="#">         <div style="BACKGROUND-COLOR: #cc0000"></div>       </a></td>       <td><a onmousedown="selectColor('940F04');"                    href="#">         <div style="BACKGROUND-COLOR: #940f04"></div>       </a></td>       <td><a onmousedown="selectColor('660000');"                    href="#">         <div style="BACKGROUND-COLOR: #660000"></div>       </a></td>     </tr>     <tr>       <td><a onmousedown="selectColor('C3D9FF');"                    href="#">         <div style="BACKGROUND-COLOR: #c3d9ff"></div>       </a></td>       <td><a onmousedown="selectColor('99C9FF');"                    href="#">         <div style="BACKGROUND-COLOR: #99c9ff"></div>       </a></td>       <td><a onmousedown="selectColor('66B5FF');"                    href="#">         <div style="BACKGROUND-COLOR: #66b5ff"></div>       </a></td>       <td><a onmousedown="selectColor('3D81EE');"                    href="#">         <div style="BACKGROUND-COLOR: #3d81ee"></div>       </a></td>       <td><a onmousedown="selectColor('0066CC');"                    href="#">         <div style="BACKGROUND-COLOR: #0066cc"></div>       </a></td>       <td><a onmousedown="selectColor('6C82B5');"                    href="#">         <div style="BACKGROUND-COLOR: #6c82b5"></div>       </a></td>       <td><a onmousedown="selectColor('32527A');"                    href="#">         <div style="BACKGROUND-COLOR: #32527a"></div>       </a></td>       <td><a onmousedown="selectColor('2D6E89');"                    href="#">         <div style="BACKGROUND-COLOR: #2d6e89"></div>       </a></td>       <td><a onmousedown="selectColor('006699');"                    href="#">         <div style="BACKGROUND-COLOR: #006699"></div>       </a></td>       <td><a onmousedown="selectColor('215670');"                    href="#">         <div style="BACKGROUND-COLOR: #215670"></div>       </a></td>       <td><a onmousedown="selectColor('003366');"                    href="#">         <div style="BACKGROUND-COLOR: #003366"></div>       </a></td>       <td><a onmousedown="selectColor('000033');"                    href="#">         <div style="BACKGROUND-COLOR: #000033"></div>       </a></td>     </tr>     <tr>       <td><a onmousedown="selectColor('CAF99B');"                    href="#">         <div style="BACKGROUND-COLOR: #caf99b"></div>       </a></td>       <td><a onmousedown="selectColor('80FF00');"                    href="#">         <div style="BACKGROUND-COLOR: #80ff00"></div>       </a></td>       <td><a onmousedown="selectColor('00FF80');"                    href="#">         <div style="BACKGROUND-COLOR: #00ff80"></div>       </a></td>       <td><a onmousedown="selectColor('78B749');"                    href="#">         <div style="BACKGROUND-COLOR: #78b749"></div>       </a></td>       <td><a onmousedown="selectColor('2BA94F');"                    href="#">         <div style="BACKGROUND-COLOR: #2ba94f"></div>       </a></td>       <td><a onmousedown="selectColor('38B63C');"                    href="#">         <div style="BACKGROUND-COLOR: #38b63c"></div>       </a></td>       <td><a onmousedown="selectColor('0D8F63');"                    href="#">         <div style="BACKGROUND-COLOR: #0d8f63"></div>       </a></td>       <td><a onmousedown="selectColor('2D8930');"                    href="#">         <div style="BACKGROUND-COLOR: #2d8930"></div>       </a></td>       <td><a onmousedown="selectColor('1B703A');"                    href="#">         <div style="BACKGROUND-COLOR: #1b703a"></div>       </a></td>       <td><a onmousedown="selectColor('11593C');"                    href="#">         <div style="BACKGROUND-COLOR: #11593c"></div>       </a></td>       <td><a onmousedown="selectColor('063E3F');"                    href="#">         <div style="BACKGROUND-COLOR: #063e3f"></div>       </a></td>       <td><a onmousedown="selectColor('002E3F');"                    href="#">         <div style="BACKGROUND-COLOR: #002e3f"></div>       </a></td>     </tr>     <tr>       <td><a onmousedown="selectColor('FFBBE8');"                    href="#">         <div style="BACKGROUND-COLOR: #ffbbe8"></div>       </a></td>       <td><a onmousedown="selectColor('E895CC');"                    href="#">         <div style="BACKGROUND-COLOR: #e895cc"></div>       </a></td>       <td><a onmousedown="selectColor('FF6FCF');"                    href="#">         <div style="BACKGROUND-COLOR: #ff6fcf"></div>       </a></td>       <td><a onmousedown="selectColor('C94093');"                    href="#">         <div style="BACKGROUND-COLOR: #c94093"></div>       </a></td>       <td><a onmousedown="selectColor('9D1961');"                    href="#">         <div style="BACKGROUND-COLOR: #9d1961"></div>       </a></td>       <td><a onmousedown="selectColor('800040');"                    href="#">         <div style="BACKGROUND-COLOR: #800040"></div>       </a></td>       <td><a onmousedown="selectColor('800080');"                    href="#">         <div style="BACKGROUND-COLOR: #800080"></div>       </a></td>       <td><a onmousedown="selectColor('72179D');"                    href="#">         <div style="BACKGROUND-COLOR: #72179d"></div>       </a></td>       <td><a onmousedown="selectColor('6728B2');"                    href="#">         <div style="BACKGROUND-COLOR: #6728b2"></div>       </a></td>       <td><a onmousedown="selectColor('6131BD');"                    href="#">         <div style="BACKGROUND-COLOR: #6131bd"></div>       </a></td>       <td><a onmousedown="selectColor('341473');"                    href="#">         <div style="BACKGROUND-COLOR: #341473"></div>       </a></td>       <td><a onmousedown="selectColor('400058');"                    href="#">         <div style="BACKGROUND-COLOR: #400058"></div>       </a></td>     </tr>     <tr>       <td><a onmousedown="selectColor('FFFFFF');"                    href="#">         <div style="BACKGROUND-COLOR: #ffffff"></div>       </a></td>       <td><a onmousedown="selectColor('E6E6E6');"                    href="#">         <div style="BACKGROUND-COLOR: #e6e6e6"></div>       </a></td>       <td><a onmousedown="selectColor('CCCCCC');"                    href="#">         <div style="BACKGROUND-COLOR: #cccccc"></div>       </a></td>       <td><a onmousedown="selectColor('B3B3B3');"                    href="#">         <div style="BACKGROUND-COLOR: #b3b3b3"></div>       </a></td>       <td><a onmousedown="selectColor('999999');"                    href="#">         <div style="BACKGROUND-COLOR: #999999"></div>       </a></td>       <td><a onmousedown="selectColor('808080');"                    href="#">         <div style="BACKGROUND-COLOR: #808080"></div>       </a></td>       <td><a onmousedown="selectColor('7F7F7F');"                    href="#">         <div style="BACKGROUND-COLOR: #7f7f7f"></div>       </a></td>       <td><a onmousedown="selectColor('666666');"                    href="#">         <div style="BACKGROUND-COLOR: #666666"></div>       </a></td>       <td><a onmousedown="selectColor('4C4C4C');"                    href="#">         <div style="BACKGROUND-COLOR: #4c4c4c"></div>       </a></td>       <td><a onmousedown="selectColor('333333');"                    href="#">         <div style="BACKGROUND-COLOR: #333333"></div>       </a></td>       <td><a onmousedown="selectColor('191919');"                    href="#">         <div style="BACKGROUND-COLOR: #191919"></div>       </a></td>       <td><a onmousedown="selectColor('000000');"                    href="#">         <div              style="BACKGROUND-COLOR: #000000"></div>       </a></td>     </tr>   </tbody> </table> </span> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

演示地址
http://img.jb51.net/online/googlecolor.html

上一页 12阅读全文

您可能感兴趣的文章:

js和canvas绘制圆形金属质感特效
在JavaScript中,可以使用HTML5提供的Canvas元素来进行绘图操作,要使用canvas元素,浏览器必须支持html5,Canvas是一个HTML元素,可以通过JavaScript来操作和绘制图形,本文示例实现js和canvas绘制圆形金属质感的诗词高级排版特效
2024-09-09
解决JS内存泄露之js对象和dom对象互相引用问题
这篇文章主要介绍了解决JS内存泄露之js对象和dom对象互相引用问题,需要的朋友可以参考下
2017-06-06
JavaScript WebAPI、DOM、事件和操作元素实例详解
这篇文章主要给大家介绍了关于JavaScript WebAPI、DOM、事件和操作元素的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用js具有一定的参考学习价值,需要的朋友可以参考下
2021-06-06
原生js实现简单的Ripple按钮实例代码
本篇文章主要介绍了原生js实现简单的Ripple按钮实例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
2017-03-03
bootstrap滚动监控器使用方法解析
这篇文章主要为大家详细解析了bootstrap滚动监控器使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-01-01
js获取滚动距离的方法
这篇文章主要介绍了js获取滚动距离的方法,涉及javascript针对页面滚动条的相关操作技巧,需要的朋友可以参考下
2015-05-05
JavaScript实现星星等级评价功能
这篇文章主要为大家详细介绍了JavaScript实现星星等级评价功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-03-03
javascript 打印页面代码
不用window.print实现的打印效果代码。
2009-03-03
javascript同步Import,同步调用外部js的方法
javascript同步Import,同步调用外部js的实现代码，测试确实可用
2008-07-07
HTML中setCapture、releaseCapture 使用方法浅析
本文给大家简单介绍了下html中的高级拖动技术setCapture、releaseCapture的使用方法，有需要的小伙伴可以参考下
2016-09-09