Using Focuspoint.js to achieve responsive cropping of pictures

Usually the layout of the site is not single. Examples of shapes that may appear on computers, tablets, and smartphones are different. Especially if you're using a full-screen image, your theme may be truncated or completely missing, or look awkward if you have to use the same image file.

Focuspoint this jQuery plugin ensures that any container in your image looks great, and it proposes a "response cropping" concept that ensures that important parts of your image are cropped, and that the dynamic image is cropped to fill the available space without clipping away the subject part of the image.

Effect Demo Source Download

Method of use: 1. Calculate the focus point of a picture

The poly focus of an image is made up of x (horizontal) and y (vertical) coordinates. The coordinate value can be any number within the range 1 to +1, where 0 is the center. X:-1 represents the left edge of the image, and X:1 is the right edge of the image. For the y-axis, y:1 is the upper boundary of the image, and y:1 is the bottom boundary of the image.

confused, huh? Don ' t worry, that's okay, here's a handy script that gets the coordinates of the picture: click to view.

2. Introduction of JS and CSS on the page

You need to introduce Jquery,focuspoint scripts and style files to the page:

<link rel= "stylesheet" href= "Focuspoint.css" ><script src= "jquery.js" ></script><script src= " Focuspoint.js "></script>

3. Mark Picture Container

Specifies the image size and image container focus point coordinates. Note: I know this is not really supposed to need to specify the size of the image, but I find this more reliable than reading from the image. For example:

<div class= "Focuspoint" data-focus-x= "0.331" data-focus-y= " -0.224" data-image-w= "data-image-h=" >    </div>

4. Call the Focuspoint plugin

The basic call requires only one line of code:

$ ('. Focuspoint '). Focuspoint ();

Currently, there are not many configuration options available, but if you want to prevent the image from being re-focused as the window size changes, you can:

$ ('. Focuspoint '). Focuspoint ({    recalconwindowresize:false});

At any time, you can call Adjustfocus to re-focus the image:

$ ('. Focuspoint '). Adjustfocus ()

Effects Demo GitHub Home

Related articles that may be of interest to you

• Web development in a very practical 10 effects "source Download"
• Carefully selected excellent jquery Ajax page plug-ins and tutorials
• 12 Amazing ideas for 404 error page Design
• Let the website Move! 12 Excellent jQuery animation plugins
• Stunning 8 x HTML5 & JavaScript Effects

This article link: focuspoint.js– implementation of image-responsive cropping jQuery plugin

Compilation Source: Dream Sky focus on front-end development technology sharing web design resources

"http://www.cnblogs.com/lhb25/" from the source of this article

Using Focuspoint.js to achieve responsive cropping of pictures