学习随笔 |
您所在的位置：网站首页 › 随笔官网 › 学习随笔 |
学习随笔
|
这是一篇差点把自己搞死的随笔 苹果官网的样式：https://www.apple.com/cn/macos/catalina-preview/ 参考的代码：http://sc.chinaz.com/jiaoben/150729439860.htm 虽然找到了类似的代码，但是看了后发现很多值都不知道他是怎么算的，resize的时候也会有问题。 于是自己重新计算修改了，下面详细说一下。 1.目录结构 2.index.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) { //IE return "IE"; } else if(u.indexOf('Presto') > -1) { //opera return "Opera"; } else if(u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1) { //firefox return "Firefox"; } else if(u.indexOf('AppleWebKit' && u.indexOf('Safari') > -1) > -1) { //苹果、谷歌内核 if(u.indexOf('Chrome') > -1) { //chrome return "Chrome"; } else if(u.indexOf('OPR')) { //webkit Opera return "Opera_webkit" } else { //Safari return "Safari"; } } else if(u.indexOf('Mobile') > -1) { //移动端 if(!!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) { //ios if(u.indexOf('iPhone') > -1) { //iphone return "iPhone" } else if(u.indexOf('iPod') > -1) { //ipod return "iPod" } else if(u.indexOf('iPad') > -1) { //ipad return "iPad" } } else if(u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) { //android num = 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 phone return "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= num var 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 }) } } } });这就是全部了，如果有什么不对或者大家有什么不同的实现方法，欢迎一起讨论。 |
最后透明度变化，当然也可以加其他的【本文地址】