映彩衣的js随笔(js图片切换效果)
程序员文章站
2022-04-06 20:24:27
一个合作伙伴的页面效果，鼠标放到 图片上要变成彩色，本来就是一个简单的换色效果，但问题是，图片的高度和宽度不是一样大的。这就比较麻烦了。如果把图片放到背景里就要一个一个的去定义图片外面的容器
一个合作伙伴的页面效果，鼠标放到 图片上要变成彩色，本来就是一个简单的换色效果，但问题是，图片的高度和宽度不是一样大的。
这就比较麻烦了。如果把图片放到背景里就要一个一个的去定义图片外面的容器<a></a>，要多写很多层叠样式，太麻烦，最后我决定，把图片的高度的一一半，和图片的宽度赋值给它外面的容器<a></a>
然后把图片做了如下处理：
当鼠标移动到图片上让他向上移动30个像素，移开则回到原位。
html代码如下：
css如下：（因为考虑到未来换肤所以颜色和结构分开来写）
javascript如下：