CodemySite_Web development

That's my website. When hovering on the picture. The picture will turn into colorful one and animate to right a little. Meanwhile, the title will scroll to top .  The main function is based on jQuery. I love Taylor Swift so much! aha.. Here is my code below. How many pictures is based on how many div.pentagon. Styling sets the styles before animation and after. JQuery is so convenient. So powerful!

Hide some information in your file,like images. This is what I do! Hope you can learn something. First, you have to prepare a image(download from everywhere). Build a start.bat  in the fold with the downloaded image.  Second,  set a txt file writing something you want hide. Then zip the txt into a .rar.   Most importantly, open the start.bat to add some words . BINGGO! The myst.txt file which we want to hide is zipped inside the file .rar.  Only knew by who set it. How privacy I feel! 

Slider is the gorgeous part on your website. You don't need toggle the images,just wait !  I arrange the four images and two arrow button to control the two directions. making the layout nice with css. the outer #seamless width  is the total of  four pictures.  And I also set the style when onclick the button. It looks dynamic in the project. The core part is coming!  Javascript.  If you feel a little dizzy,all right, so am I . OK,divide them. First, I get the elements which I 'll use next. Double the images to eight pictures, and the width is according to the number of Li. function move contains two parts : moving left and moving right. setInterval the function with 30 milliseconds. Finally, for mouse , when mouseover the div, the moving stop, vice versa.For button, when click, change the speed direction. 

Today,talk about how to make clock with javascript.Here is the sample. The clock is walking according to your computer's time. First,prepare the 10 png number from 0 to 9 and a background picture whatever you like. Now we gonna layout the html file.Overall,it contain 6 images with : . Then,we could make it looks comfort with style.css file. Now it looks nice. But how can the number running? The last step is javascript. Build a string to change the index of each image,using the function toDuo() to restrict the digit every two number. Then, put the string number into the image src in turn. Of course, every minute run the function tick(). In order to run it first, we should put the function at first overall. What a nice litter project! I like it .

initial code: And the layout is shown below. Annoyingly,the last section jump to next line even we use the display:inline-block; .Why that happened? How to removing Spaces Between Inline-Block Elements? There are a number of ways to remove the space between inline-block elements, and some are more complex than others. We are going to focus on two of the easiest ways, both of which happen inside HTML. The first solution is to put each new  <section>  element’s opening tag on the same line as the previous  <section>  element’s closing tag. Rather than using a new line for each element, we’ll end and begin elements on the same line. Our HTML could look like this: Another way to remove the white space between inline-block elements is to open an HTML comment directly after an inline-block element’s closing tag. Then, close the HTML comment immediately before the next inline-block element’s opening tag. Doing this allows inline-block elements to begin and end