映彩衣的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 相关文章推荐
跟着JQuery API学Jquery 之三 筛选
Apr 09 Javascript
js 利用image对象实现图片的预加载提高访问速度
Mar 29 Javascript
javascript中的toFixed固定小数位数 简单实例分享
Jul 12 Javascript
JavaScript实现大数的运算
Nov 24 Javascript
JS中artdialog弹出框控件之提交表单思路详解
Apr 18 Javascript
jQuery和JavaScript节点插入元素的方法对比
Nov 18 Javascript
jQuery实现二维码扫描功能
Jan 09 Javascript
Node+Express+MongoDB实现登录注册功能实例
Apr 23 Javascript
JS库中的Particles.js在vue上的运用案例分析
Sep 13 Javascript
vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法
Oct 22 Javascript
JS求1到任意数之间的所有质数的方法详解
May 20 Javascript
浅谈JavaScript中等号、双等号、 三等号的区别
Aug 06 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
discuz安全提问算法
2007/06/06 PHP
也谈php网站在线人数统计
2008/04/09 PHP
PHP查询数据库中满足条件的记录条数(两种实现方法)
2013/01/29 PHP
PHP面向对象程序设计之命名空间与自动加载类详解
2016/12/02 PHP
CI(CodeIgniter)框架视图中加载视图的方法
2017/03/24 PHP
jQuery EasyUI API 中文文档 - TimeSpinner时间微调器
2011/10/23 Javascript
利用javascript打开模态对话框(示例代码)
2014/01/11 Javascript
javascript学习笔记(二)数组和对象部分
2014/09/30 Javascript
JS实现自定义简单网页软键盘效果代码
2015/11/05 Javascript
jQuery实现分隔条左右拖动功能
2015/11/21 Javascript
适用于javascript开发者的Processing.js入门教程
2016/02/24 Javascript
jquery UI Datepicker时间控件的使用及问题解决
2016/04/28 Javascript
JS中判断字符串中出现次数最多的字符及出现的次数的简单实例
2016/06/03 Javascript
jquery插件方式实现table查询功能的简单实例
2016/06/06 Javascript
Easyui的组合框的取值与赋值
2016/10/28 Javascript
Nodejs中解决cluster模块的多进程如何共享数据问题
2016/11/10 NodeJs
在点击div中的p时,如何阻止事件冒泡
2017/02/07 Javascript
详解vue-router 2.0 常用基础知识点之router.push()
2017/05/10 Javascript
薪资那么高的Web前端必看书单
2017/10/13 Javascript
教你如何在Django 1.6中正确使用 Signal
2014/06/22 Python
如何在Python中编写并发程序
2016/02/27 Python
python实现发送邮件功能代码
2017/12/14 Python
Django REST framework 如何实现内置访问频率控制
2019/07/23 Python
Pytorch 保存模型生成图片方式
2020/01/10 Python
django3.02模板中的超链接配置实例代码
2020/02/04 Python
python GUI库图形界面开发之PyQt5滑块条控件QSlider详细使用方法与实例
2020/02/28 Python
施华洛世奇天猫官方旗舰店:SWAROVSKI
2017/04/17 全球购物
Sixt美国租车:高端豪华车型自驾体验
2017/09/02 全球购物
关于Java finally的面试题
2016/04/27 面试题
高中生的自我鉴定范文
2014/01/24 职场文书
大学生会计职业生涯规划范文
2014/02/28 职场文书
幼儿园亲子活动总结
2014/04/26 职场文书
英文推荐信格式范文
2014/05/09 职场文书
七夕活动策划方案
2014/08/16 职场文书
婚前协议书标准版
2014/10/19 职场文书
服务行业标语口号
2015/12/26 职场文书