映彩衣的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 相关文章推荐
js 禁用只读文本框获得焦点时的退格键
Apr 25 Javascript
EasyUI中的tree用法介绍
Nov 01 Javascript
jQuery响应鼠标事件并隐藏与显示input默认值
Aug 24 Javascript
javascript制作游戏开发碰撞检测的封装代码
Mar 31 Javascript
浅谈jquery.fn.extend与jquery.extend区别
Jul 13 Javascript
Zabbix添加Node.js监控的方法
Oct 20 Javascript
有趣的bootstrap走动进度条
Dec 01 Javascript
Angular.js实现注册系统的实例详解
Dec 18 Javascript
vue-router实现webApp切换页面动画效果代码
May 25 Javascript
Vuejs 页面的区域化与组件封装的实现
Sep 11 Javascript
浅谈React和Redux的连接react-redux
Dec 04 Javascript
微信小程序视频弹幕发送功能的实现
Dec 28 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中使用exec,system等函数调用系统命令的方法(不建议使用,可导致安全问题)
2012/09/07 PHP
详解HTTP Cookie状态管理机制
2016/01/14 PHP
Smarty变量用法详解
2016/05/11 PHP
在Yii2特定页面如何禁用调试工具栏Debug Toolbar详解
2017/08/07 PHP
在laravel5.2中实现点击用户头像更改头像的方法
2019/10/14 PHP
php 实现简单的登录功能示例【基于thinkPHP框架】
2019/12/02 PHP
在JavaScript中获取请求的URL参数[正则]
2010/12/25 Javascript
JS动态创建Table,Tr,Td并赋值的具体实现
2013/07/05 Javascript
原生javascript实现无间缝滚动示例
2014/01/28 Javascript
jQuery实现鼠标悬停显示提示信息窗口的方法
2015/04/30 Javascript
jQuery实现查找最近父节点的方法
2016/06/23 Javascript
jquery常用的12个小功能
2016/07/22 Javascript
微信小程序 实战实例开发流程详细介绍
2017/01/05 Javascript
Vue系列:通过vue-router如何传递参数示例
2017/01/16 Javascript
Bootstrap下拉菜单更改为悬停(hover)触发的方法
2017/05/24 Javascript
vue.js国际化 vue-i18n插件的使用详解
2017/07/07 Javascript
利用VS Code开发你的第一个AngularJS 2应用程序
2017/12/15 Javascript
vue2中引用及使用 better-scroll的方法详解
2018/11/15 Javascript
[01:28:31]《加油DOTA》真人秀 第五期
2014/09/01 DOTA
Python中使用urllib2防止302跳转的代码例子
2014/07/07 Python
python并发编程之线程实例解析
2017/12/27 Python
TensorFlow实现卷积神经网络CNN
2018/03/09 Python
用Python编写一个简单的CS架构后门的方法
2018/11/20 Python
django 通过URL访问上传的文件方法
2019/07/28 Python
Python 类的魔法属性用法实例分析
2019/11/21 Python
python读取tif图片时保留其16bit的编码格式实例
2020/01/13 Python
Django 返回json数据的实现示例
2020/03/05 Python
Canvas引入跨域的图片导致toDataURL()报错的问题的解决
2018/09/19 HTML / CSS
一家专门经营包包的英国网站:MyBag
2019/09/08 全球购物
面向对象设计的原则是什么
2013/02/13 面试题
城市精细化管理实施方案
2014/03/04 职场文书
大学生2014全国两会学习心得体会
2014/03/10 职场文书
小学安全汇报材料
2014/08/14 职场文书
2015年高三毕业班班主任工作总结
2015/10/22 职场文书
2016婚礼主持词开场白
2015/11/24 职场文书
使用refresh_token实现无感刷新页面
2022/04/26 Javascript