今天给大家分享一款页面视差滚动切换jquery.localscroll插件。 滚动鼠标液动条看下页面的切换效果。该插件适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗。效果图如下:
实现的代码。
html代码:
- <div class="pageWidth" id="box_root">
- <!-- 头部导航开始 -->
- <div id="nav">
- <a href="index.html" title="返回引导页" class="logo_a">站长素材</a>
- <ul id="menu">
- <li class="" id="mn_home"><a href="index.html#home">网站首页</a> </li>
- <li id="mn_about" class="selected"><a href="index.html#about">站长素材</a> </li>
- <li id="mn_news"><a href="index.html#news">新闻资讯</a> </li>
- <li id="mn_products" class=""><a href="index.html#products">核心项目</a> </li>
- <li id="mn_chanye" class=""><a href="index.html#sector">产业板块</a> </li>
- <li id="mn_about" class=""><a href="index.html#famous">名家寄语</a> </li>
- <li class="last" id="mn_contact"><a href="index.html#contact">联系我们</a> </li>
- </ul>
- </div>
- <div class="top_rim">
- <a href="index.html#home">回到顶部</a>
- </div>
- <!-- 头部导航结束 -->
- <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>
- <div id="about" style="background-position: 50% -110px;">
- <div class="contents">
- <div class="about_rim">
- <div class="columnSpace" id="elem-FrontSpecifies_show01-1367889271850" name="说明页">
- <!-- 装饰器样式开始 -->
- <div class="border_05">
- <div class="border_05-topr">
- <div class="border_05-topl">
- </div>
- </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">更多详情 +</a></span></em></div>
- <div class="describe htmledit">
- <div class="about_txt">
- </div>
- </div>
- </div>
- <div class="clearBoth">
- </div>
- </div>
- </div>
- </div>
- <!-- 装饰器样式结束 -->
- </div>
- </div>
- </div>
- <div class="sprite" style="background-position: 50% 0px;">
- </div>
- <div class="screen" style="background-position: 50% 550px;">
- </div>
- </div>
- <div id="about_cont" style="background-position: 50% 0px;">
- <div class="contents">
- <div class="about_rim">
- <p>
- 关于我们</p>
- </div>
- </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>
- <div id="news" style="background-position: 50% -110px;">
- <div class="contents">
- <div id="box_news">
- <p>
- 新闻资讯</p>
- </div>
- </div>
- </div>
- <div id="products" style="background-position: 50% -110px;">
- <div class="pro_list">
- <p>
- 核心项目</p>
- </div>
- <div class="sprite" style="background-position: 50% 0px;">
- </div>
- <div class="screen" style="background-position: 50% 220px;">
- </div>
- </div>
- <div id="sector" style="background-position: 50% -110px;">
- <div class="contents">
- <div class="sector_img">
- <p>
- 产业模块</p>
- </div>
- </div>
- <div class="screen" style="background-position: 50% 550px;">
- </div>
- <div class="sprite" style="background-position: 50% 0px;">
- </div>
- </div>
- <div id="famous" style="background-position: 50% -90px;">
- <div class="contents">
- <div class="famous_rim">
- <p>
- 名家寄语</p>
- </div>
- </div>
- <div class="sprite" style="background-position: 50% 450px;">
- </div>
- </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>
- </div>
- </div>
- <div class="sprite" style="background-position: 50% 0px;">
- </div>
- <div class="screen">
- </div>
- </div>
- </div>
- </div>
jQuery教程(29)-jQuery插件开发之为插件方法指定参数
jQuery教程(28)-jQuery插件开发之使用插件
jQuery教程(27)-jQueryajax操作之修改默认选项
jQuery教程(26)-ajax操作之使用JSONP加载远程数据
相关推荐
页面视差滚动切换jquery.localscroll插件是一款让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验。
页面视差滚动切换jquery.localscroll插件源码.zip 页面视差滚动切换jquery.localscroll插件源码.zip 页面视差滚动切换jquery.localscroll插件源码.zip
实用jQuery单页视差滚动插件jquery.localscroll,当前非常流行单页面视差滚动特效,一个页面 完成整个网站的产品介绍、案例欣赏,非常不错的JS特效代码,适合简单的企业网站的建设,不 需要很复杂的功能。
jquery实现创意不错的上下页面视差滚动切换效果.zip
jQuery视差插件ImageScroll是一款基于jQuery CSS3实现的全屏视差滚动效果。
全屏图片视差滚动切换代码.zip
jquery.parallax-scroll, 在垂直页面滚动上,平滑视差效果 jquery.parallax-scroll使用requestAnimationFrame和 CSS3 3D 转换在垂直页面滚动上平滑视差动画。浏览器支持Chrome 30 ,Firefox 34 ,Safari 7.1 ,I
有兴趣刚需的可以自己下载,非常实用的代码,可以完美运行,有能力的还可以二次修改!
jquery上下页面视差滚动切换效果,供大家一起共同分享学习。
插件描述:jQuery全屏视差滚动效果. 参考示例:http://www.jq22.com/jquery-info5465
视差滚动parallax插件.zip
jQuery-图片视差轮播切换代码
jQuery图片视差轮播切换代码是一款基于swiper.js制作带标签的图片视差滚动特效。
教育培训学校静态网站模板,大气风格设计,滚动页面带有视差滚动效果。.zip教育培训学校静态网站模板,大气风格设计,滚动页面带有视差滚动效果。.zip
jQuery+swiper.js幻灯片图片视差滚动轮播特效,非常棒的一款带标签的jQuery图片视差切换代码。