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出现在可视区并且并且处理快照时被 ...

随机推荐

@Mapper和@Repository
参考地址 https://www.cnblogs.com/jtfr/p/10962205.html 相同点两者都是作用于dao上不同点 @Repository需要在Spring中配置扫描地址,然后 ...
.NET平台的发展
.NET平台的发展.NET从1.0到.NET Core3.0:C#从1.0到8.0: ASP.NET从1.0到Core3.0: ASP.NET MVC1.0到ASP.NET MVC6.0,
【算法学习笔记】RMQ问题与ST表
\(0.\) RMQ问题 P1816 人话翻译给定一个长度为\(n\)的数列\(a\),然后有\(m\)组询问,每次询问一个区间\([l,r]\)的最小值. 其中\(m,n\leq10^5\) \( ...
asp.net操纵Oracle存储过程
在bloginfo数据库中,利用用户名 system 密码 scy251147 选择超级管理员登陆创建如下存储过程: 1 /*存储过程*/ 2 create or replace procedu ...
Java 实现两个数据库数据的迁移
原料:mysql,sqlite3 思想步骤: 首先从一个数据库取出数据,每取一条就添加到另一个数据库. 示例: import java.sql.*; public class SQLite_To_My ...
linux运维、架构之路-K8s数据管理
一.Volume介绍容器和Pod是短暂的,它们的生命周期可能很短,会被频繁的销毁和创建,存在容器中的数据会被清除,为了持久化保存容器的数据,k8s提供了Volume.Volume的生命周期独立于容器 ...
yii项目连接多个数据库时, MySQL报错No such file or directory
服务器错误 yii\db\Exception SQLSTATE[HY000] [2002] No such file or directory ###'xxx是项目根目录' #0 xxx/vendor ...
【Java Web】简易商品信息管理系统——首个Web项目
正文之前在学习了一段时间的Java Web的内容之后,当然需要有个项目来练练手,我相信大多数人的首选项目都是信息管理系统吧,所以我选择了商品信息管理系统目前项目源码已全部上传至GitHub,欢迎大 ...
[Python]Python3调用java代码
环境:Ubuntu16.04 桌面版 Ubuntu安装java的详细教程:https://www.cnblogs.com/ttkl/p/11933884.html 安装JPype1 pip3 inst ...
ES大批量写入提高性能的策略
1.用bulk批量写入你如果要往es里面灌入数据的话,那么根据你的业务场景来,如果你的业务场景可以支持让你将一批数据聚合起来,一次性写入es,那么就尽量采用bulk的方式,每次批量写个几百条这样子. ...

js 视差滚动 记录备份

js 视差滚动 记录备份的更多相关文章

随机推荐

热门专题

js 视差滚动记录备份

js 视差滚动记录备份的更多相关文章