标签:style blog http color os io ar cti
这段代码是在新浪网站上找到的。先放出CSS代码:
.focus a.arrow,.card_con4 li i,.cm1_menu_wrap a.cm1_menu_box,.cm1_img span,.cm1_item1 a{ background: url(http://www.sinaimg.cn/gm/xsk/gaiban/card_sprite.png) no-repeat;} .cm1_item_wrap{ padding-top: 9px; margin-top: 20px; position: relative;zoom:1;} .cm1_item_wrap .toparrow{ width: 0; height: 0; border-color: #fff #fff #f0f0f0; border-style: solid; border-width: 0 9px 9px; position: absolute; top: 0px; overflow: hidden;} .tarrl1{ left:65px;} .tarrl2{ left:193px;} .cm1_item_wrap .cm1_item{ width: 545px; padding: 18px 25px; background-color: #f0f0f0; color: #666; position: relative;} .cm1_item .copy_wrap{ margin-bottom: 10px;} .cm1_item .copy_box{ width: 310px; height: 30px; line-height: 30px; border: 1px solid #e3e3e3; background-color: #fff; padding-left: 10px; overflow: hidden; float: left;} .cm1_item p.cm1_p{ margin-bottom: 18px;} .cm1_item p.cm1_p1{ width: 370px; line-height: 32px; padding: 24px 0 24px 140px; } .cm1_item img.sorry{ position: absolute; left: 78px; top: 27px;} .cm1_item .copy_box input{ width: 240px; height: 30px; line-height: 30px; border: none; background: none; margin-left: 22px; vertical-align: middle;} .cm1_item input.copy_btn{ float: left; width: 87px; height: 32px; border: 1px solid #e3e3e3; margin-left: 10px; text-align: center; line-height: 30px; cursor: pointer;vertical-align: middle;} .cm1_item input.copy_btn1{ background-color: #fff;} .cm1_item input.copy_btn2{ background-color: #474747; color: #fff;} .cm1_item_wx{ width: 100px; position: absolute; right: 25px; top: 20px;} .cm1_item_wx p{ padding: 5px; line-height: 24px;}
然后放出html代码:
<div class="cm1_item"> <p class="cm1_p">恭喜您获得礼包,<span class="red">1小时</span>后将进入淘号库,请尽快激活</p> <div class="copy_wrap clear" id="kahao"> <div class="copy_box"> 卡号: <input type="text" name="" value="" readonly/> </div> <input type="button" name="" value="复制" class="copy_btn copy_btn1" onmousemove="copythis(‘kahao123‘,$(‘#kahao .copy_box input‘).val())" id="kahao123" /> <!-- 复制完成后切换为 已复制 --> <input type="button" name="" value="已复制" class="copy_btn copy_btn2" style="display:none;" /> </div> <div class="copy_wrap clear" id="kami" style="display:none"> <div class="copy_box"> 密码: <input type="text" name="" value="" readonly/> </div> <input type="button" name="" value="复制" class="copy_btn copy_btn1" onmousemove="copythis(‘kami123‘,$(‘#kami .copy_box input‘).val())" id="kami123" /> <!-- 复制完成后切换为 已复制 --> <input type="button" name="" value="已复制" class="copy_btn copy_btn2" style="display:none;" /> </div> </div>
最后是我们的JS代码:
function copythis(id,val){ ZeroClipboard.setMoviePath("http://ka.sina.com.cn/ka/js/ZeroClipboard10.swf"); var clip = new ZeroClipboard.Client(); clip.setHandCursor(true); clip.setText(val); clip.glue(id); //这个是复制成功后的提示 clip.addEventListener( "complete", function(){ alert(‘复制成功!‘); $(‘#‘ + id).hide().next(‘.copy_btn2‘).show(); clip.hide(); }); }
JS 单击复制,复制后变为已复制,布布扣,bubuko.com
标签:style blog http color os io ar cti
原文地址:http://www.cnblogs.com/php411161555/p/3909998.html