/**
* Created by Administrator on 2018/1/4 0004.
*/
/**
* Created by Administrator on 2018/1/4.
*/
/* 放大镜*/
一个大盒子id= Box 中放一个小盒子id= smallBox (放一张图片) 一个大盒子id=bigBox(放一张图片)
ul 用来小图片切换
(function($){
$.fn.fangdajing =function() {
var smallBox = this.find('#smallBox');
var bigBox = this.find('#bigBox');
var smImg = this.find('#smImg');
var Li = this.find('#smImg').find('li');
/*var Height=*/
var img = Li.find('img');
/*划过切换图片*/
Li.hover(function () {
$(this).addClass('on').siblings().removeClass('on');
var a = $(this).find('img').attr('src');
smallBox.find('img').attr('src',a);
bigBox.find('img').attr('src',a);
});
/*放大镜
小盒子*/
smallBox.append('<div></div>');
var Width=smallBox.find('div').width()+2;
var Height=smallBox.find('div').height()+2;
smallBox.mousemove(function (e) {
bigBox.css('display','block');
var top = smallBox.get(0).getBoundingClientRect().top;
var left = smallBox.get(0).getBoundingClientRect().left;
/* 绝对值*/
var smallx = e.clientX-left;
var smally = e.clientY-top;
var x = smallx-Width/2;
var y = smally-Height/2;
console.log(x);
console.log(y);
var x1=x*2;
var y1=y*2;
/*框位移不出去*/
if (x<0){
x=0;
x1=0
}else if (x>smallBox.width()-Width){
x=smallBox.width()-Width;
x1=smallBox.width();
}
if (y<0){
y=0;
y1=0
}else if (y>smallBox.height()-Height){
y=smallBox.height()-Height;
y1=smallBox.height();
}
/*框移除消失*/
smallBox.find('div').css({left:x+ 'px',top:y+'px'});
bigBox.find('img').css({left:-x1 +'px',top:-y1+'px'})
}).mouseout(function(){
bigBox.css('display','none');
});
}
})(jQuery);
$("#Box").fangdajing();