当前位置: 萬仟网 > IT编程>开发语言>JavaScript > 映彩衣的js随笔(js图片切换效果)

映彩衣的js随笔(js图片切换效果)

2020年05月22日  | 萬仟网IT编程  | 我要评论

一个合作伙伴的页面效果,鼠标放到 图片上要变成彩色,本来就是一个简单的换色效果,但问题是,图片的高度和宽度不是一样大的。

这就比较麻烦了。如果把图片放到背景里就要一个一个的去定义图片外面的容器<a></a>,要多写很多层叠样式,太麻烦,最后我决定,把图片的高度的一一半,和图片的宽度赋值给它外面的容器<a></a>

然后把图片做了如下处理:

当鼠标移动到图片上让他向上移动30个像素,移开则回到原位。
html代码如下:

css如下:(因为考虑到未来换肤所以颜色和结构分开来写)

javascript如下:

如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复

相关文章:

验证码:
Copyright © 2020  萬仟网 保留所有权利. 粤ICP备17035492号-1
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com