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


Posted in Javascript onJuly 31, 2011

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

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

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

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

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

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

<!--partner_box--> 
<div class="partner_box"> 
<div class="partner_list"> 
<div class="partner_listright"> 
<div class="parter_content"> 
<h2>合作伙伴</h2> 
<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> 
</div> 
</div> 
</div> 
</div> 
<!--partner_box end-->

css如下:(因为考虑到未来换肤所以颜色和结构分开来写)
/*partner*/ 
.partner_box { height:112px; padding-top:20px; } 
.partner_box .partner_list { width:910px; height:93px; margin:0 auto; } 
.partner_box .partner_list h2 { text-align:center; height:30px; line-height:30px; } 
.partner_box .partner_list #box_list { margin-top:15px; } 
.partner_box .partner_list #box_list a { margin-left:13px; display:inline-block; height:31px; float:left; overflow:hidden; } 
/*.partner_box*/ 
.partner_box{background:url(../images/partner_box_bc.jpg) repeat-x;} 
.partner_list{background:url(../images/friend_icon.png) 0% 0% no-repeat;} 
.partner_list .partner_listright{ background:url(../images/friend_icon_right.png) 100% 0% no-repeat;} 
.partner_list .partner_listright .parter_content{background:url(../images/friend_icon_midibe.png) repeat-x; margin:0px 8px 0px 9px; height:93px;} 
.partner_box .partner_list h2{ font-size:14px;border-bottom:1px dashed #999999; color:#0f0f0f;}

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"; 
} 
} 
}
Javascript 相关文章推荐
JSON 教程 json入门学习笔记
Sep 22 Javascript
jQueryUI的Dialog的简单封装
Jun 07 Javascript
jquery 提交值不为空的元素示例代码
May 10 Javascript
JavaScript打印网页指定区域的例子
May 03 Javascript
Javascript学习笔记之 函数篇(一) : 函数声明和函数表达式
Jun 24 Javascript
JS数组排序技巧汇总(冒泡、sort、快速、希尔等排序)
Nov 24 Javascript
JS 实现倒计时数字时钟效果【附实例代码】
Mar 30 Javascript
理理Vue细节(推荐)
Apr 16 Javascript
解决layer弹出层自适应页面大小的问题
Sep 16 Javascript
vue.js实现图书管理功能
Sep 24 Javascript
vue 开发企业微信整合案例分析
Dec 02 Javascript
js对象简介与基本用法示例
Mar 13 Javascript
IE6下focus与blur错乱的解决方案
Jul 31 #Javascript
EXTJS记事本 当CompositeField遇上RowEditor
Jul 31 #Javascript
Javascript 类、命名空间、代码组织代码
Jul 31 #Javascript
仅img元素创建后不添加到文档中会执行onload事件的解决方法
Jul 31 #Javascript
IE6/7 and IE8/9/10(IE7模式)依次隐藏具有absolute或relative的父元素和子元素后再显示父元素
Jul 31 #Javascript
读jQuery之十二 删除事件核心方法
Jul 31 #Javascript
读jQuery之十一 添加事件核心方法
Jul 31 #Javascript
You might like
php中文件上传的安全问题
2006/10/09 PHP
php防止网站被刷新的方法汇总
2014/12/01 PHP
PHP实现json_decode不转义中文的方法
2017/05/20 PHP
枚举JavaScript对象的函数
2006/12/22 Javascript
JS中把字符转成ASCII值的函数示例代码
2013/11/21 Javascript
js 跳出页面的frameset框架示例介绍
2013/12/23 Javascript
js通过location.search来获取页面传来的参数
2014/09/11 Javascript
js style动态设置table高度
2014/10/21 Javascript
clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切
2015/10/10 Javascript
jquery自适应布局的简单实例
2016/05/28 Javascript
JS/jQ实现免费获取手机验证码倒计时效果
2016/06/13 Javascript
EasyUI Pagination 分页的两种做法小结
2016/07/09 Javascript
AngularJS基础 ng-include 指令简单示例
2016/08/01 Javascript
微信小程序textarea层级过高(盖住其他元素)问题的解决办法
2019/03/04 Javascript
vue实现评论列表功能
2019/10/25 Javascript
[02:43]中国五虎出征TI3视频
2013/08/02 DOTA
Python中尝试多线程编程的一个简明例子
2015/04/07 Python
节日快乐! Python画一棵圣诞树送给你
2019/12/24 Python
python GUI库图形界面开发之PyQt5不规则窗口实现与显示GIF动画的详细方法与实例
2020/03/09 Python
Anaconda+Pycharm环境下的PyTorch配置方法
2020/03/13 Python
opencv 图像礼帽和图像黑帽的实现
2020/07/07 Python
美国波西米亚风格服装品牌:Show Me Your Mumu
2018/01/05 全球购物
科室工作个人总结的自我评价
2013/10/29 职场文书
岗位职责的定义
2013/11/10 职场文书
房地产开盘策划方案
2014/02/10 职场文书
大学生新学期计划书
2014/04/28 职场文书
好书伴我成长演讲稿
2014/05/14 职场文书
信电学院毕业生自荐书
2014/05/24 职场文书
环保宣传标语
2014/06/12 职场文书
2014年小学班主任工作总结
2014/11/08 职场文书
十二生肖观后感
2015/06/12 职场文书
百年校庆感言
2015/08/01 职场文书
乡镇司法所2015年度工作总结
2015/10/14 职场文书
python四个坐标点对图片区域最小外接矩形进行裁剪
2021/06/04 Python
python非标准时间的转换
2021/07/25 Python
MySQL数据库索引的最左匹配原则
2021/11/20 MySQL