10 ajax/JavaScript special effect instances make your website more attractive

Today's topic is how to improve the interface of your website or improve the visual experience of your website, so that users can still remember it.
There are three main methods (from hard to easy): writing scripts by yourself; using JavaScript frameworks similar to jquery and mootools (making code easier ); use a pre-preset script that can work in an existing JavaScript framework or the one that starts development from scratch. This article is suitable for those who intend to improve work efficiency or are unwilling to develop scripts from scratch.
10 types are collected here PowerfulAnd Easy to useTo improve your website interface, so as to get more user experience. These 10 JavaScript special effects review your website's unexpected visual feast, and are easy to install and use.

You can also refer to the following JavaScript/ajax tutorials and resources:
10 awesome Ajax and JavaScript instance resource websites
12 Javascript methods to solve common browser compatibility problems
Navigation menu resources of 300 + jquery, CSS, mootools and JS

1. greybox

GreyboxAllows you to run other websites in the form of a Mode window (similar to a pop-up window, but not a new browser window ). if your website has export links for some other websites, but you do not want your users to leave your website or open another browser window, this is really a good solution. Using greybox is very simple.

Here is a key page for greybox: Download Page, description page, instance, installation, and advanced usage (if you are a javascript master, read some tips on this page, you can expand its function library)

2. Instant. js

Instant. jsThe special effect dynamically adds a polarization-like effect to your photo (skews and adds shadows and borders ). Now we can use this photo effect to simulate the digital photo processing of Photoshop.
This script technology can be used when there are a lot of photos on your website, but you don't want to manually process them one by one. (You may use batch processing, but it is only based on a single action, such as resizing, cropping, etc ...)

3. mootable

Mootable allows you to sort data in a table (without refreshing the page) and use Dom to replace the new sorting method of database requests. Easy to use, only requires slight configuration.
This script library must be supported by the mootools framework. You can download it here. You can also find some mootable creation methods in the mootools section of the Forum, with feedback from many mootools developers.

4. fancyform

FancyformIt can replace monotonous form controls such as single-choice buttons and check boxes. The basic usage only takes two steps: (1) Calling the Javascript file on the page (2) specifying the class name for your form control, for example, the check box specifies class = "checked" or class = "unchecked", and the single sequence specifies class = "selected" and class = "unselected ". Very inconspicuous JavaScript.
This script requires support from mootools (Version 1.1)

5. Image menu

Image menu, developed using phatfusion. A very nice horizontal menu. When you hover over a menu item, the image will be expanded.
You can use this technology to apply the effect on the hidden part of the photo, but when you hover your mouse over it, it will show all.
This script requires support from mootools (Version 1.1)

6. amberjack: site tour creator

This is a lightweight javascipt library that allows you to add a quick tour for your website. Allows users to view brief descriptions when viewing each page.
You can use this technology to demonstrate how to use this website. You only need to click the next button to understand every step that needs to be done.

7. imageflow

Inspired by the iPod "coverflow", imageflow is a special effect used to display an image set. You can drag the scroll bar below to control the display of images.
After clicking an image, the user will go to a webpage with a clear picture.

8. shadowbox. js media Viewer

Shadowbox is a "cross-browser, cross-platform, simple code, and complete media viewing application that is fully compiled using javascipt" (how? In one breath, there are so many advantages .)
The difference between shadowbox and other model boxes (such as lightbox 2) Is that shadowbox supports many file types other than images, such as flash videos, embedded YouTube videos, apple.com trailers, and webpages (this allows users to log on and register without having to go to another page ). This is a valuable script.

9. tjpzoom 3-image magnifier

TjpzoomThis allows you to partially zoom in a high-definition image. Press and drag the mouse to change the size of the enlarged area.

10. mootools tips

Mootools tipsAs part of the mootools framework, it allows you to provide users with a highly configurable tooltip. When you hover your mouse over a link or image, some additional prompts about this element will be displayed on the screen.
You can adjust the following methods: CSS style (you can modify the default black background and white text), gradient speed, style of the tooltip displayed on the screen, and how long you want the tooltip to be displayed. This script must be supported by the mootools framework.

10 JavaScript effects to boost your website's fanciness factor
10 examples of special JavaScript effects make your website more attractive
Original load: Bingo -- a fun Internet life that integrates front-end development, webpage design, website availability, and user experience