jquery-based Web front-end 10 different applications preview and source code

1. Web page grayed out (CSS+JS), compatible with ie7-10, FF, Chrome, Opera

A lot of the media has stopped some entertainment, some websites also turned the theme or logo into gray. So how to turn the picture or text on the page gray?

Online Demo Source Download

2.Javascript Web page side pop-up box

Today produced a Page side popup box, can be used to make sharing buttons, online customer service, message boxes, and so on, these effects are the same principle, they can close to the browser's top, bottom, left and right four sidebar, the following example provides four styles, showing the effect of the different sidebar displayed.

Online Demo Source Download

3. Create a login box, with authentication, can be scanned by mobile phone login

Today made a login box, with verification, and can be scanned by mobile phone QR code with mobile phone login, this QR code is actually the address of the login page, mobile phone after scanning with mobile phone access to the login page, and then use the mobile phone login, the following to specific look at it.

Online Demo Source Download

A simple toner made by 4.html5+js

Today, using HTML5 with JavaScript to create a toner, the main function is to move the slider to see the color changes, and the RGB value will change, you can also enter the RGB value to preview the color. The technique used is very simple, the sliders are made using the form in HTML5, and the color change is JS's manipulation of the DOM.

Online Demo Source Download

5.HTML5 drag and drop upload images, you can upload more than one

In HTML5, you can use the methods provided in the DataTransfer object to enable dragging of files between the browser and other applications. Although the previous version of HTML4 also supports drag-and-drop data, it is limited to browsers and does not support data outside the browser.

Online Demo Source Download

6. A Metro style menu made of pure CSS

The menu element is an old token that is re-enabled in the HTML5, in fact it existed at HTML2 time, but it was abolished in HTML4, and it was restored in HTML5, and the new functional meaning was given. It is often used in conjunction with Li to define a list-based menu. In fact, today's production of this small menu is mainly the application of CSS, without the use of the menu UL can also be achieved.

Online Demo Source Download

7.CSS3 Multi-background implementation (multiple backgrounds)

For background properties Background-image people should already be familiar with it, and the properties associated with it in CSS2 are background-repeat (how to set the background to repeat and repeat), Background-position (Sets the position of the background picture in the container), background-attachment (sets whether the background scrolls with the page), controls how the background picture is displayed in the container, But we can only provide a background image for the container, if we want to make a container background with more than one image, then how can we do it? and add some useless elements to the container?

The birth of CSS3 for us to solve this problem, in CSS3, through the background-image or background can set up a container for multiple background images, that is, you can put different background image only into a block element.

First, let's look at the syntax:

Background: [Background-image] | [Background-origin] | [Background-clip] | [Background-repeat] | [Background-size] | [Background-attachment] | [Background-position]

The URLs of multiple background images are separated by commas, and if there are multiple background pictures and only one (for example background-repeat only one), then all background pictures apply the property value.

Online Demo Source Download

8. jquery-based Web page snow effect plug-in

In this special day, give you special blessing! May you be happy and happy in the Safe night! Outside the window snowflakes float, fluttering snowflakes charming smile. Smile cold winter, every day in blessing you ... "not named. gif bitter I still in the night in the code ..., blog today saw a jquery Web page snow plug-in, feel good, share to everyone ...

Online Demo Source Download

9. A navigation bar with a bubble tip made with the Grumble.js plugin

Grumble.js is a very special bubble shape hint control, today I use it to make a navigation bar, the mouse moves into the menu option will appear bubble hint, the mouse moves out when the bubble hint disappears.

Online Demo Source Download

10.Javascript to achieve typewriter effect

JavaScript implements typewriter effect: on two knowledge points, one is the use of the timer, the other string intercepts the function substring (start, end).

Online Demo Source Download

jquery-based Web front-end 10 different applications preview and source code