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

首页 > 网络编程 > JavaScript > 网页特效 > 图象特效 更新日期: 2016-02-17
最近写的一个关于图片切换的js,拿出来和大家分享一下

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

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

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

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

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

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

</div>
</div>
</div>
</div>
<!--partner_box end-->

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

javascript如下:
代码如下:

//合作伙伴变色效果
window.onload=function(){
friend();
}
function friend(){
if(!document.getElementById) return false;
if(!document.getElementsByTagName) return false;
if(!document.getElementById("box_list")) return false;
var footer=document.getElementById("box_list");
var img_list=footer.getElementsByTagName("img");
for(var i=0; i<9;i++){
//var img_h=img_list[i].clientHeight;
var img_w=img_list[i].clientWidth;
// img_list[i].parentNode.style.height="31px";
img_list[i].parentNode.style.width=img_w+"px";
img_list[i].parentNode.style.position="relative";
img_list[i].style.position="absolute";
img_list[i].style.top="0px";
img_list[i].style.left="0px";
img_list[i].onmouseover=function(){
this.style.top="-35px";
}
img_list[i].onmouseout=function(){
this.style.top="0px";
}
}
}


> 本站内容系网友提交或本网编辑转载,其目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题,请及时与本网联系,我们将在第一时间删除内容!

相关文章
  • js实现索引图片切换效果
    js实现索引图片切换效果
    这篇文章主要介绍了js实现索引图片切换效果的代码,特别炫酷的效果,推荐给大家,感兴趣的小伙伴们可以参考一下本文实例讲述了js实现索引图片切换效果的代码.分享给大家供大家参考.具体如下:运行效果截图如下: 具体代码如下 html代码: <div > <img src="img/1.jpg" /> <img sr ...
  • 纯js实现背景图片切换效果代码
    现在纯粹用js的人越来越少了,更多的人喜欢jquery,可使我还是喜欢javascript,下面给出一个用javascript写的背景切换的小例子,各位大虾不要骂,只是写给自己看的,也供js事件的产考依据.html代码 </head> <body> <div><ul><li></li>& ...
  • Asp.net(C#)读取数据库并生成JS文件制作首页图片切换效果(附demo源码下载)
    这篇文章主要介绍了Asp.netC#读取数据库并生成JS文件制作首页图片切换效果的方法,涉及asp.net数据库操作及JavaScript幻灯片生成的相关技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下本文实例讲述了Asp.net(C#)读取数据库并生成JS文件制作首页图片切换效果的方法.分享给大家供大家参考,具体如下: using System ...
  • JS实现FLASH幻灯片图片切换效果的方法
    这篇文章主要介绍了JS实现FLASH幻灯片图片切换效果的方法,实例分析了javascript操作图片实现Flash幻灯效果的技巧,需要的朋友可以参考下本文实例讲述了JS实现FLASH幻灯片图片切换效果的方法.分享给大家供大家参考.具体实现方法如下: 代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...
  • js仿土豆网带缩略图的焦点图片切换效果实现方法
    这篇文章主要介绍了js仿土豆网带缩略图的焦点图片切换效果实现方法,涉及javascript操作图片特效的技巧,具有一定参考借鉴价值,需要的朋友可以参考下本文实例讲述了js仿土豆网带缩略图的焦点图片切换效果实现方法.分享给大家供大家参考.具体实现方法如下: 代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTM ...
  • js实现百度联盟中一款不错的图片切换效果完整实例
    这篇文章主要介绍了js实现百度联盟中一款不错的图片切换效果的方法,以完整实例形式分析了javascript操作图片切换的技巧,需要的朋友可以参考下本文实例讲述了js实现百度联盟中一款不错的图片切换效果的方法.分享给大家供大家参考.具体实现方法如下: 代码如下:<html><title>js实现百度联盟中的一个不错的图片切换效果< ...
猜你喜欢