Cutting-edge design recommendations-use jquery to create a dynamic floating web interface sharing 5 practical JavaScript parts dynamic update icon plug-in jquery parallax recommendations: nikebetterworld parallax smooth scrolling Effect

In front-end development and design, we are most concerned with the user experience. Now we often see some websites use floating birds as elements to fly back and forth, it is often the first thing you feel is that it is implemented in flash. If you do not have a high level, you will not be able to do this, is there a good way to implement it? Today I will share with you how the more fashionable floating elements are implemented,Click the balloon and he will jump. Click the snail bait. He won't let you move. Haha,

Someone asked me how the loading progress of my website was achieved. I shared it and read it.ArticleShare 5 practical JavaScript dynamic update icon plug-ins

Further reading

Parallax scrolling tutorial implemented by jquery (large background Effect of parallax)
Jquery parallax recommendation: nikebetterworld parallax smooth scrolling Effect

This is a jquery plug-in that can make any HTML object displayed on your web page "floating ".It helps create simple floating animations and make your website live to use these small "floating" objects.

~ Let's talk nonsense. Let's first look at the demo ,(Firefox and Google browser are the best)Our old rules:If you like the source code, please leave your email address and opinion,

Demo

Set several floating objects on the webpage,

 

Working Principle

 

Jqfloat. js uses the jquery. animate () method to infinitely loop the animation processing objects to different locations, so it causes the objects to appear on web pages and float.It uses the jquery. Data () method to store and track the attributes and States of each object.

Jqfloat. jsRun on all browsers: IE6 and, Firefox and WebKit browsers.

 

Usage

1. Reference The jquery file in the header,

 
<SCRIPT src = "jquery. Min. js"> </SCRIPT> <SCRIPT src = "jqfloat. js"> </SCRIPT>
 

 

 

2. Call the jqfloat () function on any element that needs to be floated.

View code

$ (Document). Ready (Function() {$ ('Object'). Jqfloat ();});
 

 

 

Looking at the amazing results

Click the balloon, he will jump, click the snail, he won't let you move, haha

Function Configuration:

. Jqfloat ([Method] [, options])

Method:Controls floating objects.
Options:Configure the floating animation array.

About Method

Currently, only two methods are available::

Play (or no method specified)
Start floating Animation

Stop
The animation for starting login.

Options

There are several options for configuring floating Animation

Width
Type: int Default: 100 -- the default value of int type is 100.
The maximum floating distance in the horizontal direction. Divide the value by 2 and locate the result on the left and right.

Height
Type: int Default: 100Int -- the default type is 100.
The maximum vertical floating. Divide the number by 2 and the result is located above and below.

Speed
Type: int Default: 1000 ---The default int type is 1000.
Maximum floating speed.

Minheight
Type: int Default: 0
Floating object distance from bottom/Surface

 

Details Code

 1 $ (Document). Ready ( Function  (){ 2      //  If no method or option is specified  3      //  Use the default method for floating Elements  4 $ ('Object' ). Jqfloat ();  5    6      //  If you only specify the option  7      //  The floating element varies according to the specified size.  8 $ ('Object'). Jqfloat ({  9 Width: 300 ,  10 Height: 300 ,  11 Speed: 100 12   });  13    14      // Stop floating  15 $ ('Object'). jfloat ('stop' );  16    17     //  Start floating  18 $ ('Object'). jfloat ('play' );  19 });

 

Link to this article: cutting-edge design recommendations-use jquery to create a dynamic floating Web Interface

Hide