js和纯css制作自动铅笔弹出笔芯效果代码,JS代码库,德仔网

代码语言

代码分类

【JS】 js和纯css制作自动铅笔弹出笔芯效果

作者:Jackitshot / 发布于2013/11/28/ 605

先是用纯css从左到右设计出自动铅笔，中间的

为防滑笔握，button为笔钮，作为按钮事件拉伸长度，简单的js达到一定的长度时返回最小的长度值。

<div class = "mechanick_pencil">
 <div class = "head"> </div>
 <div class = "header"> </div>
 <div class = "carbon"> </div>
 <div class = "rod"></div>
 <ul>
  <li> </li> 
  <li> </li>
  <li> </li>
  <li> </li> //4糟防滑笔握
 </ul>
 <div class = "footer"></div>
 <div class = "button"></div>
 <div class = "clip"></div>
 <div class = "dot"></div>
</div>





html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
 display: block;
}
body {
 line-height: 1;
}
ol, ul {
 list-style: none;
}
blockquote, q {
 quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
 content: '';
 content: none;
}
table {
 border-collapse: collapse;
 border-spacing: 0;
}


.head, .head:after, ul, li, .footer, .rod, .clip, .clip:after, .clip:before, .dot, .header, .header:after, .carbon {
 display: block;
 margin:0;
 padding:0;
 position: absolute;
}
.mechanick_pencil{
 width: 402px;
 height: 31px;
 background: #444;
 margin: auto;
 position: relative;
margin-top: 250px;
}
.head{
 width: 10px;
 height: 31px;
 background: #111;
 left: -10px;
}
.head:after{
 content:"";
 width: 0;
  height: 0;
  border-top: 16px solid transparent;
  border-right: 100px solid #222;
  border-bottom: 15px solid transparent;
 left: -100px;
}
.header{
 width: 6px;
 height: 8px;
 background: #aaa;
 left: -81px;
 z-index: 2;
 top:12px;
}
.header:after{
 content:"";
 width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-right: 16px solid #bbb;
  border-bottom: 4px solid transparent;
 left: -15px
}
.carbon{
 width: 5px;
 height: 3px;
 background: black;
 right: 492px;
 z-index: 2;
 top:14px;
}
.rod{
 width: 40px;
 height: 20px;
 background: white;
 top: 5px;
 left: -115px;
}
ul{
 margin-left: 16px;
}
li{
 width: 3px;
 height: 27px;
 list-style-type: none;
 background: #191919;
 margin-left:13px;
 position: relative;
 display: inline-block;
 border-top: 2px solid white;
 border-bottom: 2px solid white;
}
.footer{
width: 40px;
 height: 31px;
 background: #111;
right: -40px;
 border-radius: 2px;
}

.button{
width: 40px;
 height: 24px;
 background: #222;
 top:3.5px;
 right: -442px;
 border-radius: 10px/20px;
 border-bottom-left-radius: 0;
 border-top-left-radius: 0;
 position:relative;
}
.button:active {
 position:relative;
 width: 25px;
}
.clip{
 width: 144px;
 height: 8px;
 background: #191919;
 top: -12px;
 right: -38px;
 border-radius: 2px;
 border-top-right-radius: 10px;
 border-top-left-radius: 3px;
}
.clip:after{
 content: "";
 width: 20px;
 height: 20px;
 z-index: -2;
 border: 8px solid transparent;
 border-top-right-radius: 70px;
 border-top-color: #191919;
 right: -6px;
}
.clip:before{
 content: "";
 width: 10px;
 height: 10px;
 right: 1px;
 top: 2px;
 background: #191919;
}
.dot{
 width: 15px;
 height: 10px;
 right: 88px;
 top: -11px;
 background: #191919;
 border-radius: 9px/5px;
 border-bottom-left-radius: 4px;
 z-index: -2;
}



$(document).ready(function(){
 $(".button").click(function(){
  $('.carbon').width($('.carbon').width() + 10*Math.random());
  $('.carbon').width(function(){
   if($('.carbon').width()>150){
    $('.carbon').width(5);
   }
  });
 });
});

试试其它关键字

　弹出笔芯　

同语言下

可能有用的

Jackitshot贡献的其它代码(2)