简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - “Uncaught SyntaxError: Unexpected identifier” 报错的原因？
PHPz
PHPz 2017-04-11 12:24:20
0
2
460

一个简单的js鼠标mouseover悬浮效果程序，基本思路就是利用setTimeInterval控制opacity的变换，代码检查了，就是找不错在哪里啊运行不了，显示“Uncaught SyntaxError: Unexpected identifier”

大神帮忙检查下代码，指点一下。
github代码包：鼠标悬浮效果
https://github.com/AlexZ33/ja...鼠标悬浮效果

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标悬浮效果</title>
    <link rel="stylesheet" type="text/css" href="css/hover.css">
</head> 
<!-- <body onmousedown="show_coords(event)">
 -->    
<body>

 <p id="main">
        <img id="mapBg" src="img/map.png" usemap="#map"></img>
        <map name="map" id="map">
        <area href="" alt="" target="" shape="circ" media="" type="">
         </map>
        
        <p class="hotSpot" id="xwhHotSpot">
            <a href="#" class="hotSpotBtn">
                <span class="dot" style="display: block;"></span>
                <p class="detailImg"  id="xwh" style="display:none;position: relative;">
                    <img src="img/xwh.jpg" style="position: absolute;top: -120px;left:-180px" alt=""></img>
                </p>
            </a>
        </p>
        
        <p class="hotSpot" id="njzHotSpot">
            <a href="#" class="hotSpotBtn">
                <span class="dot" style="display: block;"></span>
                <p class="detailImg" id="njz" style="display:none;position: relative;">
                    <img src="img/njz.jpg" alt="" "></img>
                </p>
            </a>
        </p>
    </p>


    <!-- <script>
    function show_coords(event){
        x=event.clientX;
        y=event.clientY;
        console.log("X坐标:"+x+",Y坐标"+y);
    }
    </script> -->


 <script src="js/hover.js"></script>

    
</body>
</html>

css

html,body{
    padding: 0;
    margin: 0;
}

#mapBg{
    width: ;
}

.dot{
            height: 50px;
            width:50px;
            background: red;
            border-radius: 50%;
            animation: bling 0.6s infinite ;
            -webkit-animation: bling 0.6s infinite ;
            -o-animation: bling 0.6s infinite ;
            -moz-animation: bling 0.6s infinite ;
        }
        @keyframes bling{
            from{transform:scale(0.0);}
            to{transform:scale(1.0);opacity: 1;}
        }
        @-webkit-keyframes bling{
            from{-webkit-transform:scale(0.0);}
            to{-webkit-transform:scale(1.0);opacity: 1;}
        }

        
.hotSpot{
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
    
}
#xwhHotSpot{
    top:520px;
    left: 600px;
}

#njzHotSpot{
    top:255px;
    left:528px;

}

js

//匿名自执行函数来封装
//基本思路就是利用setTimeInterval控制opacity的变换

;(function(window,undefined){
    function Hotspot(){
        this.init();
    }

//在原型上扩展init()方法  
//#对于原型和构造函数的理解多看《javascript高级程序语言》第六章#

    Hotspot.prototype ={
        init:function(){
            this.onHotspotHover();


        },
        //给热点绑定事件
        onHotspotHover:function(){
            var hotSpots =this.$$('hotSpot'),//得到页面上所有拥有hotSpot样式的元素
                len =hotSports.length,
                i,
                that=this,
                currDetailImg;
                for ( i = 0; i < len; i++) {
                    currDetailImg= that.$$('detailImg',hotSports[i])[0];
                    currDetailImg.timer= null;
                    currDetailImg.alpha=0;
                    hotSports[i].onmouseover=function(e){
                        that.doTransform(that.$$('detailImg',this[0]),100);
                        that.$$('dot',this)[0].style.display='none';//闪烁红点在mouseover时候隐藏

                    }
                    hotSports[i].onmouseout=function(e){
                        that.doTransform(that.$$('detailImg',this[0]),0);
                        that.$$('dot',this)[0].style.display='block';
                    }
                }

        }

        //doTransform()动画方法
        //实现元素透明度缓冲效果的变化
        
        doTransform:function(me,alpha){
            var times=0;
            if (alpha==100) {
                times=5;
            }else{
               times=-5;
            }

            me.style.display="block";
            clearInterval(me.timer);
            me.timer=setInterval(function(){
                if (me.alpha==alpha) {
                    clearInterval(me.timer);
                    if (alpha==0) {        
                        me.style.display='none';
                    }
                }else{
                    me.alpha+=times;
                    me.style.opacity=me.alpha/100;
                    me.style.filter='alpha(opacity:'+me.alpha+')';//兼容老ie浏览器
                }                }
            },30);

        },



        $$: function(clsName,ele){
            //如果当前浏览器支持原生的getElementsByClaasName方法，就用这个方法实现$$
            if (document.getElementsByClassName) {

                return(ele || document.getElementsByClassName(clsName));
            }else{
                //不支持的时候
                //通过getElementsByTagName方法得到页面上所有标签
                var nodes=(ele || document).getElementsByTagName('*'),
                    eles=[],//用这个数组存放筛选出的节点
                    len=nodes.length,
                    i,
                    j,
                    currrNode,
                    clsNames,
                    clsLen;
                for (i = 0; i < len; i++) {
                    currrNode=nodes[i];
                    clsNames= currrNode.className.split(' ');//得到当前元素上所有样式的名字
                    clsLen = clsNames.length;
                    // 通过for循环依次判断与传入的样式名字是否相等
                    for (j = 0; j<clsLen; j++) {
                        if(clsNames[j]==clsName){
                            eles.push(currNode);//如果相等就（就是我们需要找的元素），把它放进eles数组里面，并退出循环
                            break;
                        }
                    }
                }
                return eles;
            }
        }
    }
    new Hotspot();
})(window);"
PHPz
PHPz

学习是最好的投资！

reply all(2)
小葫芦
小葫芦2017-04-11 12:26:20 2 floor

你起服务器了么？

Like +0
Add Reply
大家讲道理
大家讲道理2017-04-11 12:26:20 1 floor

onHotspotHover完结后没有逗号；

onHotspotHover里面的hotSports拼写错误；

doTransform的setInterval的else里多了一个};

ps: lint是个好东西。。。

Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！