带放大镜加上下切换缩略图功能

浏览：990次- 评论：0次- 发布时间：2017-12-22

Html

Css

body {
	position:relative;
}
* {
	margin:0;
	padding:0;
	list-style:none;
}
.wrapper {
	position:relative;
	border:1px solid #333;
	padding:20px;
	margin:10px 10px 10px;
	width:600px;
	height:350px;
}
.gotop {
	cursor:pointer;
	display:block;
	margin-left:9px;
}
.gobottom {
	cursor:pointer;
	display:block;
	margin-left:9px;
}
.wrapper .smallBox {
	height:350px;
	width:92px;
	float:left;
}
.wrapper .smallBox li {
	width:72px;
	margin-bottom:5px;
	cursor:pointer;
}
.wrapper .smallBox li img {
	cursor:pointer;
	display:block;
	width:68px;
	padding:1px;
	border:1px solid #ccc;
	height:52px;
}
.wrapper #Box {
	height:320px;
	width:500px;
	position:relative;
	border:1px solid gray;
	float:left;
	cursor:crosshair;
}
.wrapper #bigBox {
	height:300px;
	width:300px;
	position:absolute;
	top:20px;
	left:640px;
	overflow:hidden;
	display:none;
	border:1px solid gray;
}
#Box img {
	position:relative;
	width:100%;
	height:100%;
	/*  height:300px;
	width:400px;
	*/
}
#Box #lay {
	background:#fff;
	border:1px solid gray;
	position:absolute;
	top:0;
	left:0;
	opacity:0.5;
	display:none;
	filter:alpha(opacity=50);
}
.box_wrapper {
	height:300px;
	margin:10px;
	overflow:hidden;
	position:relative
}
.box_wrapper ul {
	margin-top:0px;
	position:relative;
	transition:all 0.8s ease-in-out;
}

var magnifier = $('#lay'),
    bigBox = $('#bigBox'),
    scale = 3,
    boxWidth = $('#Box').width(),
    boxHeight = $('#Box').height(),
    magW = parseInt(boxWidth / scale),
    magH = parseInt(boxHeight / scale);

$('#Box').mouseover(function() {
    magnifier.css({
            'display': 'block',
            'height': magH,
            'width': magW
        }),
        bigBox.css({
            'display': 'block',
            'height': magH * scale,
            'width': magW * scale
        })
});
$('#Box').mouseout(function() {
    magnifier.css({
            'display': 'none'
        }),
        bigBox.css({
            'display': 'none'
        })
});
$('#Box').mousemove(function(e, obj) {
    var e = e,
        obj = $('#Box'),
        bigBoxW = boxWidth * scale + 'px',
        bigBoxH = boxHeight * scale + 'px',
        pageX = parseInt(e.pageX - obj.offset().left),
        pageY = parseInt(e.pageY - obj.offset().top),
        pageMY = parseInt(pageY - magnifier.height() / 2),
        pageMX = parseInt(pageX - magnifier.width() / 2);

if (pageX < parseInt(magnifier.width() / 2)) {

pageMX = 0
    }
    if (pageMX >= obj.width() - magnifier.width()) {
        pageMX = obj.width() - magnifier.width()
    }
    if (pageMY < 0) {
        pageMY = 0
    }
    if (pageMY >= obj.height() - magnifier.height()) {

pageMY = obj.height() - magnifier.height()
    }

magnifier.css({

'top': pageMY + 'px',
            'left': pageMX + 'px'

}),

$(bigBox).find('img').css({
            'height': bigBoxH,
            'width': bigBoxW,
            'display': 'block',
            'margin-left': pageMX * (-1) * scale,
            'margin-top': pageMY * (-1) * scale

});

$('li').click(function() {

var src = $(this).find('img').attr('src');
    $('#Box').find('img').attr('src', src);
    $('#bigBox').find('img').attr('src', src);

});

var len = $('li').length,
    multiple = 5,
    iMax = parseInt(len / multiple),
    liH = $('li').height(),
    preTop = multiple * liH + multiple * 5;
$('.gobottom').mouseover(function() {
    $(this).attr('src', 'img/gobottom2.gif');
});
$('.gobottom').mouseout(function() {
    $(this).attr('src', 'img/gobottom.gif');
})
var i = 0;
var margT1 = $('ul').offset().top;
$('.gobottom').click(function() {
    var margT = $('ul').offset().top;
    if (-(margT - margT1 - preTop) <= iMax * preTop) {

$('ul').css({
            'margin-top': margT - margT1 - preTop + 'px'

})
    }
});
$('.gotop').mouseover(function() {
    $(this).attr('src', 'img/gotop2.gif');
});
$('.gotop').mouseout(function() {
    $(this).attr('src', 'img/gotop.gif');
})

$('.gotop').click(function() {
    var margT = $('ul').offset().top;

if (margT - margT1 + preTop <= 0) {

$('ul').css({
            'margin-top': margT - margT1 + preTop + 'px'
        })
    }
    if (margT - margT1 + preTop > 0) {

$('ul').css({
            'margin-top': 0 + 'px',

})
    }
})

↑上面代码改变，会自动显示代码结果

jQuery调用版本：1.11.3

立即下载收藏

积分说明：注册即送10牛币，每日签到可获得5牛币，成为VIP会员可永久免牛币下载！充值积分充值会员更多说明»

代码描述：js主图放大镜功能上下切换缩略图功能原创代码

最近要做一个项目，需要做这个放大镜，网上也有相关的DEMO，但是感觉都不是特别好，不好修改，于是重新写了一个。可随意改变DIV大小，img大小，margin的大小等等，只需要修改CSS即可，不需要修改js文件。对于新手应该有些帮助

讨论这个常用代码（0）回答他人问题或分享心得会奖励牛币

〒_〒居然一个评论都没有……

文明上网，理性发言！ 😉 阿里云幸运券，戳我领取