鼠标光标移动到图片上切换到另外一张图片的js特效是怎么做的？

就是把鼠标光标移到图片上去的时候，图片却变成另一张图，这类图片特效尤其是在网上商城上多见，是用什么代码实现的呢？

0个评论

1个牛币 js js特效鼠标光标图片切换图片特效

所有回答列表(4)

最代码官方 LV168 2016年3月17日

js的onmouseover事件然后改变img的src即可

tangloong LV4 2016年3月23日

你试试这一段代码，很粗糙的实现；鼠标接触改变，移走复原

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>无标题文档</title>
</head>
<style type = "text/css">
body{margin:10px;}
img{width:30%;height:20%}
</s tyle>
<script type="text/javascript">
function over(){
   var s= document.getElementById("img");
   s.src="http://d.hiphotos.baidu.com/zhidao/pic/item/4ec2d5628535e5dd5c955af875c6a7efce1b6258.jpg"
   }
function out(){
   var s= document.getElementById("img");
   s.src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1458700622&di=a71bc229000f7b4e4c3ed54691a38c86&src=http://cdn.duitang.com/uploads/item/201209/27/20120927174050_HjNYf.jpeg"
   }
</script>

mxxyxk LV2 2016年3月25日

我一般是用jquery实现的

HTML语句

jquery语句

$('#idName').hover(function(){

$('#idname').attr("src","这里写新的图片地址，格式是src");

function(){

$('#idname').attr("src","这里写原来图片地址，格式是src");

}

);

这样鼠标移上去就是新的图片，移开就是原来的图片

倘若我是美女 LV2 2016年3月30日

<html>
<head>
<script type="text/javascript">
function mouseOver()
{
document.b1.src ="/i/eg_mouse.jpg"
}
function mouseOut()
{
document.b1.src ="/i/eg_mouse2.jpg"
}
</script>
</head>

最热评论
最新问答