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

Source: Internet
Author: User

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,


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.



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

The animation for starting login.


There are several options for configuring floating Animation

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.

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.

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

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


Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.