鼠标悬停特效代码怎么写，鼠标放在小图片上旁边显示一张大图片？

JavaScript012

鼠标悬停特效代码怎么写，鼠标放在小图片上旁边显示一张大图片？,第1张

代码有bug，修改后如下：

需要注意，拷贝下面这段代码，保存为 html后缀名的文件；需要自己在相同的目录下，放置两张图片，小图片.jpg    大图片.jpg

效果如下图：当鼠标悬停在小图片上面的时候，会显示大图片；鼠标移出，隐藏大图片。

问题：定位需要读者自己去实现一下吧，偷懒了。感谢楼上分享!

<!doctype html>

<html>

<head>

<meta charset=utf-8>

</head>

<body>

你要显示特效的html  

<img src="小图片.jpg" width="200px" height="200px" id="littleimg" onmouseout="hoverHiddendiv()" onmouseenter="hoverShowDiv()" />

<div style="width:200pxheight:80pxborder:1px solide #aaccffdisplay:none" id="divHover" >

大图片显示如下

<img src="大图片.jpg" width="500px" height="300px" id="bigimg" />

</div>

<script type="text/javascript">

let divHover = document.getElementById("divHover")

        function hoverShowDiv() {

        console.log("显示大图片")

            divHover.style.display = "block"

            divHover.style.top = document.getElementById("littleimg").style.top + 10

            divHover.style.left = document.getElementById("littleimg").style.left + 10

        }

        function hoverHiddendiv() {

        console.log("显示小图片")

            divHover.style.display = "none"

        }

</script>

</body>

</html>

第一：js进行鼠标悬停事件来处理DOM实际上是不合理的。对于界面交互上能通过css处理的事件就不要用js来处理；

第二：恰好css对于鼠标悬停是有对应的选择器及其处理；

处理方法：如图A：

假设A的id为a，css代码如下：

#a{

    width:100px

    height:36px

    float:left

}

//对于位置的固定可以自行选择处理,当前用float固定。

#a:hover{

    width:200px

}

结果将会如你图中所需要的完成。

如必须用JS处理的话，代码如下：

//既定a的样式已明确：

//html代码:

<span id='a' onmouseover="fc1(this)"

 onmouseout="fc2(this)"></span>

<script>

    function fc1(node){

        node.style.width = '200px'

    }

    function fc2(node){

        node.style.width = '100px'

    }

</script>

var ismouseover = false //控制是否换图 ---增加的

var number = 3//总图片数量

var num = number-1

var speed = 3000//间隔时间

function amouseover(){

    ismouseover = true

}

function amouseout(){

    ismouseover = false

}

.

.

.

function imgSwitch(){

    if(!ismouseover){

        var imgNow = document.getElementById("switch")

        var iNow = Math.floor(Math.random()*num)

        imgNow.src = imgDyn[iNow][0]

        imgNow.parentNode.href = imgDyn[iNow][1]

        imgDyn.splice(iNow,1)

        if(num>0){

          num = num-1  

        }else{

          num = number -1  

          imgInit()  

        }

    }

    setTimeout(imgSwitch,speed)

}

.

.

.

<a onmouseover='amouseover()' onmouseout='amouseout' href="#" target="_blank"><img id="switch" src="" width="100%"></a>