Use jquery UI to create a slide)

Use jquery UI to create a slide

Some time ago I saw this effect on Zozo's blog: http://byzuo.com/blog/dragscroll.
At that time, he wrote it in pure JS, with a bug in the middle. Today, I will not improve it, but use jquery UI to complete this effect.

Final effect:

 

1. What is jquery UI?

In short, jquery UI is also a jquery plug-in, but it only refers to the UI-oriented plug-in officially maintained by jquery.
Jquery UI has the following features:
1. Easy to use
2. Strong Configuration
3. Multiple themes
You can download all jquery UI content at http://jqueryui.com/download.

2. Test the knife

Today's effect is a slider effect. According to the official jquery UI example, we need a total of three JS files:
(1) jquery. js
(2) UI. Core. js
(3) UI. Slider. js
At the same time, a CSS file is required:
(1)jquery-ui-1.7.2.custom.css
We introduce them all in the webpage, and then apply the plug-in to a div element,CodeAs follows:
$ (Function (){
$ (". Drag_cont_btn"). Slider ();
});
OK. Now you have completed calling the jquery UI plug-in. Let's take a look at our results.
Http://www.cssrain.cn/demo/drag_scroll/demo1.html

3. Add HTML code

In this step, you should note: How to nest XHTML to make the code simpler. The good XHTML nesting method is very helpful for coding.
You can use firebug of Firefox to check my webpage structure.
Http://www.cssrain.cn/demo/drag_scroll/demo2.html

4. Create a slider

In the previous step, the slider is not associated with the image list. In this step, we will complete it.
By viewing the jquery UI slider API, We can find two very useful parameters:
(1) max: Maximum sliding block width
(2) slide: the callback function for sliding
By setting Max, we can give the sliding block a range. By using the slide callback function, we can control the scrolling of the image list.
Key code:
// Parameters to be used by the slider:
// (1) max: Maximum Value
// (2) slide: dynamically changes the left of the container when sliding.
VaR slideropts = {
MAX: width-parseint(export dragcont.css ("width ")),
Slide: function (E, UI ){
$Contain.css ("Left", "-" + UI. Value + "PX ");
}
};
// Create a slider
$ Button. Slider (slideropts );
Example:
Http://www.cssrain.cn/demo/drag_scroll/demo3.html

5. Hide unnecessary parts

Let's just put this step here to let everyone know the actual principle of this animation. Hide unnecessary parts. I believe everyone understands how to do this. Use CSS overflow: hidden. If you want to add it to an element, do not let me talk about it.
Example:
Http://www.cssrain.cn/demo/drag_scroll/demo4.html

6. multi-row list

It is not a piece of cake to create a multi-row list through the previous steps.
The improvement steps are as follows:
(1) the height of the corresponding element is doubled.
(2) When calculating the element width in JS, divide it by 2.
Example:
Http://www.cssrain.cn/demo/drag_scroll/demo5.html

7. Vertical list?

We have finished the slider effect for single row and multi-row lists. If you want to create a vertical slider effect, can you do it?

Download the code in this article:
Http://www.cssrain.cn/demo/drag_scroll/drag_scroll.rar