Preview and source code of 10 classic web Front-end effects and 10 web Front-end Previews

Preview and source code of 10 classic web Front-end effects and 10 web Front-end Previews
1. CSS3 responsive navigation menu

Today, I will introduce how to use CSS to implement a responsive navigation menu.HTML5 + CSS3 technology, when the browser window is small or accessed using a mobile browser, the original horizontal menu will be reduced into a drop-down menu, when the mouse slides to the menu to show all the menus. This method can be applied to a large number of linked menu items. Especially in mobile projects, it can convert all menus into a drop-down menu in a click-on mode.

Online Demo

Source code download

2. Use raphael. js to draw a map of China

A map of China is used in the recent data statistics project, that is, to dynamically display the statistics of a province or region in a certain period of time on the map. We don't need flash, just rely on raphael. javaScript and SVG images can complete map interaction. In this article, I will share with you how to use js to complete map interaction. Raphael. js is a small javascript library that allows you to draw various vector graphs, charts, image cropping, rotation, motion animation, and other functions on a webpage. In addition, raphael. js is compatible with other browsers and ie6.

Online Demo

Source code download

3. Use CSS3 and jQuery to scale the search results

Search entries are essential on our website, especially in a limited page space, today, I will introduce how to use CSS3 and jQuery to implement a scalable search entry using examples. In the instance, only one search button is displayed. When you click the search button, the input box slides from right to left. After you enter the search content, click the search button to go to the search result page, collapse the search input box.

Online Demo

Source code download

4. Use CSS3 to create beautiful buttons

Today, I will show you how to use CSS3 to create a nice button with rounded corner shadow and gradient. It does not require any images or javascript scripts, but just needs CSS3 to easily implement button effects, and can be applied to anyHTMLElement, such as div, span, p, a, button, and input.

Online Demo

Source code download

5. Use Javascript to control the Cookie to close the background

During major holidays, the homepage of major websites will be dressed in holiday costumes. Designers generally use large background images to achieve better visual impact. Of course, consider that some users are not used to this large background image. Therefore, it is necessary to place the close button on the background image. If you click the close background button, the large background image will disappear. We use javascript to control the display and hiding of background images. When you click the close button, control CSS so that the page does not load background images, record COOKIE-related parameters, and set the cookie validity period, when the page is refreshed within the cookie validity period, the background image is no longer loaded. If the cookie is invalid, the background image is reloaded.

Online Demo

Source code download

6. PHP + MySql + jQuery top-and top-vote Functions

When we browse a webpage and want to agree or disagree with the content of the webpage, such as the opinions in articles and comments, we can click the top and top of the webpage to vote. The entire interaction process can be implemented asynchronously using ajax to improve user experience. This article uses examples to explain the top and top vote functions implemented using PHP + MySql + jQuery. It records the user IP address and determines whether the user's voting behavior is effective, this instance can also be extended to the voting system. If you have basic knowledge about PHP, MySql, and jQuery, continue reading.

Online Demo

Source code download

7. FullCalendar application-drag and save in real time

We can use FullCalendar to create a very powerful calendar program. You can easily operate the calendar in FullCalendar, such as create, modify, delete, and the drag and zoom calendar events described in this article.

Online Demo

Source code download

8. FullCalendar application-edit and delete calendar events

FullCalendar can be flexibly used in project development. In the previous article on this site, we introduced how to create a calendar event in FullCalendar, today, I want to introduce how to edit and delete calendar events in FullCalendar. In this way, we have completed a series of operations for adding, deleting, modifying, and querying calendar events on FullCalendar.

Online Demo

Source code download

9. iPictrue: Image annotation prompt

IPictrue is a jQuery-based plug-in that can mark the prompt information at any position on the image. Using iPictrue can enrich the image content and improve interaction, it is applicable to some applications that need to annotate image information, such as product structure diagrams. It also supports images and links.HtmlContent.

Online Demo

Source code download

10. jQuery's downward push of text and text information scrolling Effect

The WEB page needs to display the latest information of the website, such as the real-time data rolling effect of items such as Weibo dynamics, ticket remaining information, and traffic monitoring. We can use jQuery to implement the rolling effect of the front-end information. In this article, we will use examples to explain how to use jQuery to implement text-and-Image Information scrolling.

Online Demo

Source code download

Fixed Link: http://www.i7758.com/archives/1585.html