04-拡大鏡特効

HTML構造

    

        ![](images/pic001.jpg)
        
    
    

        ![](images/pic01.jpg)
    
    

        ![](images/pic0001.jpg)
        ![](images/pic0002.jpg)
        ![](images/pic0003.jpg)
    

Cssスタイル

Jsコード

        window.onload = function () {
            // 1.  
            var box = document.getElementById('box');

            var smallbox = box.children[0];
            var mask = smallbox.children[1];
            var bigBox = box.children[1];
            var bigImg = bigBox.children[0];
            var list = box.children[2];
            var allLis = list.children;

            // 2.  
            smallbox.onmouseover = function () {
                // 2.1  
                mask.style.display = 'block';
                bigBox.style.display = 'block';

                // 2.2  
                smallbox.onmousemove = function (event) {
                    var event = event || window.event;
                    var pointX = event.pageX - box.offsetLeft - mask.offsetWidth / 2;
                    var pointY = event.pageY - box.offsetTop - mask.offsetHeight / 2;

                    // 2.3  

                    if (pointX < 0) {
                        pointX = 0;
                    }
                    else if (pointX >= box.offsetWidth - mask.offsetWidth) {
                        pointX = box.offsetWidth - mask.offsetWidth - 1;
                    }

                    if (pointY < 0) {
                        pointY = 0;
                    }
                    else if (pointY >= box.offsetHeight - mask.offsetHeight) {
                        pointY = box.offsetHeight - mask.offsetHeight - 1;
                    }

                    // 2.4  
                    mask.style.left = pointX + 'px';
                    mask.style.top = pointY + 'px';

                    // 2.5  
                    // smallX / bigX  = smallBox.width /  
                    // bigX = smallX / (smallBox.width /  )
                    bigImg.style.left = - pointX / (smallbox.offsetWidth / bigBox.offsetWidth) + 'px';
                    bigImg.style.top = - pointY / (smallbox.offsetHeight / bigBox.offsetHeight) + 'px';

                }

                //  
                smallbox.onmouseout = function () {
                    mask.style.display = 'none';
                    bigBox.style.display = 'none';
                }
            }

            // 3.  

            for (var i = 0; i < allLis.length; i ++) {
                (function (index) {
                    var img = allLis[i];
                    img.onmouseover = function () {
                        bigImg.src = 'images/pic0' + index + '.jpg'
                        smallbox.children[0].src = 'images/pic00' + index + '.jpg';
                    }
                }(i + 1));
            }
        }

特効展示