京东店铺装修中,鼠标经过图片切换成另一张图片的代码是什么?

2025-03-13 23:51:37
推荐回答(2个)
回答1:

可以用CSS吗,可以的话,你直接定义一个容器的大小,设置溢出隐藏,

图片,分为上下或左右两部分

下面以左右两部分为例

 

左边部分是你默认显示的图片,右边的为鼠标经过后显示的图片,容器大小为默认显示图片的大小(溢出隐藏:这样就可以预先把右边的一办图片隐藏起来了,)

鼠标经过后,加上margin-left:-默认显示的宽度px;【前面有个减号,不要漏了啊】

这样就可以实现了

参考



a{width:135px; height:129px; display:block; overflow:hidden;}

a,img{border:none;}

a:hover img{margin-left:-135px;}



http://www.baidu.com/img/bdlogo.gif
" />

回答2:

你可以用jquery里的animate这个函数来作动画
样式方面就不多说了吧,
我先讲讲思路吧,
这里有两个动作,一个是鼠标经过时(hover事件)
第二张图片出来(可以从左往右移动,从上向下等等)
第二个动作就是鼠标离开时(out事件),
第二张图片隐藏,第一张图片显示。
原理就是这么简单,如果你不了解jquery的话,
你可以看看帮助文档。