|
|
@@ -0,0 +1,38 @@
|
|
|
+window.onload = function () {
|
|
|
+ var previewImg = this.document.querySelector('.preview_img');
|
|
|
+ var mask = this.document.querySelector('#mask');
|
|
|
+ var big = this.document.querySelector('#big');
|
|
|
+ var bigImg = this.document.querySelector('#big_img');
|
|
|
+ previewImg.addEventListener('mouseover', function (e) {
|
|
|
+ mask.style.display = 'block';
|
|
|
+ big.style.display = 'block';
|
|
|
+ });
|
|
|
+ previewImg.addEventListener('mouseout', function () {
|
|
|
+ mask.style.display = 'none';
|
|
|
+ big.style.display = 'none';
|
|
|
+ });
|
|
|
+ previewImg.addEventListener('mousemove', function (e) {
|
|
|
+ var x = e.pageX - this.offsetLeft;
|
|
|
+ var y = e.pageY - this.offsetTop;
|
|
|
+ var mx = x - mask.offsetWidth / 2;
|
|
|
+ var my = y - mask.offsetHeight / 2;
|
|
|
+ var MaxWidth = this.offsetWidth - mask.offsetWidth;
|
|
|
+ var MaxHeight = this.offsetHeight - mask.offsetHeight;
|
|
|
+ if(mx < 0)mx = 0;
|
|
|
+ else if(mx > MaxWidth) {
|
|
|
+ mx = MaxWidth
|
|
|
+ }
|
|
|
+ if(my < 0)my = 0;
|
|
|
+ else if(my > MaxHeight) {
|
|
|
+ my = MaxHeight;
|
|
|
+ }
|
|
|
+ mask.style.left = mx + 'px';
|
|
|
+ mask.style.top = my + 'px';
|
|
|
+ var MaxWidth2 = big.offsetWidth - bigImg.offsetWidth;
|
|
|
+ var MaxHeight2 = big.offsetHeight - bigImg.offsetHeight;
|
|
|
+ var bx = mx * MaxWidth2 / MaxWidth;
|
|
|
+ var by = my * MaxHeight2 / MaxHeight;
|
|
|
+ bigImg.style.left = bx + 'px';
|
|
|
+ bigImg.style.top = by + 'px';
|
|
|
+ })
|
|
|
+}
|
Cathy