Share a page parallax scroll switch jquery. localscroll plug-in, jqueryscroll
Today, we will share with you a jquery. localscroll plug-in for page parallax scrolling. Scroll the mouse animation bar to see the switch Effect on the next page. This plug-in is applicable to browsers such as IE8, 360, FireFox, Chrome, Safari, Opera, aoyou, sogou, and windows of the world. As follows:
Download Online Preview source code
Implementation code.
Html code:
<Div class = "pageWidth" id = "box_root"> <! -- Start the header navigation --> <div id = "nav"> <a href = "index.html" title = "back to boot page" class = "logo_a"> webmaster Material </a> <ul id = "menu"> <li class = "" id = "mn_home"> <a href = "index.html # home"> homepage </a> </li> <li id = "mn_about" class = "selected"> <a href = "index.html # about"> webmaster materials </a> </li> <li id = "mn_news"> <a href = "index.html # news"> news </a> </li> <li id = "mn_products" class = ""> <a href = "index.html # products "> core project </a> </li> <li id =" mn_chanye "cl Ass = ""> <a href = "index.html # sector"> industry </a> </li> <li id = "mn_about" class = ""> <a href = "index.html # famous"> sent by famous writers </a> </li> <li class = "last" id = "mn_contact"> <a href = "index.html # contact"> contact Us </a> </li> </ul> </div> <div class = "top_rim"> <a href = "index.html # home"> back to the top </ a> </div> <! -- End of the header navigation --> <div id = "box_main"> <div id = "home" style = "background-position: 50%-110px; "> <div class =" sprite1 "style =" background-position: 50% 550px; "> </div> <div class =" sprite "style =" background-position: 50% 0px; "> </div> <div class =" screen "> </div> <div id =" about "style =" background-position: 50%-110px; "> <div class =" contents "> <div class =" about_rim "> <div class =" columnSpace "id =" elem-F RontSpecifies_show01-1367889271850 "name =" description page "> <! -- Decorator style --> <div class = "border_05"> <div class = "border_05-topr"> <div class = "border_05-topl"> </div> <div class = "border_05-mid"> <div class = "borderContent"> <div id = "FrontSpecifies_show01-1367889271850" class = "FrontSpecifies_show01-d3_c1"> <div class = "comptitle_05"> <em> <span class = "extendLink"> <a href = "index.html # about_cont" target = "_ self"> More details + </a> </span> </em> </div> <div class = "describ E htmledit "> <div class =" about_txt "> </div> <div class =" clearBoth "> </div> </div> <! -- Decorator style ends --> </div> <div class = "sprite" style = "background-position: 50% 0px; "> </div> <div class =" screen "style =" background-position: 50% 550px; "> </div> <div id =" about_cont "style =" background-position: 50% 0px; "> <div class =" contents "> <div class =" about_rim "> <p> about us </p> </div> <div class =" sprite "style =" background-position: 50% 0px; "> </div> <div class =" screen "style =" background-position: 50% 550px; "> </div> <div class =" screen1 "style =" background-position: 50% 110px; "> </div> <div id =" news "style =" background-position: 50%-110px; "> <div class =" contents "> <div id =" box_news "> <p> News </p> </div> <div id = "products" style = "background-position: 50%-110px; "> <div class =" pro_list "> <p> core project </p> </div> <div class =" sprite "style =" background-position: 50% 0px; "> </div> <div class =" screen "style =" background-position: 50% 220px; "> </div> <div id =" sector "style =" background-position: 50%-110px; "> <div class =" contents "> <div class =" sector_img "> <p> industry module </p> </div> <div class =" screen "style =" background-position: 50% 550px; "> </div> <div class =" sprite "style =" background-position: 50% 0px; "> </div> <div id =" famous "style =" background-position: 50%-90px; "> <div class =" contents "> <div class =" famous_rim "> <p> famous post </p> </div> <div class =" sprite "style =" background-position: 50% pixel PX; "> </div> <div id =" contact "> <div class =" contents "> <div id =" box_contact "> <div class =" columnSpace "id =" elem-FrontSpecifies_show01-1368432548167 "name =" "> <div id =" FrontSpecifies_show01-1368432548167 "class =" FrontSpecifies_show01-d3_c1 "> <div class =" describe htmledit "> </div> </div> <div class = "sprite" style = "background-position: 50% 0px; "> </div> <div class =" screen "> </div>
Other highlights
JQuery tutorial (29)-jQuery plug-in development-Specify parameters for plug-in Methods jQuery tutorial (28)-jQuery plug-in development-jQuery tutorial (27) -jQueryajax-Modify default options jQuery tutorial (26)-ajax-use JSONP to load Remote Data jQuery tutorial (25)-security restrictions on ajax operations