js如何实现鼠标经过图片的切换_IT百科

您好，这样的：

1、<html>

<head>

<title>Jquery deal images</title>

<!--

//这里是JS代码，下面豆芽会写上

//-->

</script>

</head>

<body>

</body>

</html>

2、

$(document).ready(function(){

var newImage = new Image()//预载入图片

var oldImage = $('img').attr('src')

newImage.src = './images/img03.jpg'

$('img').hover(function(){ //鼠标滑过图片切换

$('img').attr('src',newImage.src)

function(){

$('img').attr('src',oldImage)

})

这里大家迷惑的是为什么要预载入图片呢？因为在网站上不像我们本地调试，图片下载这么快。如果是在互联网上，当鼠标滑过将要切换的图片时，替换的图片还要临时下载，加载图片的过程是比较慢的。所以我们预载入图片可以解决这个问题。

可以用js事件“onmouseover”和“onmouseout”来实现。

1、新建html文档，在body标签中添加图片标签，为这个标签设置“id”属性，然后设置图片的默认显示大小css属性：

2、添加“onmouseover”js事件，首先使用“document.getElementById”获取到图片标签，然后定义鼠标移动到图片上时发生的事件，这时图片将会放大：

3、添加“onmouseout”js事件，首先获取图片标签，然后定义鼠标移开图片时发生的事件，这时图片将会缩小：

//html

onmouseover=mouseOver() 换成 onmouseover = mouseOver(this)

onmouseout=mouseOut() 换成 onmouseout=mouseOut(this)

//js 更改透明度即可，不需要换图片

function mouseOver(obj){

obj.style.opacity = 0.5

}

function mouseOut(obj){

obj.style.opacity = 1

}

欢迎分享，转载请注明来源：内存溢出

js如何实现鼠标经过图片的切换