js 视差滚动 记录备份
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>社区</title>
<meta http-equiv="X-UA-Compatible" content="edge,chrome=1" />
<meta http-equiv="Cache-Control" content="no-siteapp" /> <!-- 避免转码 -->
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" />
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta name="apple-itunes-app" content="app-id=932758491"> <!-- <meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">--> <meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="address=no">
<meta name="format-detection" content="email=no" >
<meta name="apple-mobile-web-app-title" content="">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="screen-orientation" content="portrait"> <!-- uc强制竖屏 设置横屏应用得在config里面设置，网页是无法做到的 -->
<meta name="x5-orientation" content="portrait"> <!-- QQ强制竖屏 -->
<meta name="msapplication-tap-highlight" content="no"> <!-- windows phone 点击无高光 -->
<meta name="HandheldFriendly" content="true"> <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="wap-font-scale" content="no" /> </head> <style>
*{ margin: 0; padding: 0;}
ul,li{ list-style: none;} /*scene*/
.scenewp { position: relative; overflow: hidden; zoom: 1; }
.scnitem { position: relative; width: 1200px; height: 990px; margin: 0 auto;; }
.scnitem .img_scn { position: absolute; top: 0; left: 50%; width: 1920px; margin-left: -960px; overflow: hidden; }
.scnitem .img_scn img { display: block; width: 100%; -webkit-transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1); -webkit-transition:-webkit-transform 1s cubic-bezier(0.23, 1, 0.32, 1); transition:-webkit-transform 1s cubic-bezier(0.23, 1, 0.32, 1); transition:transform 1s cubic-bezier(0.23, 1, 0.32, 1); transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 1s cubic-bezier(0.23, 1, 0.32, 1); } </style>
<body > <div class="scenewp">
<div class="scnitem scnitem_1">
<div class="img_scn">
<img src="http://img.vip.kanimg.com/n_vip_7/images-y16/scene/scn_01.jpg" data-original="http://img.vip.kanimg.com/n_vip_7/images-y16/scene/scn_01.jpg" alt="场景一" style="display: block; transform: translateY(-8.24545%);">
</div> </div> <div class="scnitem scnitem_2">
<div class="img_scn">
<img src="http://img.vip.kanimg.com/n_vip_7/images-y16/scene/scn_02.jpg?version=20161110" data-original="http://img.vip.kanimg.com/n_vip_7/images-y16/scene/scn_02.jpg?version=20161110" alt="场景二" style="transform: translateY(-1.98922%); display: block;">
</div> </div> <div class="scnitem scnitem_3">
<div class="img_scn">
<img src="http://img.vip.kanimg.com/n_vip_7/images-y16/scene/scn_03.jpg" alt="场景三">
</div> </div> <div class="scnitem scnitem_0">
<div class="img_scn">
<img src="http://img.vip.kanimg.com/n_vip_7/images-y16/scene/scn_00.jpg" alt="直播">
</div> </div> </div> <script src="http://m.lrlz.com/h5/fcj/js/jquery-2-0-3.js"></script>
<script>
// parallax 视差滚动
function Parallax(opt) {
this.$ele = $(opt.ele);
this.target = opt.target;
this.distance = opt.distance || 9; //可滚动距离百分比 9代码9%
} Parallax.prototype.scroll = function() {
var that = this; var _scrolltop = $(document).scrollTop(); for(var i = 0, len = that.$ele.length; i < len; i += 1) {
var $cur = $(that.$ele[i]),
_winheight = $(window).height(),
_pagetop = $cur.offset().top,
_diff = _winheight - (_pagetop - _scrolltop),
_pageheight = $cur.height(); if(_diff >= 0 && _diff < _pageheight) {
var val = _diff / _pageheight * this.distance;
$cur.find(that.target).css({
'-webkit-transform': 'translateY(' + -val + '%)',
'transform': 'translateY(' + -val + '%)'
});
}
} }; var parallax = new Parallax({
ele: '.scnitem',
target: '.img_scn img',
distance: 9
}); $(window).scroll(function() {
parallax.scroll();
}); //翻页滚动
function Slider(opt) {
this.$ele = $(opt.ele);
this.liminal = opt.liminal || 160; //阈值
this.time = opt.time || 100;
this.isScroll = false;
this.exScrolltop = 0;
}
Slider.prototype.scroll = function() {
var that = this; var _scrolltop = $(document).scrollTop(),
_pagetop = $(that.$ele[0]).offset().top,
_pageheight = $(that.$ele[0]).height(),
_winheight = $(window).height(),
_diff = _winheight - (_pagetop - _scrolltop); var index = Math.floor(_diff / _pageheight),
diff = _diff % _pageheight,
forward = false,
liminal = that.liminal; if(_scrolltop > that.exScrolltop) {
forward = true;
that.exScrolltop = _scrolltop;
}
else {
forward = false;
that.exScrolltop = _scrolltop;
} if(index == 0) {
liminal = _pageheight / 2;
}
else {
liminal = that.liminal;
}
if(index >= 0 && index < that.$ele.length && !that.isScroll && forward && diff > liminal && diff < _pageheight / 4 * 3) {
that.isScroll = true;
$('html,body').animate(
{scrollTop: $(that.$ele[index]).offset().top + 'px'},
{
duration: that.time,
complete: function() { that.isScroll = false; }
}
); }
} // var slider = new Slider({
// ele: '.scnitem',
// liminal: 160,
// time: 800 // }) </script> </body>
</html>
js 视差滚动 记录备份的更多相关文章
- stellar.js 视差滚动
1.引入包 <script src="js/jquery.min.js"></script> <script src="js/jquery. ...
- Sequence.js 实现带有视差滚动特效的图片滑块
Sequence.js 功能齐全,除了能实现之前分享过的现代的图片滑动效果,还可以融合当前非常流行的视差滚动(Parallax Scrolling)效果.让多层背景以不同的速度移动,形成立体的运动效果 ...
- 分享七款视差滚动效果的jQuery 插件
视差(Parallax)是指从不同的点看一个物体时形成的视觉差异,这个名词是源自希腊文的παράλλαξις (parallaxis),意思是”改变”.在网页设计中,视差滚动(Parallax Scr ...
- 16个最棒的jQuery视差滚动效果教程
今天我们整理了16个最棒的jQuery视差滚动效果教程 , 并附有演示地址,你可以快速的查看教程的效果,或者应用在自己的项目中.希望本文对想要学习或者使用jQuery视差效果的朋友有帮助,慢慢的欣赏吧 ...
- 视差滚动（Parallax Scrolling）效果的原理与实现
视差滚动(Parallax Scrolling)效果的原理与实现1.视差滚动效果的主要特点: 1)直观的设计,快速的响应速度,更合适运用于单页面 2)差异滚动 分层视差 页面上很多的 ...
- 【转】视差滚动(Parallax Scrolling)效果的原理和实现
原文:http://www.cnblogs.com/JoannaQ/archive/2013/02/08/2909111.html 视差滚动(Parallax Scrolling)是指让多层背景以不同 ...
- iOS开发之视差滚动视图
首先声明一点,由于自己iOS开发经验有限,这里给下面将要实现的效果起名叫视差滚动视图,自己也不知道是否严谨,等以后有经验了,再来更新吧. 一.需求 有的时候我们可能会有这样一种需求,在一个UITabl ...
- css实现视差滚动效果
今天逛京东金融的时候发现他家网站首页的滚动效果看着很有意思,于是就做了一个,demo链接http://1.liwenyang.applinzi.com/index.html 大多数的视差滚动效果都是使 ...
- 视差滚动(Parallax Scrolling)插件补充
13. Windows Windows (github) 是一个让你用占据整个屏幕的section来构建单面网站的插件.该插件提供给你一些回调函数,当新的section出现在可视区并且并且处理快照时被 ...
随机推荐
- sql关联查询更新速度慢的问题
原语句 update B b set b.fid = (select f.id from F f where f.bid = b.id) ; 可以考虑用 begin for f in (select ...
- Android及java中list循环添加时覆盖的问题-20171021
鉴于新浪博客太渣,转到这来. 最近在工程设计时,使用list循环添加map对象发现,最终全部变为最后一个map的值,但是list的数值还是正确的,也就是说添加了N(list长度或者说循环的次数)个相同 ...
- React组件：拖拽布局Dragact v0.1.6 发布
仓库地址:Dragact爽滑的拖拽组件 大家好,新年已经过去,大家又投入了繁忙的工作当中,由于我在国外,因此压根儿没有休息... 少说废话,上周一周的时间里,我陆陆续续的为Dragact组件进行了一系 ...
- hive日期函数-广发实战（三）
近一月客户新增常规里程数与额度比即上个月 第一天(包含)到上个月最后一天(包含) 字段是batch_date==>格式是 yyyymmdd ),'MM'),'-',''); +--------- ...
- union不支持orderByClause、clusterByClause、distributeByClause、sortByClause或limitClause
union all union 相同点 是 相当于上下拼接 上下两个拼接表必须字段保持一致 不同 union有去重效果,速度会更慢. ================================= ...
- SpringMVC之RequestContextHolder分析(转)
链接:https://blog.csdn.net/zzy7075/article/details/53559902
- 题解 【NOIP2011】计算系数
[NOIP2011]计算系数 Description 给定一个多项式 (ax+by)^k ,请求出多项式展开后 x^n * y^m 项的系数. Input 共一行,包含 5 个整数,分别为 a,b,k ...
- hdu 5831 Rikka with Parenthesis II 括号匹配+交换
Rikka with Parenthesis II Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Jav ...
- Zjoi2011看电影（movie）
第一步,打表找规律,发现自己的表连3的小样例都过不去,还不如自己手模,自己手跑了5以下的样例,然后发现毫无规律可言…… 第二步,想出一种错误做法,首先n>k必零,人比座都多……然后粘一下图: 基 ...
- 实验三《敏捷开发与XP实践》_实验报告
实验三<敏捷开发与XP实践>_实验报告 一.实验内容和步骤 提交点1: 任务要求: 实验三 敏捷开发与XP实践 http://www.cnblogs.com/rocedu/p/479577 ...