Home > Developer > JavaScript
Very beautiful album sets use jquery to create album sets, album jquery
1. Simple image tumbling
Image-rolover is often used in interactive navigation bar. When we move the mouse over the navigation bar, the appearance of the button changes. For example, we use the following black and white thumbnails as the navigation chart. When you move the mouse over a specified icon, the icon becomes a bright color image. Preview as follows:
The code for this page is very simple. Let's take this as an example to gradually roll over the image:
Img-rollover.html
<!DOCTYPE html>This code is very simple. It mainly includes a Logo part, a title and six <a> links. In the middle, we omitted the jQuery code section in 38 lines. Next we will gradually add the code to implement the image tumble effect.
1. Change the src attribute of the image.
We know that each image displayed on the web page has a src attribute, which indicates the file path and points to an image on the server. If we change the value of this attribute, the browser will display a new image. For the above code, we can first use the each () function to retrieve the traversal of all img elements and add the following code at the corresponding position:
<script> $(document).ready(function(){ $('#gallery img').each(); });//end ready</script>We can use the arrt () method of jQuery to obtain the src attribute of img. Then, we replace the src attribute value of the above img with the path of the new image as follows:
<script> $(document).ready(function(){ $('#gallery img').each(function(){ var oldSrc = $(this).attr('src'); var newPic = new Image(); var imgExt = /(\.\w{3,4}$)/; newPic.src = oldSrc.replace(imgExt, '_h$1'); }); });//end ready</script>The following image is pre-loaded with a simple analysis of this Code. Here we will first review it. The attr () function allows you to read the specified html attribute value of a tag, in the preceding example, the 'src' parameter is used to read the image's src attribute. If you pass the second parameter to the attr () method, You can reset the value of this attribute. For example:
$ ('# Pic1'). attr ('src', 'images/newImg.jpg ');
In addition, the attr () function allows us to modify Multiple HTML attribute values at a time. For example, when the size of the newImg to be loaded does not match the size of the oldImg, we can change the width and height of the img element to avoid distortion of the new image. The method is as follows:
var newImg = new Image();newImg.src = 'images/newImage.jpg';$('#pic1').attr({ src: newImg.src, width: newImg.width, height: newImg.height});2. image pre-loading
If we change the src attribute of the image to implement image-rolover without moving the mouse over the specified image, there will be a small problem. When we move the mouse over the specified icon, the src attribute of the image is changed. In this case, the browser downloads the resource image from the new src path, on-site image downloads often give users a sense of latency. To overcome this annoying problem, we can download images to the browser cache in advance.
In fact, in code 2, we implement image pre-loading. Line 1 in Code 2 first obtains the src attribute of each image; line 2 creates a new image; Line 2 ~ In line 7, the regular expression is used to add _ h to the end of the old image src and then assign it to the newly created image src. For example, if the old image src is 'images/blue.jpg ', assign 'images/blue_h.jpg' to the newly created src attribute of newPic.
Run the code to 'newpic. src = oldSrc. replace (imgExt, '_ h $1'); ', the browser downloads the new image to the specified src and stores it in the browser cache. At this time, the mouse event has not yet been triggered. We can pre-load the image by downloading the images one by one at the beginning of the script.
3. Add hover () events to implement image rolover
After image pre-loading, add a hover event to the image to be tumble. When you move the mouse over a specified image, the image turns to a colorful one. When you move the mouse over it, the image returns to black and white. On the basis of Code 2, we add the following:
$(document).ready(function(){ $('#gallery img').each(function(){ var oldSrc = $(this).attr('src'); var newPic = new Image(); var imgExt = /(\.\w{3,4}$)/; newPic.src = oldSrc.replace(imgExt, '_h$1'); $(this).hover( function(){ $(this).attr('src', newPic.src); }, function(){ $(this).attr('src', oldSrc); } );//end hover }); });//end readyThe code is very simple ~ Line 14 adds a hover event to the current image through this. The src of the image is changed when the mouse moves in and out. Keep the img-rolover.html behind it, and place the js/jquery-1.7.2.min.js and image resources that need to be included in good order according to the path specified in the Code. You can test the tumble effect of the image navigation image just like the preview image.
2. Beautiful album Sets
After the image is tumble, we hope that, when we click a small thumbnail, We can display a large image, just like an album that can be viewed. Preview as follows:
Next we will add the album set function based on code 1 of the small image tumble.
1. Why should I put img in the link?
Some may not understand why img should be included in the <a> link. In fact, this is a non-interfering JavaScript technology. If your browser closes JavaScript, the image is included in a link. When you click a thumbnail, you can also access the large image file. Only by means of links, clicking a link will exit the current Web page and load the large image file according to the link. As shown in:
The above is for users who have disabled JavaScript. However, in general, for visitors who use JavaScript, we want to display the large image on the page when clicking a small thumbnail, rather than linking to another page. Generally, clicking a link causes the Web browser to load the content pointed to by the link. Therefore, the first step here is to prevent the browser from redirecting to the page when clicking the image link. We use the preventDefault () method of the event to block the normal behavior of the event. Add the following code:
$ (Document ). ready (function (){... // omit the unchanged part $ ('# gallery '). click (function (evt) {evt. preventDefault () ;}); // end click}); // end readyThe added Code adds a click event for the link. When you click the link, the preventDefault () method of the event blocks the normal behavior of the event. When we click the image link on the page, the browser will not jump to the big picture page. Of course, for Browsers without JavaScript, the redirection is still implemented, because the closure is completed through JavaScript.
2. Click the thumbnail to display a large image on the page.
To display a large image, add a div with the id of bigImg Based on the code above, for example, line 4, 9th:
<div id="gallery"> <a href="images/blue.jpg"></a> <a href="images/green.jpg"></a> <a href="images/orange.jpg"></a> <a href="images/purple.jpg"></a> <a href="images/red.jpg"></a> <a href="images/yellow.jpg"></a></div><div id="bigImg"><div>Next, we use jQuery to create an img label for the big image to be displayed, and add the following code in code 3:
... // Omit the unchanged part $ ('# gallery '). click (function (evt) {evt. preventDefault (); var imgPath = $ (this ). attr ('href '); var newImg = $ (' '); newImg. hide (); $ ('# bigImg '). prepend (newImg); newImg. fadeIn (1000) ;}); // end clickFirst, use the attr () function to obtain the href attribute of <a>, that is, the link address imgPath. Row 5th creates an img Tag Based on the connection address, assign the src attribute of the label to imgPath; row 7th. First, hide the image, and then show it in a light mode; the img label of row 8th is added to <div id = "bigImg"> </div>. If no hidden operation is performed on Row 7th, the image will appear immediately; row 9th, the image is displayed in a fade-in mode. OK, save the code, open it in the browser, click the thumbnail, and you will find that the album viewing effect is available. However, when we click the album image continuously, the history image will not disappear, if we keep clicking, the images will be listed all the time. As shown in:
In fact, every time we click a thumbnail, the code will create a new img for us and add it to <div id = "bigImg"> </div>, from the DOM perspective, sub-nodes are constantly added:
To achieve the effect of "album" reading, we need to delete the previous image while displaying new photos. Add the following in code 5:
... // Omit the unchanged part $ ('# gallery '). click (function (evt) {evt. preventDefault (); var imgPath = $ (this ). attr ('href '); var oldImg =$ (' # bigImg img '); var newImg =$ (' '); newImg. hide (); $ ('# bigImg '). prepend (newImg); newImg. fadeIn (1000); oldImg. fadeOut (1000, function () {$ (this ). remove () ;}); // end clickLine 4 of the Code first obtains the existing image oldImg. When the new image fades in, the image should fade out. 11 ~ Line 13. After the new image fades in, the oldImg fades out. Meanwhile, a callback function is provided to the fadeOut function to remove the img tag of the image after the oldImg fades out. In this way, we can ensure that there is always only one img node in the DOM tree, without increasing infinitely.
Next we will make some details. When we click this page, we want to display the first image by default. To implement this small function, we only need to add a line of code after code 6:
... // Omit the unchanged part $ ('# gallery '). click (function (evt) {evt. preventDefault (); var imgPath = $ (this ). attr ('href '); var oldImg =$ (' # bigImg img '); var newImg =$ (' '); newImg. hide (); $ ('# bigImg '). prepend (newImg); newImg. fadeIn (1000); oldImg. fadeOut (1000, function () {$ (this ). remove () ;}); // end click $ ('# gallery a: first '). click ();We added $ ('# gallery a: first '). click (); In jQuery, if no parameters are passed to the event function, jQuery triggers this event. Save the code and open it in the browser again. The first image is displayed by default:
3. Absolute css positioning for overlapping Images
The beautiful album set has basically been completed, but the fade-out of the old image will be completed after the new image when we change the photo to be viewed, it gives us a feeling of being exhausted:
To solve this problem, we can make the new image fade in and the old image fade out overlap display. Css absolute positioning is required to achieve overlapping image display.
In general, when hiding or adding a new element, other elements will automatically move like a stream to fill the blank or place new elements. However, for example in this article, if we do not want to see such an effect, we can use absolute css positioning. The absolute position of css will place an element outside the regular page content stream, so that it will not appear in the content stream to fill the movement and other operations. If we use absolute positioning to position the elements in the same position, the elements will overlap. In this example, this is exactly what we want. The implementation is actually very simple. You only need to specify img in <div id = "bigImg"> </div> in css as absolute positioning. Add the following code before code 1 </style>:
#bigImg img { position: absolute;}Save and open it in the browser again. That's all! The beautiful album is ready.
Jquery File Download
The above is all the content of this article, and I hope it will help you learn jquery programming.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
