css制作放大镜效果

时间：2015-04-07 15:56:51 　来源：免费模板网　作者：风雪　阅读次数　tagscss特效

我们在浏览一些网站的时候，鼠标经过某个商品，商品的大图就会出现，那是怎么实现的呢css3的transition模仿js的放大镜效果，鼠标移到图上，点击代表方向的箭头，可以看到效果。做这个效果要注意的是，时间要保持一致，大图是小图的倍数，不然会出现偏差。小图上放了一个放大镜，css3和js不同，js鼠标任意移动，可以获取鼠标的位置，但是css3完成的是逻辑上的事情，这点css3做不到，所以就用了方向箭头来代替。点击箭头我的放大镜就开始移动，移动部分采用transition。被放大的图的处理：首先做了个定宽定高的div，叫他溢出隐藏。最主要的来了，图片要在div中显示图片中间的那部分，所以图片要定位，接下来就是放大镜走，图片也走就可以了

<!DOCTYPE HTML>
<html lang=zh-cn>
<head>
<title>css3的transition模仿js的放大镜效果</title>
<style>
*{margin:0;padding:0px;}
body{background:#b1b1b1;font-family:Arial;font-size:125%;color:#202020;}
li{position:relative;list-style:none;float:left;width:235px;height:220px;margin:10px 0 0 10px;cursor:pointer;}
.tips{width:700px;margin:0 auto;line-height:24px;padding-top:10px;font-size:14px;}
.bredcolor{color:#fff;}
.enlarge {position:relative; width:180px; height:240px; margin:20px 0 200px 10px;margin:0 auto;}
.frame {width:270px; height:360px; position:absolute; left:-9999px; top:0; opacity:0; overflow:hidden;
    -webkit-transition: opacity 0.5s, left 0s 0.5s;
    -moz-transition: opacity 0.5s, left 0s 0.5s;
    -ms-transition: opacity 0.5s, left 0s 0.5s;
    -o-transition: opacity 0.5s, left 0s 0.5s;
    transition: opacity 0.5s, left 0s 1s;
}
.frame img {left: -134px; top: -181px; position:absolute;
    -webkit-transition: 0s 3600s;
    -moz-transition: 0s 3600s;
    -ms-transition: 0s 3600s;
    -o-transition: 0s 3600s;
    transition: 0s 3600s;
}
.frame .inner {position:absolute; left:0; top:0; width:270px; height:360px; box-shadow: inset 0px 0px 15px rgba(0,0,0,0.9);z-index:100;}
.enlarge .area {width:88px; height:118px; background:#fff; opacity:0.5; border:1px solid #000; position:absolute; left:45px; top:60px; z-index:50; display:none;
    -webkit-transition: 0s 3600s;
    -moz-transition: 0s 3600s;
    -ms-transition: 0s 3600s;
    -o-transition: 0s 3600s;
    transition: 0s 3600s;
}
img.control {position:absolute; display:none; width:32px; height:32px; z-index:100;}
img.up {left:74px; top:72px;}
img.down {left:74px; top:136px;}
img.left {left:42px; top:104px;}
img.right {left:106px; top:104px;}
img.dtl {left:42px; top:72px;}
img.dtr {left:106px; top:72px;}
img.dbl {left:42px; top:136px;}
img.dbr {left:106px; top:136px;}
img.ctr {left:74px; top:104px;}
.enlarge:hover .control {display:block;}
.enlarge:hover .area {display:block;}
/* 鼠标移到图上 */
.enlarge:hover .frame {left:250px; opacity:1;
    -webkit-transition: opacity 0.5s, left 0s;
    -moz-transition: opacity 0.5s, left 0s;
    -ms-transition: opacity 0.5s, left 0s;
    -o-transition: opacity 0.5s, left 0s;
    transition: opacity 0.5s, left 0s;
}
img.control:active ~ div.frame img {
    -webkit-transition: 1.5s linear;
    -moz-transition: 1.5s linear;
    -ms-transition: 1.5s linear;
    -o-transition: 1.5s linear;
    transition: 1.5s linear;
}
img.control:active ~ div.area {
    -webkit-transition: 1.5s linear;
    -moz-transition: 1.5s linear;
    -ms-transition: 1.5s linear;
    -o-transition: 1.5s linear;
    transition: 1.5s linear;
}
/* 被放大的图 */
img.up:active ~ div.frame img {top:0;}
img.down:active ~ div.frame img {top:-360px;}
img.left:active ~ div.frame img {left:0;}
img.right:active ~ div.frame img {left:-270px;}
img.dtl:active ~ div.frame img {top:0; left:0;}
img.dtr:active ~ div.frame img {top:0; left:-270px}
img.dbl:active ~ div.frame img {top:-360px; left:0;}
img.dbr:active ~ div.frame img {top:-360px; left:-270px;}
img.ctr:active ~ div.frame img {top:-180px; left:-135px;}
/* 放大镜 */
img.up:active ~ div.area {top:0;}
img.down:active ~ div.area {top:120px;}
img.left:active ~ div.area {left:0;}
img.right:active ~ div.area {left:90px;}
img.dtl:active ~ div.area {top:0; left:0;}
img.dtr:active ~ div.area {top:0; left:90px}
img.dbl:active ~ div.area {top:120px; left:0;}
img.dbr:active ~ div.area {top:120px; left:90px;}
img.ctr:active ~ div.area {top:59px; left:44px;}
</style>
</head>
<body>
<div class="enlarge">
        <img src="/jscss/demoimg/201207/statue-small.jpg" alt="">
        <img class="control up" src="/jscss/demoimg/201207/up.png" alt="">
        <img class="control down" src="/jscss/demoimg/201207/down.png" alt="">
        <img class="control left" src="/jscss/demoimg/201207/left.png" alt="">
        <img class="control right" src="/jscss/demoimg/201207/right.png" alt="">
        <img class="control dtl" src="/jscss/demoimg/201207/dtl.png" alt="">
        <img class="control dtr" src="/jscss/demoimg/201207/dtr.png" alt="">
        <img class="control dbl" src="/jscss/demoimg/201207/dbl.png" alt="">
        <img class="control dbr" src="/jscss/demoimg/201207/dbr.png" alt="">
        <img class="control ctr" src="/jscss/demoimg/201207/ctr.png" alt="">
        <div class="area"></div>
        <div class="frame"><img src="/jscss/demoimg/201207/statue.jpg" alt=""><div class="inner"></div></div>
    </div>
</body>
</html>

上篇：运用css制作幻灯片效果

下篇：css制作QQ聊天框

本文地址：https://www.freemoban.com/bjrm/2015/0407/1274.html

猜你喜欢