本文固定链接:https://blog.csdn.net/u011135729/article/details/79642425转载请注明出处
案例下载https://github.com/jiuxiangfeng/jxfzoomy
背景:
最近工作相对有点清闲,想到业务系统写久了,写前端页面很手生,就想做个商品详情页面随便练练手,当整个页面搭建的差不多了,具体实现放大镜效果时候,本想着随便找个插件弄一下得了,但是找了许久(花了一早上,懒得找了),没有找到自己所想要的(其实有很多下载收费,不过想到口袋有点瘪…)。这里简单说下我理想中的商城放大镜的实现(这只是我自己的想法,如有理解不对的地方,还望指正,谢谢)。
1、放大镜图片应分三级(图1缩略图、图2小图、图3大图)
2、图片不应该变形,而是按原图比例居中显示
3、缩略图的数量是可变的,且数量如果过多,则应该有部分隐藏,通过左右箭头来移动,缩略图较少占用宽度较小,应居中缩略图
gif演示:
使用介绍:
1、支持ie8+,及各现代浏览器(ie7勉强也可以用,ie6没测试)
2、此插件基于jquery,使用前需引用jquery(版本我这里用1.9.1开发的)、jxfzoomy.js、jxfzoomy.css
3、可以传入的参数(json对象形式)
4、html必须格式
5、注册控件
完整代码:
jxfzoomy.css
.jxfzoomy-container ul{
margin: 0;
padding: 5px 0 0 0;
list-style: none;
}
.jxfzoomy-container img{
vertical-align: top;
}
.jxfzoomy-container{
position: relative;
margin-left: 100px;
margin-top: 50px;
}
.jxfzoomy-small-box{
position: relative;
border: 1px solid #ccc;
display:table-cell;
vertical-align: middle;
text-align: center;
}
/* .jxfzoomy-small-box i{
height: 100%;
display:inline-block;
vertical-align: middle;
} */
.jxfzoomy-small-box-move{
display:inline-block;
position: relative;
vertical-align: middle;
}
.jxfzoomy-small-box .mask{
position: absolute;
background-color: #000;
display: none;
cursor: move;
/* older safari/Chrome browsers */
-webkit-opacity: 0.5;
/* Netscape and Older than Firefox 0.9 */
-moz-opacity: 0.5;
/* Safari 1.x (pre WebKit!) 老式khtml内核的Safari浏览器*/
-khtml-opacity: 0.5;
/* IE9 + etc...modern browsers */
opacity: .5;
/* IE 4-9 */
filter:alpha(opacity=50);
/*This works in IE 8 & 9 too*/
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/*IE4-IE9*/
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
}
.jxfzoomy-big-box{
position:absolute;
border: 1px solid #ccc;
overflow: hidden;
width:0;
height: 0;
}
.jxfzoomy-big-box .jxfzoomy-big-img{
position:absolute;
}
.jxfzoomy-thumb-box{
position: relative;
margin-right: 20px;
overflow: hidden;
}
.jxfzoomy-thumb-lt{
position: absolute;
text-align: center;
left: 0;
/* border: solid 1px #bbb; */
margin-top: 5px;
width: 13px;
height: 50px;
line-height: 50px;
color:#999;
cursor: pointer;
/* border-radius: 5px 0 0 5px; */
font-weight: bold;
font-size: 28px;
font-family: '黑体';
}
.jxfzoomy-thumb-gt{
position: absolute;
text-align: center;
right:0;
/* border: solid 1px #bbb; */
margin-top: 5px;
width: 13px;
height: 50px;
line-height: 50px;
color:#999;
cursor: pointer;
/* border-radius: 0 5px 5px 0; */
font-weight: bold;
font-size: 28px;
font-family: '黑体';
}
.jxfzoomy-thumb-ct{
overflow: hidden;
}
.jxfzoomy-list-img{
float:left;
width: 5000px;
margin-top: 5px;
}
.jxfzoomy-list-img .jxfzoomy-active{
border:solid 1px red;
}
.jxfzoomy-list-img li{
float: left;
margin-left: 5px;
border: 1px solid #eee;
}
.jxfzoomy-list-img li div{
display:table-cell;
vertical-align: middle;
text-align: center;
}
/* .jxfzoomy-list-img li img{
max-width: 50px;
max-height: 50px;
} */
.jxfzoomy-clearfix:before,.jxfzoomy-clearfix:after { content: ""; display: table; }
.jxfzoomy-clearfix:after { clear: both; }
.jxfzoomy-clearfix { *zoom: 1;clear: both; }
jxfzoomy.js
(function($){
$.fn.jxfZoomy = function(){
return $.fn.jxfZoomy.methods['init'].apply(this,arguments);
};
/*配置信息*/
$.fn.jxfZoomy.option = {
smallBoxW: 250,
smallBoxH: 250,
bigBoxW: 350,
bigBoxH: 350,
smallListImgW:50,
smallListImgH:50,
moveSpeed: 50
}
$.fn.jxfZoomy.methods = {
configPara:{},
init: function (optionTemp) {
var option = $.extend({}, $.fn.jxfZoomy.option, optionTemp);
$.fn.jxfZoomy.option = option;
var configPara = $.fn.jxfZoomy.methods.configPara;
//容器
configPara.$container = this;
//初始化参数
var html = "";
html+='<div class="jxfzoomy-small-box">';
html+=' <div class="jxfzoomy-small-box-move">';
html+=' <img class="small-img" style="width:10px" src="'+$('.jxfzoomy-active').attr('data-smallImg')+'" alt="">';
html+=' <div class="mask"></div>';
html+=' </div>';
html+='</div>';
html+='<div class="jxfzoomy-big-box">';
html+='<img id="jxfzoomy-big-img" class="jxfzoomy-big-img" src="'+$('.jxfzoomy-active').attr('data-bigImg')+'" alt="">';
html+='</div>';
$(html).insertBefore(configPara.$container.find('.jxfzoomy-thumb-box'));
//小图
configPara.$smallImg = configPara.$container.find('.small-img');
//小图框
configPara.$smallBox = configPara.$container.find('.jxfzoomy-small-box');
//大图
configPara.$bigImg = configPara.$container.find('.jxfzoomy-big-img');
//大图框
configPara.$bigBox = configPara.$container.find('.jxfzoomy-big-box');
//遮罩
configPara.$mask = configPara.$container.find('.mask');
//初始化大框(放大的那个框)
$.fn.jxfZoomy.methods.initBigBox();
//初始化小图
$.fn.jxfZoomy.methods.initSmallImg();
//初始化左右箭头
$.fn.jxfZoomy.methods.initArrows();
//小缩略图(很多张的那个)
$.fn.jxfZoomy.methods.initSmallListImg();
//绑定事件
$.fn.jxfZoomy.methods.bindEvent();
//初始化大图
document.getElementById('jxfzoomy-big-img').onload = function () {
//初始化小图
$.fn.jxfZoomy.methods.initSmallImg();
//初始化遮罩
$.fn.jxfZoomy.methods.initMask();
$.fn.jxfZoomy.methods.bindEvent2();
}
//不知道为什么ie浏览器进来没有触发上面的document.getElementById('jxfzoomy-big-img').onload,所以代码点击一下当前的小缩略图
if (!!window.ActiveXObject || "ActiveXObject" in window){
$('.jxfzoomy-active').click();
}
//$('.jxfzoomy-active').click();
return this;
},
initBigBox: function(){
var configPara = $.fn.jxfZoomy.methods.configPara;
var option = $.fn.jxfZoomy.option;
configPara.$smallBox.css({
'width': option.smallBoxW,
'height': option.smallBoxH
});
configPara.$bigBox.css({
'border-width':0,
'left': option.smallBoxW + 5,
'top': 0
});
},
initSmallImg:function(){
var configPara = $.fn.jxfZoomy.methods.configPara;
var option = $.fn.jxfZoomy.option;
if(configPara.$smallImg.width() > configPara.$smallImg.height()){
configPara.$smallImg.css({'width':option.smallBoxW ,'height':'auto'});
}else{
configPara.$smallImg.css({'width':'auto','height':option.smallBoxH });
}
},
initArrows:function(){
var configPara = $.fn.jxfZoomy.methods.configPara;
var option = $.fn.jxfZoomy.option;
$('<div class="jxfzoomy-thumb-lt"><</div><div class="jxfzoomy-thumb-gt">></div>')
.insertBefore(configPara.$container.find('.jxfzoomy-thumb-box .jxfzoomy-thumb-ct'));
configPara.$container.find('.jxfzoomy-thumb-box .jxfzoomy-thumb-lt,.jxfzoomy-thumb-box .jxfzoomy-thumb-gt')
.css({
'height':option.smallListImgH,
'line-height':option.smallListImgH + 'px'
});
},
initSmallListImg:function(){
var configPara = $.fn.jxfZoomy.methods.configPara;
var option = $.fn.jxfZoomy.option;
configPara.$container.find('.jxfzoomy-thumb-box').css({
'width':option.smallBoxW
});
configPara.$container.find('.jxfzoomy-list-img li').css({
'width':option.smallListImgW,
'height':option.smallListImgH
});
configPara.$container.find('.jxfzoomy-list-img li div').css({
'width':option.smallListImgW,
'height':option.smallListImgH
});
configPara.$container.find('.jxfzoomy-list-img li img').css({
'max-width':option.smallListImgW,
'max-height':option.smallListImgH
});
var jqSmallListImg = configPara.$container.find('.jxfzoomy-list-img li');
var smallListImgSum = jqSmallListImg.length;
if(smallListImgSum * (option.smallListImgW+2+5) > option.smallBoxW){//+2为边框+5为缩略图间距
configPara.$container.find('.jxfzoomy-thumb-box .jxfzoomy-thumb-ct').css({
'margin-left':'15px',
'width':option.smallBoxW - 35
});
}else{
//将所有缩略图居中显示 +2为边框+5为缩略图间距
var firstImgMarginleft = (option.smallBoxW - smallListImgSum*(option.smallListImgW+2+5) + 5)/2;
$(jqSmallListImg[0]).css('margin-left',firstImgMarginleft);
//隐藏所有箭头
configPara.$container.find('.jxfzoomy-thumb-box .jxfzoomy-thumb-lt,.jxfzoomy-thumb-box .jxfzoomy-thumb-gt').hide();
}
},
initMask : function(){
var configPara = $.fn.jxfZoomy.methods.configPara;
var option = $.fn.jxfZoomy.option;
var $bigImgW = configPara.$bigImg.width();
var $bigImgH = configPara.$bigImg.height();
configPara.$mask.css({
'width': configPara.$smallImg.width() * option.bigBoxW / $bigImgW,
'height': configPara.$smallImg.height() * option.bigBoxH / $bigImgH
});
},
bindEvent:function(){
var configPara = $.fn.jxfZoomy.methods.configPara;
var option = $.fn.jxfZoomy.option;
var maskLeft = 0;
var maskTop = 0;
//大图和小图的倍数关系
configPara.$container.find('.jxfzoomy-small-box-move').on('mouseenter', function (event) {
configPara.$mask.css('display', 'block');
configPara.$bigBox.css({
'width': option.bigBoxW,
'height': option.bigBoxH,
'border-width':1
});
});
configPara.$container.find('.jxfzoomy-small-box-move').on('mouseleave', function (event) {
configPara.$mask.css('display', 'none');
// configPara.$bigBox.css('display', 'none');
configPara.$bigBox.css({
'width': 0,
'height': 0,
'border-width':0
});
});
//注册最下面的小缩略图点击事件
configPara.$container.find('.jxfzoomy-list-img li').on('click', function (event) {
configPara.$container.find('.jxfzoomy-active').removeClass('jxfzoomy-active');
$(this).addClass('jxfzoomy-active');
configPara.$smallImg.attr('src',$(this).attr('data-smallImg')); //$(this).data().smallimg IE8取不到值,郁闷
configPara.$container.find('.jxfzoomy-big-img').attr('src',$(this).attr('data-bigImg'));
$.fn.jxfZoomy.methods.initSmallImg();
$.fn.jxfZoomy.methods.initMask();
});
//注册左右箭头的点击事件
var jqul = configPara.$container.find('.jxfzoomy-thumb-box .jxfzoomy-thumb-ct ul');
configPara.$container.find('.jxfzoomy-thumb-box .jxfzoomy-thumb-lt').on('click', function (event) {
jqul.stop().animate({'margin-left':'+='+ option.moveSpeed},200,function(){
if(parseInt(jqul.css('margin-left'),10) > 0){
jqul.animate({'margin-left':'0'},200);
}
});
});
var jqSmallListImg = configPara.$container.find('.jxfzoomy-list-img li');
var smallListImgSum = jqSmallListImg.length;
var minLeft = -1 * (smallListImgSum*(option.smallListImgW+2+5) - configPara.$container.find('.jxfzoomy-thumb-box .jxfzoomy-thumb-ct').width());
configPara.$container.find('.jxfzoomy-thumb-box .jxfzoomy-thumb-gt').on('click', function (event) {
jqul.stop().animate({'margin-left':'-='+ option.moveSpeed},200,function(){
if(parseInt(jqul.css('margin-left'),10) < minLeft){
jqul.animate({'margin-left':minLeft},200);
}
});
});
},
bindEvent2:function(){
var configPara = $.fn.jxfZoomy.methods.configPara;
var $bigImgW = configPara.$bigImg.width();
var $bigImgH = configPara.$bigImg.height();
configPara.$container.find('.jxfzoomy-small-box-move').unbind("mousemove");
configPara.$container.find('.jxfzoomy-small-box-move').on('mousemove', function (event) {
maskLeft = event.clientX - $(this).offset().left - configPara.$mask.width() / 2
maskTop = event.clientY - $(this).offset().top - configPara.$mask.height() / 2
if (maskLeft > ($(this).width() - configPara.$mask.width())) {
maskLeft = $(this).width() - configPara.$mask.width();
} else if (maskLeft < 0) {
maskLeft = 0;
}
if (maskTop > ($(this).height() - configPara.$mask.height())) {
maskTop = $(this).height() - configPara.$mask.height();
} else if (maskTop < 0) {
maskTop = 0;
}
configPara.$mask.css({
'left': maskLeft,
'top': maskTop
});
configPara.$bigImg.css({
'left': -maskLeft * $bigImgW / configPara.$smallImg.width(),
'top': -maskTop * $bigImgH / configPara.$smallImg.height()
});
});
}
};
})(jQuery);
index.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>放大镜</title>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jxfzoomy.js"></script>
<link rel="stylesheet" href="css/jxfzoomy.css">
<script>
//页面加载完毕后执行
$(document).ready(function () {
$('#container').jxfZoomy({
smallBoxW: 350,//小图框的宽 单位px 默认250px
smallBoxH: 250,//小图框的高 单位px 默认250px
bigBoxW: 450, //大图放大镜框的宽 单位px 默认350px
bigBoxH: 350, //大图放大镜框的高 单位px 默认350px
smallListImgW:80,//缩略图的宽 单位px 默认50px
smallListImgH:50,//缩略图的高 单位px 默认50px
moveSpeed:100 //缩略图点击左右方向键移动的速度 单位px 默认50px
});
});
</script>
</head>
<body>
<!-- 基本格式 -->
<div id="container" class='jxfzoomy-container'>
<div class="jxfzoomy-thumb-box">
<div class="jxfzoomy-thumb-ct">
<ul class='jxfzoomy-list-img jxfzoomy-clearfix'>
<!-- 有jxfzoomy-active为当前选中的图片 data-smallImg属性为小图路径
data-bigImg属性为大图路径 <li>标签内部的img为缩略图 -->
<li class='jxfzoomy-active' data-smallImg="images/0_min.jpg" data-bigImg="images/0_big.jpg">
<div>
<img src="images/0_thumb.jpg" alt="">
</div>
</li>
<li data-smallImg="images/1_min.jpg" data-bigImg="images/1_big.jpg">
<div>
<img src="images/1_thumb.jpg" alt="">
</div>
</li>
<li data-smallImg="images/2_min.jpg" data-bigImg="images/2_big.jpg">
<div>
<img src="images/2_thumb.jpg" alt="">
</div>
</li>
<li data-smallImg="images/3_min.jpg" data-bigImg="images/3_big.jpg">
<div>
<img src="images/3_thumb.jpg" alt="">
</div>
</li>
<li data-smallImg="images/4_min.jpg" data-bigImg="images/4_big.jpg">
<div>
<img src="images/4_thumb.jpg" alt="">
</div>
</li>
<li data-smallImg="images/5_min.jpg" data-bigImg="images/5_big.jpg">
<div>
<img src="images/5_thumb.jpg" alt="">
</div>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
本文固定链接:https://blog.csdn.net/u011135729/article/details/79642425