利用HTML5 与CSS3 做的放大镜

利用HTML5 与CSS3 做的放大镜

1. html结构

   <div class="wrap">
               <div class="move">
                   <ul class="pic">
                       <li><img src="img/iBannerText.png" /></li>
                       <li><img src="img/iBannerText2.png" /></li>
                       <li><img src="img/iBannerText3.png" /></li>
                   </ul>
                   <div class="zoomPic">
                       <div class="mask_pic">
                           <div class="pic">
                           </div>
                           <div class="mask">
                           </div>
                       </div>
                   </div>
               </div>
               <ul class="text">
                   <li><img src="img/iCourseTabText.png" /></li>
                   <li><img src="img/iCourseTabText2.png" /></li>
                   <li><img src="img/iCourseTabText3.png" /></li>
               </ul>
               <ul class="botton">
                   <li class="active"><span></span></li>
                   <li><span></span></li>
                   <li><span></span></li>
               </ul>
           </div>

2. 样式

   body,
   			ul,
   			li {
   				padding: 0;
   				margin: 0;
   			}
   
   			ul {
   				list-style: none;
   			}
   
   			.wrap {
   				margin: 50px auto;
   				width: 365px;
   				position: relative;
   				border: 2px solid firebrick;
   				vertical-align: center;
   			}
   
   			.wrap .pic {
   				position: relative;
   				height: 80px;
   				width: 100%;
   			}
   
   			.wrap .pic li {
   				position: absolute;
   				top: -80px;
   				-webkit-transition: 0.5s;
   				transition: 0.5s;
   				opacity: 0;
   			}
   
   			.wrap .text {
   				position: relative;
   				top: 0px;
   				left: 0;
   				height: 45px;
   				width: 100%;
   				margin-top: 30px;
   			}
   
   			.wrap .text li {
   				position: absolute;
   				left: 365px;
   				-webkit-transition: 0.5s;
   				transition: 0.5s;
   				opacity: 0;
   			}
   
   			.wrap .botton {
   				position: relative;
   				bottom: 0px;
   				height: 21px;
   				right: 0px;
   				width: 75px;
   				left: 280px;
   			}
   
   			.wrap .botton li {
   				float: left;
   				height: 100%;
   				width: 20px;
   				margin: 0px 5px 0px 0px;
   				background-image: url(img/iCourseTabBtnShadow.png);
   				background-repeat: no-repeat;
   			}
   
   			.wrap .botton span {
   				display: block;
   				height: 100%;
   				background-position: center 2px;
   				background-repeat: no-repeat;
   				background-image: url(img/iCourseIco.png);
   				-webkit-transform: scale(0);
   				transform: scale(0);
   				transition: 0.3s;
   			}
   
   			.wrap .botton .active span {
   				-webkit-transform: scale(1);
   				transform: scale(1);
   			}
   
   			.zoomPic {
   				position: absolute;
   				height: 172px;
   				width: 144px;
   				top: 0px;
   				left: -85px;
   				background-image: url(img/iZoom.png);
   				background-repeat: no-repeat;
   				overflow: hidden;
   				top: -13px;
   				-webkit-transform-origin: 6px 166px;
   				/*-webkit-transform: rotate(-30deg);*/
   				transition: 0.3s;
   			}
   			.zoomPic .mask_pic{
   				height: 96px;
   				width: 96px;
   				position: absolute;
   				left: 43px;
   				top: 3px;
   				background-color: #FFFFFF;
   				border-radius: 50%;
   			}
   			.zoomPic .pic {
   				position: absolute;
   				height: 96px;
   				width: 96px;
   				background-image: url(img/iBannerTextBig.png);
   				background-repeat: no-repeat;
   				left: 0px;
   				top: 0;
   				border-radius: 50%;
   				background-position: 40px 0px;
   				transition: 0.5s linear;
   				/*相对于 zoomPic 的旋转基点*/
   				-webkit-transform-origin:-36px 165px ;
   				/*-webkit-transform: rotate(30deg);*/
   			}
   
   			.zoomPic .mask {
   				border-radius: 50%;
   				position: absolute;
   				left: 0px;
   				top: 0;
   				height: 96px;
   				width: 96px;
   				background-image: url(img/iZoomGlass.png);
   				background-repeat: no-repeat;
   			}
   			.move{
   				position: relative;
   				z-num: 5;
   			}
   

   　

3. 　伟大的js来了

   <script>
               $(function() {
                   var btnList = $(".botton").find('li');
                   var picList = $('.pic').find('li');
                   var textList = $('.text').find('li');
                   var num = 0
                   var aSrc = ["img/iBannerTextBig.png", "img/iBannerTextBig2.png", "img/iBannerTextBig3.png"];
                   //初始化
                   picList.eq(0).css({
                       'top': 0,
                       'opacity': 1
                   });
                   textList.eq(0).css({
                       'left': 0,
                       'opacity': 1
                   })
   
                   btnList.bind('click', function() {
                           num = $(this).index();
                           $(btnList).removeClass("active");
                           $(this).addClass('active');
                           //先移动放大镜
                           toScale();
                           //toHidden(num);
                           //end(num);
   
                   })
                   //初始化
                   zoomMove(0);
                       //放大镜
                   $('.move').bind('mousemove', function(ev) {
                       var picL = $(this).offset().left;
                       var picT = $(this).offset().top;
                       var w = $(this).width();
                       var H=$(this).height();
                       var evX = ev.clientX;
                       var evY = ev.clientY ;
                       if(evX>=picL &&  (picL + w>=evX) &&(picT+H >=evY)){
                           zoomMove(evX - picL);
                       }else{
                           //当鼠标 不在移动的范围时 回到原位置
                           setTimeout(function(){
                               zoomMove(0);
                           },500)
                       }
   
                   })
   
               function toScale(){
                   $('.zoomPic').css({
                       'webkitTransform':'rotate(-60deg)'
                   })
                   $('.zoomPic .pic').css({
                       'webkitTransform':'rotate(60deg)'
                   })
   
                   $('.zoomPic .pic').bind('webkitTransitionEnd',function(){
                       //切换背景图片
                       $(this).css({
                           'backgroundImage':'url('+aSrc[num]+')'
                       })
                       /*=============*/
                       $(this).unbind("webkitTransitionEnd");
                       toHidden(num);
                   })
               }
               function zoomMove(x) {
                   //放大镜中心得位置
                   var centerX = 96;
                   var xScale = (424/363).toFixed(2) ;
                   var picW = $('.mask_pic >.pic').width();
                   console.log(picW)
                   $('.mask_pic > .pic').css({
                       'backgroundPosition' : -xScale*x+picW/2+"px  0px"
                   })
   
                   $(".zoomPic").css({
                       'webkitTransition':'0s', /// 这里 记得去除  不然会影放大镜移动的速度
                       'left': x-centerX
                   })
               }
               //图片及文字的隐藏
               function toHidden(){
                   picList.css({
                       "webkitTransition": '0.5s',
                       "top": -80,
                       "opacity": 0
                   });
                   textList.css({
                       "webkitTransition": "0.3s top ,0.3s 0.2s left, 0.3s opacity",
                       "top": 45,
                       'left': 365,
                       'opacity': 0
                   })
                   picList.bind('webkitTransitionEnd',picShow);
                   textList.bind('webkitTransitionEnd', textShow);
               }
   
               function picShow(){
                   picList.unbind('webkitTransitionEnd');
                   $(picList[num]).css({
                       'top': 0,
                       'opacity': 1
                   })
                   //移除事件
                   $(picList[num]).unbind('webkitTransitionEnd');
               }
               function textShow(){
                   textList.unbind('webkitTransitionEnd');
                   $(textList[num]).css({
                       'top': 0,
                       'left': 0,
                       'opacity': 1
                   })
                   //放大镜还原的位置
                   $(textList[num]).bind('webkitTransitionEnd',toOrigin)
               }
               function toOrigin(){
                   $('.zoomPic').css({
                       "webkitTransition": '0.5s',
                       'webkitTransform':'rotate(0deg)'
                   })
                   $('.zoomPic .pic').css({
                       "webkitTransition": '0.5s',
                       'webkitTransform':'rotate(0deg)'
                   })
                   $(this).unbind('webkitTransitionEnd');
               }
           })
           </script>

   _{这就是惊天的成果 — _ *  2016-11-05  23:29:52}