How to make the website pages move up and down

Intermediary transaction http://www.aliyun.com/zixun/aggregation/6858.html ">seo diagnose Taobao guest cloud host technology Hall

Effect Demo: http://www.59seo.com.cn/dmys/wangyeyd.html

The recent use of Google site navigation features, found on its web page can be clicked "up" or "Move Down" to adjust the position to facilitate the user to read, I would like to put such a human function on my website, how should I do?

Free, can move up and down the page block production

We can use JavaScript to control the location of the div layer of the principle, to achieve the function of the mobile Web page. Add a div layer to the page, and arrange it up and down for each div layer, when the mouse clicks on a section of the "Move Up" or "Move Down" button, get the top value and height of the plate above or below the plate, the highest value will be obtained and the upper value of the plate exchange, And then through the height value of the need to change the height of the plate, the top value minus or plus the height difference, you can change the two plates.

The first step: the initialization of the Forum.

Create a new HTML page that creates a div layer between and, each layer as a block, and then enter the JavaScript code for the initialization section between:

var bgcolors= ' #b3d580, #99c9b1, #b4a1d8, #f7c480, #d5d588, #eea2bb '. Split (', ') Color codes for each section

var txtup= ' up ↑ ', txtdown= ' move ↓ ';

var 863.html ">panels=children (ele); Get All Forum Objects

for (Var i=0;i

var p=panels[i];

P.style.position= ' differs '; Set the section to be drag div

P.style.width= ' 100% ';

var b=document.createelement (' div '); Create a button layer "Move Up" or "Move Down" on the board

With (B.style) {//Set the properties of the button layer

Fontsize= ' 12px ';

lineheight= ' 20px ';

Backgroundcolor=bgcolors[i%bgcolors.length];

Textalign= ' right ';

}

B.innerhtml= ' +txtup+ ' +txtdown+ ';

B.firstchild.onclick=moveup; Activates the MoveUp function when the "Move Up" button layer is clicked

b.firstchild.style.cursor= ' pointer '; The mouse moves to the button layer to display the hand icon.

B.lastchild.onclick=movedown; Activates the MoveDown function when the "Move Down" button layer is clicked

b.lastchild.style.cursor= ' pointer ';

P.insertbefore (B,p.firstchild);

}

The second step is to replace the plate.

The initial completion of the plate, we can proceed between the exchange between the plate, this step is the key to replace the plate, in the exchange before we need to obtain the relevant plate height and top value, by calculating the relevant value, positioning the relevant plate after the location of the replacement.

function MoveUp (evt) {//control plate up-shift main functions

var p=evt?evt.target:event.srcelement; Get objects for mouse clicks (compatible with most browsers)

P=p.parentnode.parentnode; Looking for a parent object

Swap (p,panels[p.index-1]); The function of the swap function is to swap a section with the position above it.

}

function MoveDown (evt) {

var p=evt?evt.target:event.srcelement;

P=p.parentnode.parentnode;

Swap (p,panels[p.index+1]); The function of the swap function is to swap a section with the position below it.

}

Function Swap (P1,P2) {

var n=10; Control the number of moves between the plates, the larger the number, the better the exchange effect, but will occupy a certain computer resources

var intv=500; Control the moving time between the plates, the larger the number, the slower the movement speed, the unit is milliseconds

var arr1,arr2;

var t1=parseint (p1.style.top), T2=parseint (p2.style.top); Get the top value of the plate that needs to be swapped

var H1=p1.offsetheight+margin,h2=p2.offsetheight+margin; Get the height value of the plate

Arr1=makearr (t1,t1

Arr2=makearr (t2,t1

for (Var i=0;i

var j=i;

settimeout (function () {//The program is invoked once every interval

p1.style.top=arr1[j]+ "px"; The top value of each time is assigned to the top property of the block to achieve the moving effect.

p2.style.top=arr2[j]+ "px";

if (j==n-1) {

PANELS[P1.INDEX]=P2;

PANELS[P2.INDEX]=P1;

Check (P1.index,p2.index); The function of the check function is to change the display status of "Move Up" and "Move Down" buttons in the section, the top section will not display the "Move Up" button, the bottom section will not show "Move Down" button

}

}, (j+1) *intv/n);

})();

The function Makearr (f,x) {//Makearr functions compute the top value for each time segment and return the values as an array

var ret=[];

for (Var i=0;i

Ret[i]=math.round (f+i*x/(N-1));

return ret;

}

}

Summary

This can move up and down the page section, so that users can more easily view the information on the site, enhance the interactivity of the Web page; If we record the user's section configuration information to the cookie, the user reads the configuration information from the cookie next time it is accessed and displays the page layout by that information. You can also achieve the user-customized page of the effect.

Welcome to the station: http://www.59seo.com.cn