                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /鼠标悬浮效果

页面加载完:1鼠标首次移入时,图片闪亮一下,接着才正常;2每次移入时,触发两次mouseover,一次mouseout,

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css" media="screen">
        * {
            margin: 0;
            padding: 0;
        }
        #wrap {
            position: relative;
            margin: 20px auto;
            width: 1000px;
            height: 600px;
            background-color: #666666;
        }
        #wrap .hot {
            position: absolute;
            width: 30px;
            height: 30px;
        }
        #hot-1 {
            top: 123px;
            left: 566px;
        }
        #hot-2 {
            top: 56px;
            left: 236px;
        }
        #hot-3 {
            top: 456px;
            left: 789px;
        }
        .hot .a-hot ,.hot .a-hot .hot-icon {
            display: inline-block;
            width: 100%;
            height: 100%;
        }
        .hot .a-hot .hot-icon {
            border-radius: 50%;
            background-color: red;
            -webkit-animation: hot-animate 1s infinite;
            animation: hot-animate 1s infinite;
        }
        .hot .a-hot .hot-img {
            display: none;
            position: absolute;
            width: 100px;
            height: 100px;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
        }
        #hot-img1 {
            background-color: yellow;
        }#hot-img2 {
            background-color: blue;
        }
        #hot-img3 {
            background-color: green;
        }
        @keyframes hot-animate {
            0% {
                -webkit-transform: scale(0.1);
                -ms-transform: scale(0.1);
                -o-transform: scale(0.1);
                transform: scale(0.1);
            }
            25% {
                -webkit-transform: scale(0.6);
                -ms-transform: scale(0.6);
                -o-transform: scale(0.6);
                transform: scale(0.6);
            }
            50% {
                -webkit-transform: scale(0.9);
                -ms-transform: scale(0.9);
                -o-transform: scale(0.9);
                transform: scale(0.9);
            }
            75% {
                -webkit-transform: scale(0.6);
                -ms-transform: scale(0.6);
                -o-transform: scale(0.6);
                transform: scale(0.6);
            }
            100% {
                -webkit-transform: scale(0.1);
                -ms-transform: scale(0.1);
                -o-transform: scale(0.1);
                transform: scale(0.1);
            }
        }
        @-webkit-keyframes hot-animate {
            0% {
                -webkit-transform: scale(0.1);
                -ms-transform: scale(0.1);
                -o-transform: scale(0.1);
                transform: scale(0.1);
            }
            25% {
                -webkit-transform: scale(0.6);
                -ms-transform: scale(0.6);
                -o-transform: scale(0.6);
                transform: scale(0.6);
            }
            50% {
                -webkit-transform: scale(0.9);
                -ms-transform: scale(0.9);
                -o-transform: scale(0.9);
                transform: scale(0.9);
            }
            75% {
                -webkit-transform: scale(0.6);
                -ms-transform: scale(0.6);
                -o-transform: scale(0.6);
                transform: scale(0.6);
            }
            100% {
                -webkit-transform: scale(0.1);
                -ms-transform: scale(0.1);
                -o-transform: scale(0.1);
                transform: scale(0.1);
            }
        }
    </style>
</head>
<body>
    鼠标移入的时候,会触发两次mouseover,一次mouseout,而且页面加载完首次移入时,图片会闪亮一下,接着才正常
    <div id="wrap">
        <div id="hot-1">
            <a href="">
                <span></span>
                <div id="hot-img1"></div>
            </a>
        </div>
        <div id="hot-2">
            <a href="http://www.baidu.com">
                <span></span>
                <div id="hot-img2"></div>
            </a>
        </div>
        <div id="hot-3">
            <a href="">
                <span></span>
                <div id="hot-img3"></div>
            </a>
        </div>
    </div>
    <script type="text/javascript" src="script.js"></script>
</body>
</html>

周末00

2016-07-09

源自：鼠标悬浮效果

关注问题我要回答

1278

操作

收起

1 回答

周末00 提问者
2016-07-09

(function(win){
function hotSpot(){
        this.init();
    }
    hotSpot.prototype = {
        init:function(){
            this.onHotspotHover();
        },
        onHotspotHover:function(){
            var a_hot = this.getClass('a-hot'),
                // 这里的this表示的是,调用原型链下的属性和方法时需要添加的
                that = this;
            for (var i = 0; i < a_hot.length; i++) {
                // 将遍历元素赋值一个变量,并给其设置属性值,以备doTransform函数里的定时器使用
                var curImg = that.getClass('hot-img',a_hot[i])[0];
                curImg.timer = null;
                curImg.alpha = 0;
                a_hot[i].onmouseover = function(){
                    // 此处this表示当前元素对象
                    // 控制台输出测试
                    console.log(this);
                    that.doTransform(that.getClass('hot-img',this)[0],100);
                    that.getClass('hot-icon',this)[0].style.display = 'none';
                }
                a_hot[i].onmouseout = function(){
                    // 控制台输出测试
                    console.log(that.getClass('hot-img',this)[0]);
                    that.doTransform(that.getClass('hot-img',this)[0],0);
                    that.getClass('hot-icon',this)[0].style.display = 'block';
                }
            }
        },
        doTransform:function(me,alpha){
            // 给定时器里的me.alpha设定变化速度,来改变透明度
            var times = 0;
            if (alpha == 100) {
                times = 5;
            } else {
                times = -5;
            }
            // 使当前元素显示
            me.style.display = 'block';
            // 每次切换鼠标状态都会触发定时器,所以要清除
            clearInterval(me.timer);
            me.timer = setInterval(function(){
                // 判断传入的值0和100是否符合当前条件,me.alpha在第一次鼠标移入时,为0,上边已经定义过;以后每次都是0和100之间循环;
                if (me.alpha == alpha) {
                    // 当透明度为100时,就不在执行定时器了,要清除
                    clearInterval(me.timer);
                    // 移入后,me.alpha最终为100,当移出时传入的alpha为0,因为元素不能直接消失,所以得先降低透明度为0,即需要两次if判断,来使其消失
                    if (alpha == 0) {
                        me.style.display = 'none';
                    }
                } else {
                    me.alpha += times;
                    me.style.opacity = me.alpha/100;
                    me.style.filter = 'alpha(opacity:'+me.alpha+')';
                }
            },60);
        },
        getClass:function(clsname,parent){
            if (document.getElementsByClassName) {
                // 这里别忘了parent||document
                return (parent||document).getElementsByClassName(clsname);
            } else {
                var nodes = (parent||document).getElementsByTagName('*'),
                    eles = [],
                    i,
                    j,
                    currNode,
                    clsNames,
                    clsLength;
                for (i = 0; i < nodes.length; i++) {
                    currNode = nodes[i];
                    clsNames = currNode.className.split(' ');
                    clsLength = clsNames.length;
                    for (j = 0; j < clsLength; j++) {
                        if (clsNames[j] == clsname) {
                            eles.push(currNode);
                            // break跳出当前循环,继续执行外层循环
                            break;
                        }
                    }
                }
                return eles;
            }
        }
    }
    new hotSpot();
})(window);