Collect 10 different Web front-end effects for source preview

1. tab menu that can slide to both sides

Today, the production of a tab menu, in fact, and the normal tab is not very different, for the menu item has a hover effect, there is a check effect, the increase is that the menu item can have countless, when the total menu item width of the sum beyond the fixed width of the tab, the right Move button appears, then, The extra menu items will be hidden. Then, you can click the Move button to move the menu item so that the hidden menu item is out, and the menu item can be numerous and free to increase.

Online Demo Source Download

2.CSS Text Wrapping Picture

Text wrapping is a way of composing Microsoft Office Word software, which is used primarily to set up the position of objects and text in a Word document, such as pictures, text boxes, AutoShapes, clip art, WordArt, and so on. Generally include the surrounding type, tight type, under the text, floating above the text, up and down, through the type of text wrapping. But when we do the layout of the Web page, sometimes we also need such a style, then how to do? In fact, is very simple, mainly is the use of float, see the following example:

Online Demo Source Download

3.CSS Custom Select drop-down selection box (no other tag emulation)

In the CSS let select "Hide", but not display:none, otherwise the SELECT element does not exist, here we can change the transparency of the Select to 0, so it is not visible, but does not affect the dropdown box, click on the Drop box will appear, it seems to be feasible, But this will find that the option is not displayed after each selection, which is why select is hidden, and the text is hidden, so we need an extra tab to store the options for each selection.

Online Demo Source Download

4.CSS Custom File Upload button

Use a label to cover the file field, and then adjust the elements of the outside of the file, set the button style, and then, in the file field "Hide" off (the hide here just change the transparency to 0, so that the element is still there), so that when the "button" will trigger the file field, you can select the file

Online Demo Source Download

5.CSS Hack-can be distinguished from Ie6-ie10, FireFox, Chrome, Opera

Today, some of the commonly used CSS hack, including commonly used IE hack and Firefox, Chrome, Opera browser hack, and these CSS hack integrated, wrote a small browser tester.

Online Demo Source Download

6. Imitation Sina game navigation bar making

Today imitate the Sina game Portal navigation bar, oneself also made a, feel also not too difficult, is more troublesome, mainly is the mouse to move out the application of the event and the menu localization processing, the code does not post, the demonstration link and the download link paste here.

Online Demo Source Download

7. Implement a table with a vertical scroll bar, the table head does not move when scrolling vertically

The implementation of such a table, there is a vertical scroll bar, horizontal scroll bar does not include the head, the transverse scrollbar includes the head, the vertical scroll bar scrolling, the head does not move, the horizontal scroll bar scroll when the head moves, table cell width is not fixed.

Online Demo Source Download

8.Javascript oscillating motion (same horizontal line reciprocating motion)

Oscillating motion, that is, an object around a certain axis in a certain angle to do reciprocating movement. Now with the JS simulation, the realization principle is to use setinterval or settimeout dynamic change an element and an axis distance, first from a position (speed of 0) to do near the axis of acceleration movement, when reaching the axis (speed reached the maximum), and then do away from the axis of the speed reduction movement, When a certain distance is reached (at a speed of 0), the reverse movement is made, thus forming a swinging motion.

Online Demo Source Download

9.Javascript control multiple images zoom in and out/javascript simple album

Small album, mouse move when the picture gradually enlarged, the mouse moved out gradually narrowed. There are two senses to be aware of, one is to enlarge the picture, a picture can not affect the image around it, and also from the center to zoom in, the other is to zoom in and zoom out the implementation of the animation. For the former, is mainly the layout of this piece, the use of JS control floating layout to absolute positioning layout; for the latter, mainly is the application of setinterval, need to encapsulate a small motion framework, involving the control and operation of CSS style, buffer motion implementation and JSON application.

Online Demo Source Download

A responsive navigation bar made by 10.css3+js

Today, a responsive navigation bar is created that automatically changes the style of the navigation bar with different screen resolutions or browser window sizes, and the main thing to use here is the CSS3 media Query. Specifically, you can see the response to the layout of this article, here does not spend a lot of space to introduce, mainly to see how this navigation bar to do. It is also important to mention that IE6-IE8 is not supported for CSS3 media query, so for IE6-IE8 we need special handling, let them keep the default style, this is for the layout and style to take this into account.

Online Demo Source Download

Collect 10 different Web front-end effects for source preview