CodemySite_Web development

There is a manual slider called View Switcher. Although it is kinds of nude for users, the benefit is lasts as long as users like for each image manually.  The slider contains the four images and a list of click button. The point is that image's Id name is the same as the click href URL, which can be connected respectively.  The outer slider should be the box shown one image each time,using overflow:hidden.  When users target the the img,the opacity:1. When users leave the target, the opacity:0. Meanwhile, when first load the page, the target should be on slide-1 which means showing the first image.  Then style the list part. The ul position should be absolute and li background is the circle using border-radius. Float:left means the list is horizental.  You can look up in my codepen  Here

When you click a button,the message would pop out as a box. The message box lead me thinking about alert(), which is the ancestor of pop out methods. Here I choose no JavaScrit to accomplish it.  HTML part contained a button which will be shown at beginning of the screen and the div named box. The span is the close icon at the top-right corner using × .  Of course, you should link the css file inside the head.  The body and the box element should be in the center vertically and horizentally. Using display:flex and align-item,justify-content for center respectively. Firstly, the messsage box should be hidden using opacity and visibility,when focusing button, the box shows up in the fixed position. To smooth the animation of showing box, I apply the CSS3 transition.  The demo free download here. Download  

Actually I'm a new learner with JavaScript and always being frustrated by the mingle code. I prefer no JavaScript which means easier and more readable, thankful to CSS3 skills of animation. I think Slider is the first step when you begin to learn JavaScript and the result looks fantanstic and attractive. Now I'm trying to bulid a image sliders without JavaScript.  The result has been shown at the beginning. Here we go to the code part. HTML part is contained three DOM layer such as the ID called slider(the outer frame),the slide-holder(the content stored all images) and the slide (each image is a slide). Here I got three images in the holder. The slider div is the eara which can be shown in the grey border. CSS part is decorated the style. The holder width should be wide enough to contain all the images which is bigger than the total width of all images. The moving animation comes from the CSS3 which lasts 10s and works permanently. The keyframe called scroller i...

JavaScript正变得越来越流行，它已经成为前端开发的第一选择，并且利用基于JavaScript语言的NodeJS，我们也可以开发出高性能的后端服务，甚至我还看到在硬件编程领域也出现了JavaScript的身影。JavaScript正在逐渐进化为一门全能的开发语言。 但用好JavaScript并不容易，你除了需要掌握它的语法并知道如何写出高质量的代码之外，还需要了解如何解决那些几乎在每个项目中都会遇到的需求场景，比如：判断日期，高亮文本，限制字符数等等，有很多第三方库可以解决这些问题，但这些库可能并非只是为解决这一个问题而创建的，这意味着你需要引入了很多无关的代码，这将使你的整个系统变得臃肿，而且也会影响到系统的性能。 我的做法是，收集和使用那些常见的JavaScript代码段，并在需要时，尽可能首先使用它们 。下面便是我收集的10段实用JavaScript代码，基于它们你还可以创造出更强大的JS插件或功能函数。 1. 判断日期是否有效 JavaScript中自带的日期函数还是太过简单，很难满足真实项目中对不同日期格式进行解析和判断的需要。JQuery也有一些第三方库来使日期相关的处理变得简单，但有时你可能只需要一个非常简单的函数，而不想引入一个庞大的第三方库。这时，你可以使用下面这段日期校验代码，它允许你自定义日期格式并进行日期有效性的校验。 function isValidDate ( value, userFormat ) { // Set default format if format is not provided userFormat = userFormat || 'mm/dd/yyyy' ; // Find custom delimiter by excluding // month, day and year characters var delimiter = /[^mdy]/ .exec(userFormat)[ 0 ]; // Create an array with month, day and year // so we know the format order by index var theFormat = userFormat.spli...

Title should be bounce up and down. Bulid up a html file called index and a css file called style. A fold named img getting the pictures. I have four part pictures for this animation. html First, a box should put all things,mainly for logos ,ball and text.  css .cont div is the parents of logos,ball and text. using position to adjust the positon of three parts. Adding animation is the main point in this project.  Must:   animation: [name] [time] [loop or none];  name whatever you like which will using later.  time usually should be any seconds.  loop make it infinite to loop or don't write anything.  animation-fill-mode:both; The animation-fill-mode property specifies a style for the element when the animation is not playing (when it is finished, or when it has a delay). By default, CSS animations do not affect the element until the first keyframe is "played", and then stops once the last keyframe has c...

The  HTML meta  element   represents any metadata information that cannot be represented by one of the other HTML meta-related elements ( <base> ,  <link> ,  <script> , <style>  or  <title> ). Depending on the attributes set, the kind of metadata can be one of the following: If  name  is set, it is  document-level   metadata , applying to the whole page. If  http-equiv  is set, it is a  pragma directive , i.e. information normally given by the web server about how the web page should be served. If  charset  is set, it is a  charset declaration , i.e. the charset used for the serialized form of the webpage. If  itemprop  is set, it is  user-defined metadata , transparent for the user-agent as the semantics of the metadata is user-specific.   meta  always be inside the tag head. Attributes character encoding <meta   charset ...