上面的动图展示了实现效果,左边的按钮控制图片的正面和侧面切换,右边按钮控制钟表颜色切换。
但是当左边按钮放在正面时,右边按钮切换颜色只是正面。
左边按钮放在侧面时,右边按钮切换颜色只是侧面。
当右边按钮选中颜色时,左边按钮切换同样颜色的正侧面。
右边的按钮做了鼠标移入灰色背景突出,移出恢复,但是当鼠标点击时灰色背景放大,移入移出不会触发此按钮的移入移出效果,但不会改变其他按钮。
其中按钮使用灰色圆圈做背景,上面放button按钮内部背景色,边框白色。
这一组效果的代码如下:
html:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<!--左边图片--> <div id="pop_btmPt"> <img src="../images/pop/color.png" width="140%" style="position: absolute;top: -88px; left: -85px;"> </div> <!--左侧导航--> <div id="zuo_dh"> <ul> <li class="btn_dot" onMouseOver="ht(0)" style="border-color: #7f7f7f;"><div class="dot"></div></li> <li class="btn_dot" onMouseOver="ht(1)"><div class="dot"></div></li> </ul> </div> <!--颜色选择按钮框架--> <div id="pop_color"> <div><button style="background-color: #BFCED6;"></button></div> <div><button style="background-color: #F3C4BF;"></button></div> <div><button style="background-color: #EA6C56;"></button></div> <div><button style="background-color: #EBBC4E;"></button></div> <div><button style="background-color: #1B365D;"></button></div> <div><button style="background-color: #244C5A;"></button></div> <div><button style="background-color: #502B3A;"></button></div> </div>
JS:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
window.onload = function(){ //循环给下方选颜色按钮加鼠标移入移出事件和点击事件 //找到button var corBtn = document.getElementById('pop_color').children; for(var y = 0; y < corBtn.length; y ++){ corBtn[y].children[0].addEventListener('mouseover',LittleColor); corBtn[y].children[0].addEventListener('mouseout',recoverColor); corBtn[y].children[0].addEventListener('click',BigColor); //每个button赋标志为0 corBtn[y].children[0].setAttribute('a',0); } //第一个按钮设为默认 corBtn[0].children[0].parentNode.style.WebkitTransform="scale(1.1)"; corBtn[0].children[0].WebkitTransform="scale(0.8)"; corBtn[0].children[0].setAttribute('a',1); } } //鼠标移入灰色背景变大 function LittleColor(){ //找到button var fl = document.getElementById('pop_color').getElementsByTagName('button'); //获取这个按钮的标志 var a = this.getAttribute('a'); //当标志为1 按下 时 执行按钮按下时的放大比例 if(a == 1){ //灰色背景放大1.1 this.parentNode.style.WebkitTransform="scale(1.1)"; //按钮缩小0.8(1/1.8=0.8为了保持按钮不变) this.style.WebkitTransform="scale(0.8)"; //标志为0 没有按下时 执行移入放大比例 }else{ //灰色背景放大1.083 this.parentNode.style.WebkitTransform="scale(1.083)"; //按钮缩小0.9(1/1.083=0.9) this.style.WebkitTransform="scale(0.9)"; } } //鼠标移出恢复 function recoverColor(){ //找到按钮 var fl = document.getElementById('pop_color').getElementsByTagName('button'); //获取标志 var a = this.getAttribute('a'); //当标志为1 按下 时 执行按钮按下时的放大比例 if(a == 1){ this.parentNode.style.WebkitTransform="scale(1.1)"; this.style.WebkitTransform="scale(0.8)"; //标志为0 没有按下时 执行移出恢复比例 transform设为none; }else{ this.parentNode.style.WebkitTransform="none"; this.style.WebkitTransform="none"; } } //鼠标点击放大更换图片 //默认为正面图片 var ss = 0; //图片正面 侧面数组 var ptArrFront = ['../images/pop/color.png','../images/pop/color2.png','../images/pop/color3.png','../images/pop/color4.png','../images/pop/color5.png','../images/pop/color6.png','../images/pop/color7.png']; var ptArrSide = ['../images/pop/color11.png','../images/pop/color22.png','../images/pop/color33.png','../images/pop/color44.png','../images/pop/color55.png','../images/pop/color66.png','../images/pop/color77.png']; function BigColor(){ //获取按钮 var fl = document.getElementById('pop_color').children; for(var i = 0; i < fl.length; i++){ //循环按钮样式为最初 fl[i].style.WebkitTransform="none"; fl[i].children[0].style.WebkitTransform="none"; //设置按下标志 fl[i].children[0].setAttribute('a',0); ////设置按钮下标 fl[i].children[0].setAttribute('num',i); } this.parentNode.style.WebkitTransform="scale(1.1)"; this.style.WebkitTransform="scale(0.8)"; this.setAttribute('a',1); //点击切换图片 //获取图片位置 var pt = document.getElementById('pop_btmPt').children[0]; //获取图片下标 var num = this.getAttribute('num'); var numInt = parseInt(num); //如果为正面图片 if(ss == 0){ pt.src = ptArrFront[numInt]; //如果为侧面图片 }else if(ss == 1){ pt.src = ptArrSide[numInt]; } } //白色背景左边导航移入换图函数 function ht(num){ //白色背景左边导航移入圆圈函数 //获取导航位置 var w = document.getElementsByClassName('btn_dot'); //循环给两个按钮圆圈设为白色 for(var i = 0; i < w.length; i++){ w[i].style.borderColor = 'white'; } //选中的那个边框出现 w[num].style.borderColor = '#7f7f7f'; //获取右边颜色按钮 var sel = document.getElementById('pop_color').getElementsByTagName('button'); //定义下标 var xb = 0; //获取图片 var pt = document.getElementById('pop_btmPt').children[0]; for(var z = 0; z < sel.length; z ++){ //循环右边按钮,当按钮的a标志为1 即选中时,把按钮下标给xb 结束循环 if(sel[z].getAttribute('a') == 1){ xb = z; break; } } //白色背景左边导航移入换图函数 //传参为正面函数 if(num == 0){ ss=0; //图片从正面下标里获取 pt.src = ptArrFront[xb]; }else if(num == 1){ ss=1; pt.src = ptArrSide[xb]; } }
这里我们主要用到了设置标志的办法。
设置了正面的图片数组和侧面的图片数组。
标志1. ss =0 为正面图片数组; ss= 1 为侧面图片数组。
标志2. a = 0 为未选中按钮; a = 1 为选中按钮;
标志3. num = i; 为按钮的下标,用来确定图片的下标。
通过对每个操作的标志的赋值和提取。来控制整个图片的显示。