Today want to say is how to do their own fencing to do a JS Drop-down refresh (js + h5 + CSS3). Since it's a drop down, then the application scenario is, of course, on the handheld device. In the JavaScript world, always with a lot of practical and gorgeous effect of convergence, this is a very colorful programming language. At present, there are also many excellent JS sliding plug-ins on the network, such as Iscroll (the first is that we use this plugin, really good, and solve a lot of HTML problems). Of course, I have nothing to say and iscroll comparable, just a simple corner, the main purpose is to this small knowledge of the summary and sharing.
It has been said before, mobile devices on the CSS3 and HTML5 support is quite good, and the use of CSS3 we can easily achieve the sliding effect, not only do not worry about performance problems, and the effect is impeccable. So what exactly is the effect that needs to be made?
Effect? Hey, of course, is similar to Taobao.
(Here is the effect of using chrome to simulate iphone5, about how to simulate what is said here, no longer repeat.) ）
When you drag down the page, the Red arrow points to the gray area, with the downward drag of the rhythm, the orange circle is constantly filled, and then pause for a few seconds page refresh (if not too clear to try it yourself). The amount, but the picture upstairs seems not very suitable for analysis. The following is an extremely rough page to do the whole idea analysis.
The layout is very important!
Throughout the process, the layout is to determine the coding difficulty and the number of JS code is an important factor, the scientific layout can bring a general sense of flying (of course, different effects of the layout of the difference is also normal).
Figure 1 shows the layout structure of the entire page that needs to be slid. The entire layout uses a div (blue box section) that contains the hint portion of the data to load (the "Tip") (The Red box portion) and the part of the content that needs to be refreshed (the "Content section") (text section) two div structures. If the outer div moves downward, then the tips and contents of the inside are naturally moving down (is this much simpler than using JS to control two elements up and down)? ）。
Figure 2 shows the normal content page (after the slide is completed, is also the effect of sliding before), the layout is mainly to use the CSS3 Transform property control hint part of the hidden and display. When the Translatey is negative, the entire Div moves upward (the effect of Figure 2), at 0 o'clock, and the entire hint section is fully displayed (the effect of Figure 1).
Don't look at the above description if you don't understand it (trying to break the limit of self-expression). Directly on the code:
<meta name= "viewport" content= "Width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, User-scalable=no ">
<title>test</title>
<body style= "Background-color:beige;" >
<div id= "Container" style= "Width:100%;border:solid 1px blue; Transform:translate (0px,-61px) ">
<div style= "height:50px; line-height:50px; Text-align:center; width:100%; Border:solid 1px red; " >
Hard to load ...
</div>
<div style= "width:100%; Line-height:30px;background-color: #F2F2F2; font-size:17px; font-family: ' Adobe Garamond Pro ' >
JavaScript is a literal translation script language, a dynamic type, a weak type, a prototype based language, and a built-in support type. Its interpreter, known as the JavaScript engine, is widely used as a scripting language for clients, and is used in HTML (an application under standard Universal Markup Language) to add dynamic functionality to HTML Web pages.
In 1995, Brendan Eich, of Netscape, was first designed and implemented in the Netscape Navigator browser. Because Netscape works with Sun, Netscape Management wants it to look like Java, so it is named JavaScript. But in fact its grammatical style is closer to self and scheme. [1]
To gain technical advantage, Microsoft launched the Jscript,cenvi launch Scriptease, and JavaScript can also run on the browser. For uniform specifications, JavaScript is also known as ECMAScript because it is compatible with the ECMA standard.
JavaScript is a network of scripting language, has been widely used in Web application development, often used for Web pages to add a variety of dynamic features, to provide users with smoother and more beautiful browsing effect. JavaScript scripts are usually embedded in HTML to implement their own functions. [3]
is an interpretative scripting language (code is not precompiled). [4]
It is primarily used to add interactivity to HTML (one application under standard Universal Markup Language) pages. [4]
Can embed HTML page directly, but write a separate JS file is advantageous to the separation of structure and behavior. [4]
Cross-platform features, supported by the vast majority of browsers, can be run on a variety of platforms (such as Windows, Linux, Mac, Android, iOS, etc.).
The JavaScript scripting language, like other languages, has its own basic data types, expressions, and arithmetic operators and basic procedural frameworks for programs. JavaScript provides four basic data types and two special data types for processing data and text. While variables provide a place for storing information, expressions can be used to perform more complex processing. [5]
</div>
</div>
</body>
<!--jquery is so easy to use, in this case how can not it! -->
<script type= "Text/javascript" src= "Http://libs.baidu.com/jquery/1.11.1/jquery.min.js" ></script>
HTML-related code
The layout is basically such a structure, then ~
What should javascript do?
1, according to the slide track dynamic adjustment slider position (transfrom=>translate);
2, according to the distance of the sliding to determine whether to perform a refresh (or data loading).
Of course, if you reload the page data with Ajax after the slide is over, it will also involve the effect of sliding the page toward and hiding the hint part.
General idea:
(Prerequisite: The current element has slipped to the top)
1, when the left mouse button press (mobile device on the Touchstart event), record the current mouse position of the y-axis coordinates;
2, when the mouse movement (Touchmove event), record the mouse's y-axis coordinates to judge the slide trajectory and the corresponding slider movement;
3, when the left mouse button loosened (Touchend event), by comparing the mouse start and end of the Y coordinate distance to determine whether the page should be refreshed (or reload data).
Bright code, show painting Wind:
Copy Code
/*
*obj--Sliding Object
*offset--Sliding Distance (callback is called when the sliding distance is greater than or equal to offset)
*callback--the callback function after slide completion
*/
var slide = function (obj, offset, callback) {
var start,
End
Islock = false,//Whether the entire operation is locked
Iscando = false,//Whether to move the slider
Istouchpad = (/hp-tablet/gi). Test (Navigator.appversion),
Hastouch = ' ontouchstart ' in Window &&!istouchpad;
To convert an object to a jquery object
obj = $ (obj);
var objparent = obj.parent ();
/* Operation Method * *
var fn =
{
Move container
Translate:function (diff) {
Obj.css ({
"-webkit-transform": "Translate (0," + diff + "px"),
"Transform": "Translate (0," + diff + "px")
});
},
Set effect time
Settranslition:function (Time) {
Obj.css ({
"-webkit-transition": "All" + Time + "s",
"Transition": "All" + Time + "s"
});
},
Return to initial position
Back:function () {
Fn.translate (0-offset);
Identity Operation complete
Islock = false;
}
};
Slide start
Obj.bind ("Touchstart", function (e) {
if (objparent.scrolltop () <= 0 &&!islock) {
var even = typeof event = = "undefined"? E:event;
Identify operation in progress
Islock = true;
Iscando = true;
Saves the current mouse y-coordinate
Start = Hastouch? Even.touches[0].pagey:even.pagey;
Erase Slider Animation time
Fn.settranslition (0);
}
});
Sliding in
Obj.bind ("Touchmove", function (e) {
if (objparent.scrolltop () <= 0 && Iscando) {
var even = typeof event = = "undefined"? E:event;
Saves the current mouse y-coordinate
End = Hastouch? Even.touches[0].pagey:even.pagey;
if (Start < end) {
Even.preventdefault ();
Erase Slider Animation time
Fn.settranslition (0);
Move Slider
Fn.translate (End-start-offset);
}
}
});
Slide End
Obj.bind ("Touchend", function (e) {
if (Iscando) {
Iscando = false;
Determines whether the sliding distance is greater than or equal to the specified value
if (End-start >= offset) {
Set Slider Bounce Time
Fn.settranslition (1);
Keep Tip Section
Fn.translate (0);
Executing a callback function
if (typeof callback = = "function") {
Callback.call (FN, E);
}
} else {
Returns the initial state
Fn.back ();
}
}
});
}
Copy Code
Code Analysis:
1, Parameters: obj, to slide the object, offset, the hint part of the transform value (in the code is transform:translate (0px,-61px), then here is the); callback, callback function, The function that is called after the drop is completed (page refresh or data loading).
2, why is transform not margin?
Because transform does not cause redrawing, it is smoother and better than margin. But Transfrom has a more fun place, if the Translatey value is negative (the current element moves xx pixel) below the element does not move up (margin will move up), at this point it and margin are different. Note that the presence of-webkit-transform is necessary because some browsers do not recognize transform, such as micro-mail built-in browsing (on my phone). In order to be compatible, it is worthwhile to deduct a few more letters.
3, about transition set to 0s.
Why set the transition value to 0 seconds when Touchstart? The role of transition is to add a transition effect to the change of element attributes, such as a box larger, we set to transition 1s, then the box is in 1s to the specified size. The first parameter represents the name of the CSS property that sets the transition effect (for example, Margin,transform;all represents all), and the second parameter represents the time of the transition. The purpose of setting transition in code is to add a transition effect to the slider rebound after the slide is over (the finger leaves the screen), so that it does not look so abrupt. Of course, this transition effect is also applied to the hidden part of the hint after the data loading is complete. Set to 0 to remove the slide transition in the sliding process, when our fingers slide down, the slider will move downward with this, which has the effect of sliding slider. If this time does not cancel the transition will appear the slippery block jitter the effect (hehe, has the interest to try this feeling. ）。 The whole process of transition is quite important.
4, about Islock and Iscando.
The function of these two variables is to prevent the two slide, the second slide is not allowed before the data load is completed after the first slide. When the slide starts, the Islock and Iscando are set to True to allow the code in the following two events to work correctly, Iscando set to False when the slide is finished indicates that all event code is not available (not performing the related actions, such as drop-down data loading) until Islock is set to True (before the entire operation completes).
5, how to use?
This comparison is simple, but also more important.
$ (function () {
Slide ("#container", the function (e) {
var that = this;
settimeout (function () {
That.back.call ();
}, 2000);
});
});
The settimeout in the code is used to simulate the effect of Ajax loading data, and the part of loading the data is not written separately. JavaScript's callback function is one of the most handy features. Here you need to call a back method after the data is loaded, and this method is to reset the various states in the slide. About the way the transmission to the feeling a bit like doing underground work, not too easy to be found, can not think of a better solution for the time being.
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
