旋转相册与导航跟随双向绑定
头部js，转换rem
function IsPC() { var userAgentInfo = navigator.userAgent; var reg = new RegExp("(Android|iPhone|SymbianOS|Windows Phone|iPad|iPod)", "ig"); var isPC = !reg.test(userAgentInfo); return isPC } var initFontSize = function () { var n = document.getElementsByTagName("html")[0], e = document.documentElement.clientWidth; if (IsPC()) { if (e > 750) { n.style.fontSize = "50px" } else { n.style.fontSize = e / 750 * 50 + "px" } } else { n.style.fontSize = e / 750 * 50 + "px"; } }; initFontSize(); window.onresize = function () { initFontSize() };
css部分
* { padding: 0; margin: 0; } body { background-color: #fff; perspective: 8rem; /*filter: grayscale(100%);*/ width: 15rem; overflow: hidden; } .wrapper { width: 1.2rem; height: 1.2rem; /* 当前元素水平居中 */ margin: 3.6rem auto; position: relative; /* 当前元素为3d立体的 */ transform-style: preserve-3d; transform: rotateX(-10deg) rotateY(360deg); user-select: none; } .wrapper img { position: absolute; /* width，height的百分比默认会相对于父级 但是会受到自身position的影响而改变 */ width: 100%; height: 100%; /* z-index: 100; */ background-color: transparent; /* 监听到transform属性变化的时候会有动画 */ transition: -ms-text-align-last: left; /*transition:all 1s; text-align-last: left; 1s;*/ transform: scale(0); /* transform: rotateY(0deg) translateZ(0px); */ /*-webkit-box-reflect: below 0.2rem -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 50%,rgba(0, 0, 0, 0.5) 100% );*/ } .container { width: 15rem; border-radius: 1rem; height: 1rem; border: 1px solid #888; margin: 0 auto; overflow: hidden; position: relative; color: #000; } .container ul { height: 100%; margin: 0; padding: 0; list-style: none } .container li { float: left; width: 1rem; height: 100%; position: relative; display: flex; } .container li i { font-style: normal; display: inline-block; transform: translate(-50%, 5px); font-size: 14px } .container li::after { content: ""; position: absolute; border-left: 1px solid #aaa; height: 13px; left: 0; bottom: 5px } .container .center { width: 5px; height: 100%; position: absolute; background: #f40; left: 50%; top: 0; transform: translateX(-50%) } #chooseResult { text-align: center; height: 1rem; line-height: 1rem; color: #000; font-size: 24px; } .main { width: 7.5rem; height: 6rem; margin: 0 auto; position: relative; overflow: hidden; } .main::before, .main::after { background: linear-gradient(to right, #fff 0, rgba(255, 255, 255, 0) 100%); height: 100%; top: 0; z-index: 100; pointer-events: none; display: block; content: ''; left: 0; position: absolute; width: 40px; } .main::after { right: 0; left: inherit; transform: rotate(180deg); }
body部分
<div class="main"> <!-- ! + tab/enter --> <div class="wrapper" style="transform: rotateX(-10deg) rotateY(0deg);"> <!-- img[src=./img/$.png]*11 --> <img src="https://4cs.gia.edu/cn/interactive-4cs/img/color/d.png" alt="" draggable="false"> <img src="https://4cs.gia.edu/cn/interactive-4cs/img/color/e.png" alt="" draggable="false"> <img src="https://4cs.gia.edu/cn/interactive-4cs/img/color/f.png" alt="" draggable="false"> <img src="https://4cs.gia.edu/cn/interactive-4cs/img/color/g.png" alt="" draggable="false"> <img src="https://4cs.gia.edu/cn/interactive-4cs/img/color/h.png" alt="" draggable="false"> <img src="https://4cs.gia.edu/cn/interactive-4cs/img/color/i.png" alt="" draggable="false"> <img src="https://4cs.gia.edu/cn/interactive-4cs/img/color/j.png" alt="" draggable="false"> <img src="https://4cs.gia.edu/cn/interactive-4cs/img/color/k.png" alt="" draggable="false"> <img src="https://4cs.gia.edu/cn/interactive-4cs/img/color/l.png" alt="" draggable="false"> <img src="https://4cs.gia.edu/cn/interactive-4cs/img/color/m.png" alt="" draggable="false"> <img src="https://4cs.gia.edu/cn/interactive-4cs/img/color/n.png" alt="" draggable="false"> <img src="https://4cs.gia.edu/cn/interactive-4cs/img/color/o.png" alt="" draggable="false"> <img src="https://4cs.gia.edu/cn/interactive-4cs/img/color/p.png" alt="" draggable="false"> <img src="https://4cs.gia.edu/cn/interactive-4cs/img/color/r.png" alt="" draggable="false"> <img src="https://4cs.gia.edu/cn/interactive-4cs/img/color/s.png" alt="" draggable="false"> <img src="https://4cs.gia.edu/cn/interactive-4cs/img/color/t.png" alt="" draggable="false"> <img src="https://4cs.gia.edu/cn/interactive-4cs/img/color/u.png" alt="" draggable="false"> <img src="https://4cs.gia.edu/cn/interactive-4cs/img/color/v.png" alt="" draggable="false"> <img src="https://4cs.gia.edu/cn/interactive-4cs/img/color/w.png" alt="" draggable="false"> <img src="https://4cs.gia.edu/cn/interactive-4cs/img/color/x.png" alt="" draggable="false"> <img src="https://4cs.gia.edu/cn/interactive-4cs/img/color/y.png" alt="" draggable="false"> <img src="https://4cs.gia.edu/cn/interactive-4cs/img/color/z.png" alt="" draggable="false"> </div> </div> <h2 id="chooseResult"> </h2> <div class="container"> <ul> <li>d</li> <li>e</li> <li>f</li> <li>g</li> <li>h</li> <li>i</li> <li>j</li> <li>k</li> <li>l</li> <li>m</li> <li>n</li> <li>o</li> <li>p</li> <li>r</li> <li>s</li> <li>t</li> <li>u</li> <li>v</li> <li>w</li> <li>x</li> <li>y</li> <li>z</li> </ul> <div class="center"></div> </div>
相册旋转js
var imgList = document.getElementsByTagName('img'); var wrapper = document.getElementsByClassName('wrapper')[0]; var list_box = document.getElementsByClassName('list_box')[0]; var main = document.getElementsByClassName('main')[0]; var list_item = document.querySelectorAll('.list div'); var rotateY = 0; wrapper.style.transform = 'rotateX(' + -5 + 'deg) rotateY(' + 360 + 'deg)'; // 每相邻两张图片的夹角 var deg = 360 / imgList.length; window.onload = function() { wrapper.style.transform = 'rotateX(' + -5 + 'deg) rotateY(' + 360 + 'deg)'; // 每相邻两张图片的夹角 for(var i = 0; i < imgList.length; i++) { imgList[i].style.transform = "rotateY(" + deg * i + "deg) translateZ(200px) scale(1)"; imgList[i].style.transitionDelay = (imgList.length - 1 - i) * 0.1 + 's'; } var lastX = null, lastY = null, nowX = null, nowY = null, disX = null, disY = null, // 当前相册旋转的角度 rotateX = -10, //预设角度 rotateY = 0; var timer = null; var nowrotateY = null, //点击 初始旋转角度 lastrotateY = null, //点击结束 旋转角度 disrotateY = null, //开始与结束旋转的差值 activeIndex = 0, //当前显示的图片下标 num = null; //当前显示img 与 显示下一张 角度的差值 main.addEventListener("touchstart", function(e) { wrapper.style.transition = ""; lastX = e.changedTouches[0].pageX; lastY = e.changedTouches[0].pageY; noY = e.changedTouches[0].pageX; nowrotateY = getTranslateY(wrapper); falg = true; if(nowrotateY < deg) { wrapper.style.transform = 'rotateX(' + -5 + 'deg) rotateY(' + 360 + 'deg)'; } rotateY = nowrotateY; main.addEventListener("touchmove", function(e) { nowX = e.changedTouches[0].pageX; nowY = e.changedTouches[0].pageY; disX = nowX - lastX; disY = nowY - lastY; rotateX += -disY * 0.15; rotateY += disX * 0.15; //拖拽相册，旋转的角度比例 index = isIndex(); //设置旋转角度区间 if(rotateY > 360 - deg) { rotateY = rotateY - 360; } else if(rotateY < 0) { rotateY = rotateY + 360; } index = isIndex(); wrapper.style.transform = 'rotateX(' + -5 + 'deg) rotateY(' + rotateY + 'deg)'; lastY = nowY; lastX = nowX; setChoose(index); //传入当前显示的index触发导航栏跟随滚动 }, false) main.addEventListener("touchend", function(e) { laY = e.changedTouches[0].pageX; lastrotateY = getTranslateY(wrapper) main.removeEventListener("touchmove", function() {}, false); disrotateY = laY - noY; //与开始旋转的差值 num = Math.ceil(getTranslateY(wrapper) / deg) * deg - getTranslateY(wrapper); //与下一个36度的差值 //拖拽相册 旋转顺滑 if(laY > noY && falg) { rotateY = getTranslateY(wrapper) + num; } else { rotateY = getTranslateY(wrapper) - (deg - num); } if(falg) { falg = false; wrapper.style.transition = "1s"; wrapper.style.transform = 'rotateX(' + -5 + 'deg) rotateY(' + Math.ceil(rotateY) + 'deg)'; } setChoose(isIndex()); //传入当前显示的index触发导航栏跟随滚动 }, false) }, false) //判断当前index function isIndex() { var rote = getTranslateY(wrapper); var i = Math.round(rote / deg); i = imgList.length - Math.abs(i); if(rote < deg) { i = 0 } return Math.abs(i) } } //获取元素rotateY function getTranslateY(node) { var regRule = /rotateY(Y|\dd)?\(\s*(\w+\s*,)?\s*([^,]+)(\s*,[^)]+)?\s*\)/; var transform = node.style.transform; var reg; if(!transform) { return null; } reg = regRule.exec(transform); return +reg[3].split('deg')[0]; }
导航拖拽js
//$(function(){ //var activeIn=window.sessionStorage.getItem('activeIndex'); //if (!activeIn) { // activeIn = window.sessionStorage.setItem('activeIndex',0) //}else{ // console.log(activeIn) //} //$('.but').eq(activeIn).addClass('active').siblings().removeClass('active'); //$('.but').click(function(){ // console.log($('.but')) // let index = $(this).index()-$('.but').length; // console.log(index) // activeIn = window.sessionStorage.setItem('activeIndex',index) // $(this).addClass('active').siblings().removeClass('active'); //// $(".invitation_card_lst ul").eq(index).addClass('active').siblings().removeClass('active'); //}) //}) // // var config = { container: document.querySelector(".container"), optionWidth: 70, title: document.getElementById("chooseResult"), newindex:null, lastindex:null, disindex:null, options: [ { value: 0, text: "d" }, { value: 1, text: "e" }, { value: 2, text: "f" }, { value: 3, text: "j" }, { value: 4, text: "h" }, { value: 5, text: "j" }, { value: 6, text: "j" }, { value: 7, text: "k" }, { value: 8, text: "l" },{ value: 9, text: "m" }, { value: 10, text: "n" }, { value: 11, text: "o" }, { value: 12, text: "p" }, { value: 13, text: "r" }, { value: 14, text: "s" }, { value: 15, text: "t" }, { value: 16, text: "u" }, { value: 17, text: "v" }, { value: 18, text: "w" },{ value: 19, text: "x" }, { value: 20, text: "y" }, { value: 21, text: "z" }] } config.ul = config.container.querySelector("ul"); config.containerWidth = config.container.clientWidth; config.ulWidth = config.options.length * config.optionWidth; config.maxLeft = config.containerWidth / 2; config.minLeft = config.maxLeft - config.ulWidth + config.optionWidth; function forbiddenSelect() { config.container.onselectstart = function() { return false } } function createOptions() { config.ul.innerHTML = ""; var frag = document.createDocumentFragment(); config.ul.style.width = config.ulWidth + "px"; for(const op of config.options) { var li = document.createElement("li"); li.innerHTML = `<i data-value="${op.value}">${op.text}</i>`; li.style.width = config.optionWidth + "px"; frag.appendChild(li); } config.ul.appendChild(frag); } //导航跟随 function setChoose(value) { config.ul.style.transition = ".8s"; var children = Array.from(config.ul.children); var left = config.containerWidth / 2 - value * config.optionWidth; config.ul.style.marginLeft = left + "px"; } //相册跟随 var nowindex=null; var lastindex=null; function setRote({value}){ nowindex=value; rotateY=360-nowindex*deg wrapper.style.transition = ".5s"; wrapper.style.transform = 'rotateX(' + -5 + 'deg) rotateY(' + rotateY+ 'deg)'; lastindex=nowindex; } function getChoose() { var left = getComputedStyle(config.ul).marginLeft; left = parseFloat(left) - config.containerWidth / 2; left = Math.abs(left); var i = left / config.optionWidth; i = Math.round(i); return config.options[i]; } function regDragEvent(callback) { config.ul.addEventListener("touchstart",function(e) { config.ul.style.transition = ""; wrapper.style.transition = ""; //保存，深克隆初始位置，避免被更改 var x = {a:e.changedTouches[0].pageX}, left ={a:parseFloat(getComputedStyle(this).marginLeft)} ; left1={...left}; x1={...x}; config.ul.addEventListener("touchmove", function(e) { var dis = e.changedTouches[0].pageX - x1.a; var newLeft = left1.a + dis; if(newLeft < config.minLeft) { newLeft = config.minLeft; } else if(newLeft > config.maxLeft) { newLeft = config.maxLeft; } config.ul.style.marginLeft = newLeft + "px"; callback && callback(getChoose()); setRote(getChoose()); }) config.ul.addEventListener("touchend", function(e) { var op = getChoose(); setChoose(op.value); callback && callback(op); }) }) } function setTitle(op) { config.title.innerText = `选中的文本：${op.text}，选中的值：${op.value}`; } function init() { forbiddenSelect(); createOptions(); setChoose("0"); setTitle(config.options[0]); regDragEvent(setTitle); } init();
....
