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

随机推荐

AngularJs-变量
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
个人签发https证书
环境: jdk1.8 window7 cmder 1.生成证书库jks keytool.exe -genkeypair -alias www.bingco.com -keyalg RSA ^ -key ...
携程apollo分布式配置中心
原理 : apollo的部署 jdk 要求8以上 mysql 5.7以上执行build.sh 这样就把configService,adminService 打包到对应的target下面把这个放到l ...
IT行业常见职位英文缩写
1.PG Programer 程序员 2.AA ...
isset和empty以及is_null区别
2.empty,isset首先都会检查变量是否存在,然后对变量值进行检测.而is_null 和 “参数本身”只是直接检查变量值,是否为null,因此如果变量未定义就会出现错误! 3.isset():仅 ...
vue 项目安装
安装stylus npm install stylus stylus-loader --save-dev
JavaWeb-SpringSecurity记住我功能
系列博文项目已上传至guthub 传送门 JavaWeb-SpringSecurity初认识传送门 JavaWeb-SpringSecurity在数据库中查询登陆用户传送门 JavaWeb-Sp ...
[题解] [AtCoder2134] Zigzag MST
题面题解考虑kruscal的过程对于三个点\(x, y, x + 1\), 我们可以将\((x, y, z), (y, x + 1, z + 1)\)看做\((x, y, z), (x, x + ...
Spring boot 读取resource目录下的文件
背景:最近做项目重构将以前的ssh + angular js架构,重构为spring boot + vue.项目是一个数据管理平台,后台涉及到多表关联查询,数据导入导出等. 问题:读取resource ...
Java官方操纵byte数组的方式
java官方提供了一种操作字节数组的方法——内存流(字节数组流)ByteArrayInputStream.ByteArrayOutputStream ByteArrayOutputStream——by ...

js 视差滚动 记录备份

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

随机推荐

热门专题

js 视差滚动记录备份

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