CodemySite_Web development

Verify.js is a plugin for verifying that users are not robort, which contains five ways such as regular,slide,calculation, puzzle and choosing words in order. GitHub here More documents here Step1: <!--link CSS--> <link rel= "stylesheet" type= "text/css" href= "css/verify.css" > <!--link JQUERY--> <script type= "text/javascript" src= "js/jquery.min.js" ></script> <!--link JS--> <script type= "text/javascript" src= "js/verify.min.js" ></script> HTML: HTML Basic html for five types of verifications. HEAD: HEAD  Link the verify.css file in the head. And a little stylish for sections. Step2: JS link js in body (1)regular panel1.js $('#id').codeVerify({attributes...}); Expaination: attribures explain type default is 1.   width the width of verification code, percentage available height the height of verif...

Bubbly-bg.js is a  beautiful bubbly backgrounds in less than 1kB (696 bytes gzipped),which is based on HTML5 canvas. GitHub here Step1: HTML This is the clock parts. html Do some stylish on clock to make it center. head Step2: JS It's easy to apply the bubbly-bg.js function with bubbly(); js There are several attributes: coloreStart: the beginning of the color transit colorStop:the end of the color transit(I think it's like gradient()) bubbleFunc: the function of bubbles moving bubbles: the numbers of bubbles showing blur: the ambiguity of bubbles .The bigger the number is, the more blur the bubbles are. compose: the style of bubbles. multiply bubbles. Default is  compose : " light " .The other is compose : " source-over " shadowColor:the shadow color of bubbles The javascrip color js below. More detail expain check  here js for clock See the Pen bubbly-bg.js demo by Yifang Di ( @diyifang ) on C...

pc  mobile (max:width960px) This example is  animation effects when hovering the card,which is responsive for pc and mobile.   Step1: HTML html In the box,there are two parts:icon and content which can be replaced by any information. Step2: CSS3 css1  The attribure called display:flex makes the the box in the middle of the page. Given the position relatively ,the box gets border styles. When hovering, the border of box turns color. css2  Then two short lines are from :before :after,and justify their positions. When hovering the box, the two lines slide from left to right with animations,and show from hidden opacity. css3  The icon (image) is fixed at the absolute position at first. When hovered, the image zoom in and show more clear. css4 More considers about mobile application, it's useful to make it responsive. When applying to phone screen size 960px width, the animation and absolute position should be ch...

When the mouse hovers on the card which contains images or paragraphs, the description will slide to top to show the information,meanwhile the image zooms in with animations. This is a demo purly with CSS3. Step1: Link the style.css in the head. head  Step2: HTML The card should be four parts: card_thumb, card_data,card_body and card_footer. All the words in the card_body split to for sections. html Step3: CSS Basic reset for body and link the font-family from google fonts. css1 To make sure the card in the center of the brower. When hovering, the outside of the card should be more box-shadow with animations. css2 The date in the circle at the right corner of the card is placed absolute. css3  The thumb is the image. And when users hover the image, the scale changes from 1 to 1.2,and the opacity reduces half transparent, and the thumb height narrows to half in 0.5 seconds. css4 The description should be hidden at first,so the opacit...

Bootstrap除了包含丰富的Web组件之外，如前面介绍的下拉菜单、按钮组、导航、分页等。他还包括一些JavaScript的插件。 Bootstrap的JavaScript插件可以单独导入到页面中，也可以一次性导入到页面中。因为在Bootstrap中的JavaScript插件都是依赖于jQuery库，所以不论是单独导入还一次性导入之前必须先导入jQuery库。 一次性导入： Bootstrap提供了一个单一的文件，这个文件包含了Bootstrap的所有JavaScript插件，即bootstrap.js（压缩版本：bootstrap.min.js）。 <!—导入jQuery版本库，因为Bootstrap的JavaScript插件依赖于jQuery --> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <!—- 一次性导入所有Bootstrap的JavaScript插件（压缩版本） --> <script src="js/bootstrap.min.js"></script> 导入fromCDN <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 单独导入： 为方便单独导入特效文件，Bootstrap V3.2中提供了12种JavaScript插件，他们分别是：    ☑   动画过渡（Transitions）: 对应的插件文件 “transition.js”    ☑   模态弹窗（Modal）: 对应的插件文件 “modal.js”    ☑   下拉菜单（Dropdown）： 对应的插件文件 “dropdown.js”    ☑ ...