一个简单的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);"
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
你起服务器了么？
onHotspotHover完结后没有逗号；onHotspotHover里面的hotSports拼写错误；doTransform的setInterval的else里多了一个};ps: lint是个好东西。。。