Maison > interface Web > js tutoriel > 映彩衣的js随笔(js图片切换效果)_图象特效

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

WBOY
Libérer: 2016-05-16 18:04:01
original
1363 Les gens l'ont consulté

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

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

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

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

复制代码 代码如下:






合作伙伴


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







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//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";
}
}
}
Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal