学习随笔——2.仿苹果官网效果，滚动缩放图片

这是一篇差点把自己搞死的随笔
苹果官网的样式：https://www.apple.com/cn/macos/catalina-preview/
参考的代码：http://sc.chinaz.com/jiaoben/150729439860.htm

虽然找到了类似的代码，但是看了后发现很多值都不知道他是怎么算的，resize的时候也会有问题。
于是自己重新计算修改了，下面详细说一下。

1.目录结构

2.index.html

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="user-scalable=0"><title>图片缩放示例</title><link rel="stylesheet" href="css/reset.css" /><link rel="stylesheet" href="css/common.css" /><script type="text/javascript" src="js/jquery-1.7.2.min.js"></script><script type="text/javascript" src="js/common.js"></script></head><body><div class="banner"><div class="box"><div class="undertitle">滚动鼠标，图片缩放示例</div><div class="bgbox"><div class="bigImg"><div class="smallimgBox"><div class="smallimg"></div></div></div></div></div><div class="bannertitle">滚动前的文字</div></div><div style="height: 300px;background: #333333;"></div></body></html>

common.css
注意：undertitle的高度需要加上在js中设置的scroll_length,以便滚动完成后仍暂较为合适的地方展示

body{overflow-x: hidden;
}
.banner{position: relative;height: 1880px;overflow: hidden;min-width: 750px;
}
.box{width: 100%;height: auto;position: absolute;
}
.undertitle{width: 100%;height: 650px;font-size:46px;font-weight: bold;text-align: center;padding-top: 450px;margin: 0 auto;box-sizing: border-box;}
.bgbox{width: 736px;height: 430px;margin:0 auto;background: url(../img/a1.jpg) no-repeat;background-size: contain;-moz-transition:-moz-transform .1s linear;-webkit-transition:-webkit-transform .2s linear;box-sizing: border-box;transform-origin: center center;position: relative;
}
.bigImg{width: 562px;height: 352px;margin:0 auto;background: url(../img/a2.jpg) no-repeat;background-size: cover;position: relative;top: 30px;
}
.smallimgBox{width: 100%;height: 100%;
}
.smallimg{width: 100%;height: 100%;background: url(../img/a3.jpg) no-repeat;background-size: cover;
}
.bannertitle{position: absolute;top:200px;left: 0;right: 0;margin: 0 auto;font-size:86px;font-weight: bold;text-align: center;color: #fff;-moz-transition:.1s linear;-webkit-transition:.2s linear;
}.footer{background: #333;height: 200px;
}

划重点，js
代码中内核判断，处理兼容其实并没怎么用到，但我感觉挺全面，就流下来了，以备以后使用。
首先先来说放大图片：
1）因为不想图片拉伸变形，所以对最大放大倍数（scale_big）进行了判断。
2）移动过程中的放大倍数（scale_num）的计算公式如下：

至此，放大的问题就解决了
接下来，问题就是移动了：
移动主要需要理清的就是放大元素的中心到底移动了多少
1）找到未滚动（图最大）时的中心位置

此时 var t_h_b = phone_min_h * scale_big / 2 - 30 * scale_big; 其中30为图和电脑框之间的最小间距（css中写的值）
2）找到滚动完成（图最小）时的中心位置

即 var t_h_s = $(".undertitle").innerHeight() + phone_min_h / 2; 因为此时图距离整个页面的顶部的距离是 $(".undertitle").innerHeight() 。

3）中心点移动的最大距离就是 var t_h = t_h_s - t_h_b;

4）移动过程中的中心点的移动距离（translate_num ）的计算公式如下：

最后透明度变化，当然也可以加其他的

啊，对然后处理一下屏幕resize

$(document).ready(function() {/* 安卓版本兼容 */var brower = {versions: function() {var u = window.navigator.userAgent;var num;if(u.indexOf('Trident') > -1) {//IEreturn "IE";} else if(u.indexOf('Presto') > -1) {//operareturn "Opera";} else if(u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1) {//firefoxreturn "Firefox";} else if(u.indexOf('AppleWebKit' && u.indexOf('Safari') > -1) > -1) {//苹果、谷歌内核if(u.indexOf('Chrome') > -1) {//chromereturn "Chrome";} else if(u.indexOf('OPR')) {//webkit Operareturn "Opera_webkit"} else {//Safarireturn "Safari";}} else if(u.indexOf('Mobile') > -1) {//移动端if(!!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {//iosif(u.indexOf('iPhone') > -1) {//iphonereturn "iPhone"} else if(u.indexOf('iPod') > -1) {//ipodreturn "iPod"} else if(u.indexOf('iPad') > -1) {//ipadreturn "iPad"}} else if(u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {//androidnum = u.substr(u.indexOf('Android') + 8, 3);return {"type": "Android","version": num};} else if(u.indexOf('BB10') > -1) {//黑莓bb10系统return "BB10";} else if(u.indexOf('IEMobile')) {//windows phonereturn "Windows Phone"}}}}var system = brower.versions();if(system != "IE") {var sc_t=0;bg(sc_t);$(window).resize(function() {sc_t = $(window).scrollTop();bg(sc_t);})} else {//ie样式}function bg(sc_t) {//图片最大宽高var window_h = $(window).height();var window_w = $(window).width();//图片最小宽高var img_min_h = 352;var img_min_w = 562;//壳最小宽高var phone_min_h = 430;var phone_min_w = 736;//壳最大宽高var phone_set_h = window_h / img_min_h * phone_min_h;var phone_set_w = window_w / img_min_w * phone_min_w;//最大缩放倍数var scale_big_x = phone_set_w / phone_min_w;var scale_big_y = phone_set_h / phone_min_h;var scale_big = scale_big_x >= scale_big_y ? scale_big_x : scale_big_y;//图最小时的中心点高var t_h_s = $(".undertitle").innerHeight() + phone_min_h / 2;//图最大时的中心点高var t_h_b = phone_min_h * scale_big / 2 - 30 * scale_big;//中心点位移var t_h = t_h_s - t_h_b;//停止放大缩小时滚动条的位置var scroll_length = 300;$(window).scroll(function() {var scroll_num = $(window).scrollTop();setPhoneSize(scroll_num);});setPhoneSize(sc_t);function setPhoneSize(num) {//缩放倍数var scroll_num = (1 - scale_big) * num / scroll_length + scale_big;//num中心点 num= numvar translate_num = (0 - t_h) / scroll_length * num + t_h;//透明度var op_num = 1 - (num / scroll_length);if(num >= scroll_length) {$(".bgbox").css({"-moz-transform": "translate(0,0) scale(1)","-webkit-transform": "translate(0,0) scale(1)"});$(".bannertitle").css({"opacity": "0","display": "none"});$(".smallimgBox").css({"opacity": "1"})} else {$(".bgbox").css({"-moz-transform": "translate(0,-" + translate_num + "px) scale(" + scroll_num + ")","-webkit-transform": "translate(0,-" + translate_num + "px) scale(" + scroll_num + ")"});$(".bannertitle").css({"opacity": op_num,"display": "block"});$(".smallimgBox").css({"opacity": 1 - op_num})}}}});

这就是全部了，如果有什么不对或者大家有什么不同的实现方法，欢迎一起讨论。

学习随笔——2.仿苹果官网效果，滚动缩放图片相关推荐

timeAxis.js--一个简单的时间轴JS框架--仿苹果官网
代码已经上传到Github,希望各位大佬指教. ReadMe还是以GitHub为准 GitHub地址:https://github.com/royalknight56/timeAxis.js 基本实现 ...
前端技巧之苹果官网效果分析
苹果是我的老师,在UI设计领域,一定要跟着apple去学习. 下面是从apple官网录制的一段gif, 我们就要分析一下这个效果是怎么做出来的. 看起来很像视频,实际上是视频+图片. 感觉苹果在欺骗我 ...
响应式布局（多媒体查询）仿苹果官网部分实例
html代码部分: <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
html仿苹果桌面导航js css,CSS简单实现弹出框、输入框等的背景幕布，模仿苹果官网导航块的半透明效果。...
需求提要我们如果想写一个效果类似弹出框的组件,首先简单分析一下弹出框的几个特性:弹出框肯定位于当前页面的最顶端,并且在弹出框关闭之前,其他控件都无法点击.focus等. 为了更好突出弹出框的效果,除 ...
利用JQ实现的，高仿彩虹岛官网导航栏（学习HTML过程中的小记录）
利用JQ实现的,高仿彩虹岛官网导航栏(学习HTML过程中的小记录) 作者:王可利(Star·星星) 总结: 今天学习的jQ类库的使用,代码重复的比较多需要完善.严格区分大小写,在 $(" ...
高仿阴阳师官网轮播图效果的jQuery插件
代码地址如下: http://www.demodashi.com/demo/12302.html 插件介绍这是一个根据阴阳师官网的轮播效果所扒下来的轮播插件,主要应用于定制个性化场景,目前源码完全公 ...
左右全屏banner焦点图代码特效+苹果官网首页左右全屏banner焦点图效果+包括JS图片CSS样式等
介绍源码名称:[左右全屏banner焦点图]代码特效+苹果官网首页左右全屏banner焦点图效果+包括JS图片CSS样式等源码大小:16.6KB 开发语言:PHP+Mysql 操作系统:Windo ...
前端学习之仿小米官网HTML+CSS
一个简单的仿小米官网 index.css /* 主页index.html样式表 */ .topbar-wrapper{width: 100%;background-color:#333;height: ...
HTML5期末大作业：网站——仿游戏官网(龙之谷)HTML+CSS+JavaScript
HTML5期末大作业:网站--仿游戏官网(龙之谷)HTML+CSS+JavaScript ~ 学生HTML个人网页作业作品下载 ~ web课程设计网页规划与设计 ~大学生个人网站作业模板 ~简单个人网 ...
仿小米官网源码，2021年9月最新版
部分源码: <div class="header"><div class="page-top"><div class=" ...

学习随笔——2.仿苹果官网效果，滚动缩放图片

学习随笔——2.仿苹果官网效果，滚动缩放图片相关推荐

最新文章

热门文章