js，class类放大镜和轮播的部分功能

最新推荐文章于 2024-11-08 16:09:18 发布

- 瑾♛年

最新推荐文章于 2024-11-08 16:09:18 发布

阅读量46

点赞数

文章标签： javascript swift 开发语言

本文链接：https://blog.csdn.net/qq_52840130/article/details/134976445

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style>
           *{
               padding: 0;
               margin: 0;
           }
           ul,ol{
               list-style: none;
           }
           .nav{
               position: relative;
           }
           ul{
               width: 200px;
               height: 200px;
               position: relative;
           }
           ul li{
               width: 200px;
               height: 200px;
               position: absolute;
               opacity: 0;
           }
           ul li img{
               width: 100%;
               height: 100%;

           }
           .ul1 li{
               width: 200px;
               height: 200px;
               overflow: hidden;
           }
           .ul1 li img{
               width: 400px;
               height: 400px;
               position: absolute;
               top: 0;
               left: 0;
           }
           ol{
               width: 200px;
               height: 40px;
               margin-top:20px ;
               margin-left: 10px;
           }
           ol li{
               width: 30px;
               height: 30px;
float: left;
           margin-right: 10px;

           }
           ol li img{
               width: 100%;
               height: 100%;
           }
           ol li img:hover{
               border: 1px solid ;
           }
           .show{
               opacity: 1;
               z-index: 1;
           }
           .zoom{
               width: 200px;
               height: 200px;
               margin-left: 300px;
               top: 0;
               border: 1px solid black;
               position: absolute;
               display: none;
           }
           span{
               width: 100px;
               height: 100px;
               background-color: hotpink;
               position: absolute;
               top: 0;
               left: 0;
               z-index: 3;
               opacity: 0.5;
               display: none;
           }
           .top{
               width: 200px;
               height: 200px;
               position: relative;

           }
       </style>
   </head>
   <body>
       <div class="nav">
           <div class="top">
           <ul class="ul">
               <li class="show"><img src="img/img1.jpg"/></li>
               <li><img src="img/img2.jpg"/></li>
               <li><img src="img/img3.jpg"/></li>
               <li><img src="img/img4.jpg"/></li>
               <li><img src="img/img5.jpg"/></li>
           </ul>
           <span></span>
           </div>
           <div class="zoom">
           <ul class="ul1">
               <li class="show" value="0"><img src="img/img1.jpg"/></li>
               <li value="1"><img src="img/img2.jpg"/></li>
               <li value="2"><img src="img/img3.jpg"/></li>
               <li value="3"><img src="img/img4.jpg"/></li>
               <li value="4"><img src="img/img5.jpg"/></li>
           </ul>
           </div>

           <ol>
               <li ><img src="img/img1.jpg"/></li>
               <li><img src="img/img2.jpg"/></li>
               <li><img src="img/img3.jpg"/></li>
               <li><img src="img/img4.jpg"/></li>
               <li><img src="img/img5.jpg"/></li>
           </ol>

       </div>
       <script>
       class Switch{
           constructor(){
               this.top=document.querySelector('.top')
               this.ul=document.querySelector('.ul')
               this.zooms=document.querySelector('.zoom')
               this.span=document.querySelector('span')
               this.show=document.querySelectorAll('.ul li')
               this.show1=document.querySelectorAll('.ul1 li')
           this.active=document.querySelectorAll('ol li')
               this.img=document.querySelectorAll('.ul1 li img')
               this.init()
               this.zoom()
           }
           init(){
               var that=this
                   for(let i=0;i< this.active.length;i++){
                   this.active[i].οnclick=function(){
                       console.log(i)
                       for(var j=0;j< that.active.length;j++){
                           that.show[j].className=''
                           that.show1[j].className=''
                       }
                       that.show[i].className='show'
                       that.show1[i].className='show'


                   }
               }
           }
           zoom(){
               this.top.οnmοuseοver=()=>{
                   this.zooms.style.display='block'
                   this.span.style.display='block'
               }
               this.top.οnmοuseοut=()=>{
                   this.zooms.style.display='none'
                   this.span.style.display='none'
               }
               this.top.οnmοusemοve=(e)=>{
                   var x=e.clientX - this.span.offsetWidth/2
                   var y=e.clientY - this.span.offsetHeight/2
                   if(x<=0){
                       x=0
                   }
                   else if(x>this.top.offsetWidth-this.span.offsetWidth){
                       x=this.top.offsetWidth-this.span.offsetWidth
                   }
                   if(y<=0){
                       y=0
                   }
                   else if(y>this.top.offsetHeight-this.span.offsetHeight){
                       y=this.top.offsetHeight-this.span.offsetHeight
                   }
                   this.span.style.left=x+'px'
                   this.span.style.top=y+'px'
                   var w=x/(this.top.offsetWidth-this.span.offsetWidth)
                   var h=y/(this.top.offsetHeight-this.span.offsetHeight)
                   for(let i=0;i< this.active.length;i++){
                   this.img[i].style.left=-w*(this.img[i].offsetWidth-this.zooms.offsetWidth)+'px'
                   this.img[i].style.top=-h*(this.img[i].offsetHeight-this.zooms.offsetHeight)+'px'
                   }
               }
           }
       }
   new Switch()
       </script>
   </body>
</html>