首页 > 代码库 > 利用HTML5 与CSS3 做的放大镜

利用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 = http://www.mamicode.com/["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

利用HTML5 与CSS3 做的放大镜