Discuz教程网

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

[复制链接]
authicon dly 发表于 2011-9-16 07:54:50 | 显示全部楼层 |阅读模式

一个合作伙伴的页面效果,鼠标放到 图片上要变成彩色,本来就是一个简单的换色效果,但问题是,图片的高度和宽度不是一样大的。
这就比较麻烦了。如果把图片放到背景里就要一个一个的去定义图片外面的容器<a></a>,要多写很多层叠样式,太麻烦,最后我决定,把图片的高度的一一半,和图片的宽度赋值给它外面的容器<a></a>
然后把图片做了如下处理:

当鼠标移动到图片上让他向上移动30个像素,移开则回到原位。
html代码如下:
  1. <!--partner_box-->
  2. <div class="partner_box">
  3. <div class="partner_list">
  4. <div class="partner_listright">
  5. <div class="parter_content">
  6. <h2>合作伙伴</h2>
  7. <div id="box_list"> <a href="#"><img src="auto_navi/images/samsung_icon3.png"/></a> <a href="#"><img src="auto_navi/images/motorola_cion3.png"/></a> <a href="#"><img src="auto_navi/images/lenovo_icon3.png"/></a> <a href="#"><img src="auto_navi/images/dell_icon3.png"/></a> <a href="#"><img src="auto_navi/images/zte_icon3.png"/></a> <a href="#"><img src="auto_navi/images/philips_icon3.png"/></a> <a href="#"><img src="auto_navi/images/oppo_icon3.png" /></a> <a href="#"><img src="auto_navi/images/sharp_icon3.png"/></a> <a href="#"><img src="auto_navi/images/jkwap_icon3.png"/></a> </div>
  8. </div>
  9. </div>
  10. </div>
  11. </div>
  12. <!--partner_box end-->
复制代码
css如下:(因为考虑到未来换肤所以颜色和结构分开来写)
  1. /*partner*/
  2. .partner_box { height:112px; padding-top:20px; }
  3. .partner_box .partner_list { width:910px; height:93px; margin:0 auto; }
  4. .partner_box .partner_list h2 { text-align:center; height:30px; line-height:30px; }
  5. .partner_box .partner_list #box_list { margin-top:15px; }
  6. .partner_box .partner_list #box_list a { margin-left:13px; display:inline-block; height:31px; float:left; overflow:hidden; }
  7. /*.partner_box*/
  8. .partner_box{background:url(../images/partner_box_bc.jpg) repeat-x;}
  9. .partner_list{background:url(../images/friend_icon.png) 0% 0% no-repeat;}
  10. .partner_list .partner_listright{ background:url(../images/friend_icon_right.png) 100% 0% no-repeat;}
  11. .partner_list .partner_listright .parter_content{background:url(../images/friend_icon_midibe.png) repeat-x; margin:0px 8px 0px 9px; height:93px;}
  12. .partner_box .partner_list h2{ font-size:14px;border-bottom:1px dashed #999999; color:#0f0f0f;}
复制代码
javascript如下:
  1. //合作伙伴变色效果
  2. window.onload=function(){
  3. friend();
  4. }
  5. function friend(){
  6. if(!document.getElementById) return false;
  7. if(!document.getElementsByTagName) return false;
  8. if(!document.getElementById("box_list")) return false;
  9. var footer=document.getElementById("box_list");
  10. var img_list=footer.getElementsByTagName("img");
  11. for(var i=0; i<9;i++){
  12. //var img_h=img_list[i].clientHeight;
  13. var img_w=img_list[i].clientWidth;
  14. // img_list[i].parentNode.style.height="31px";
  15. img_list[i].parentNode.style.width=img_w+"px";
  16. img_list[i].parentNode.style.position="relative";
  17. img_list[i].style.position="absolute";
  18. img_list[i].style.top="0px";
  19. img_list[i].style.left="0px";
  20. img_list[i].onmouseover=function(){
  21. this.style.top="-35px";
  22. }
  23. img_list[i].onmouseout=function(){
  24. this.style.top="0px";
  25. }
  26. }
  27. }
复制代码

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x



上一篇:学习javascript,实现插入排序实现代码
下一篇:IE6下focus与blur错乱的解决方案
authicon 灵犀と杺 发表于 2011-9-16 08:04:15 | 显示全部楼层
学习了,非常及时。谢谢楼主的分享!如何使用以上代码?对其他的图片是否也有效果呢?
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

1314学习网 ( 浙ICP备10214163号 )

GMT+8, 2025-5-2 06:55

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表