这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
最近写的一个关于图片切换的 js,拿出来和大家分享一下
一个合作伙伴的页面效果,鼠标放到 图片上要变成彩色,本来就是一个简单的换色效果,但问题是,图片的高度和宽度不是一样大的。
这就比较麻烦了。如果把图片放到背景里就要一个一个的去定义图片外面的容器 <a></a>,要多写很多层叠样式,太麻烦,最后我决定,把图片的高度的一一半,和图片的宽度赋值给它外面的容器 <a></a>
然后把图片做了如下处理:
当鼠标移动到图片上让他向上移动 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";
- }
- }
- }
来源: http://www.phperz.com/article/17/0626/282867.html