利用HTML5 与CSS3 做的放大镜
2024-09-02 18:11:46
利用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 = ["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
最新文章
- Popmotion – 小巧，灵活的 JavaScript 运动引擎
- UML中几种类间关系：继承、实现、依赖、关联、聚合、组合的联系与区别
- Hadoop 之MongoDB
- jqueryEasyUI：tabs扩展:给tabs组件绑定双击事件 分类： JqueryEasyUI 2014-09-29 14:36 537人阅读 评论(0) 收藏
- 标准库源码--wsgi服务器
- ADO.NET系列之操作XML
- WebLoigc的配置（生产模式与开发模式）
- WPF 程序中启动和关闭外部.exe程序
- 小公司生存，一般活过第一年，就能撑3年（读书笔记：成败关键，关键是你是否拥有现金流客户）good
- Python中lambda用法
- ADO对SQL Server 2008数据库的基础操作
- Java1.0-1.12各个版本的新特性
- P1348 Couple number
- python 从大到小排序
- numpy使用指南
- SlickOne 敏捷开发框架介绍(二) -- 多用户/多租户/SAAS软件基础框架实现
- 【python 2.7】获取外部参数
- Paxos Made Simple【翻译】
- js学习系列之-----apply和call
- MathType有哪些功能