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

利用HTML5 与CSS3 做的放大镜

2024-08-19 05:36:39   223人阅读

利用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 做的放大镜


联系
我们