Home > Others

jquery implementation through the picture amplification effect code

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Preparation: Learning animate functions

Animate (Params,options)

A function to create a custom animation.
The key to this function is to specify the animation form and the result style Property object. Each property in this object represents a style attribute that can be changed (such as "height", "top", or "opacity").

Note: All specified attributes must be in camel form, such as marginleft instead of Margin-left.

The animation ends when the value of each property indicates how much of the style property is. If it is a numeric value, the Style property is graduated from the current value to the specified value. If you are using a string value such as hide, show, or toggle, the default animation form is invoked for the property.
Preparation: Learning animate functions

Animate (Params,options)

A function to create a custom animation.
The key to this function is to specify the animation form and the result style Property object. Each property in this object represents a style attribute that can be changed (such as "height", "top", or "opacity").

Note: All specified attributes must be in camel form, such as marginleft instead of Margin-left.

The animation ends when the value of each property indicates how much of the style property is. If it is a numeric value, the Style property is graduated from the current value to the specified value. If you are using a string value such as hide, show, or toggle, the default animation form is invoked for the property.


Start making: Zoom in on a picture

HTML code

The code is as follows Copy Code

<body>
<div class= "Imagecontainer" >
<div id= "ImageList" >




</div>
</div>
</body>

CSS Code

The code is as follows Copy Code

. Imagecontainer{position:relative;height:200px;width:600px;background: #234}
#imageList {height:200px; Position:absolute}
#imageList img{height:100%;width:150px; position:absolute;}
. img_1{left:0;}
. img_2{left:150px;}
. img_3{left:300px;}
. img_4{left:450px;}

/*

Description

In this example CSS plays a very important role, especially. Imagecontainer and #imagelist's position style of value, do not understand can be studied under the position relative and absolute role and the power of interaction.

*/

JS Code

The code is as follows Copy Code

$ ("#imageList img"). MouseOver (function () {
$ (this). CSS ("Z-index", 99999);
$ (this). Animate ({height: "150%", width:150 * 1.5}, {queue:false, duration:1500});

}). mouseout (function () {
$ (this). Animate ({height: "100%", Width: "150px"}, {queue:false, duration:1000});
$ (this). CSS ("Z-index", 1);
});

/* Description:

1. When the mouse moves to the IMG, the height and the width enlarge 1.5 times times, the animation time is 1500 milliseconds, the z-index biggest, guarantees the picture in the topmost

2. When the mouse moves out of the IMG, restore height and width, animation time of 1000 milliseconds, Z-index restore

*/

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

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: info-contact@alibabacloud.com 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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More