首页 > 代码库 > 利用HTML5 与CSS3 做的放大镜
利用HTML5 与CSS3 做的放大镜
利用HTML5 与CSS3 做的放大镜
- 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>
- 样式
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; }
-
伟大的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 做的放大镜
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。