zoukankan      html  css  js  c++  java
  • Ferris教程学习笔记:js示例2.11 图片列表:鼠标移入/移出改变图片透明度

    //思路:
    //通过透明度的变化实现效果
    1:注意代码a  清除元素class值
    2:注意代码b  当前元素添加class值

    这个示例需要几张图片,在随笔中没有发现上传附件的功能,你需要去Ferris 站点下载 :(

    http://js.fgm.cc/learn/

     1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     2 <html xmlns="http://www.w3.org/1999/xhtml"><head>
     3 <meta http-equiv="Content-Type" content="text/html; charset=gbk">
     4 <title>图片列表:鼠标移入/移出改变图片透明度</title>
     5 <style type="text/css">
     6 ul,li{margin:0;padding:0;list-style-type:none;}
     7 #imgList{width:700px;overflow:hidden;zoom:1;border:1px solid #333;margin:0 auto;padding:0 0 10px 10px;}
     8 #imgList li{float:left;width:128px;height:128px;border:1px solid #ccc;margin:10px 10px 0 0;}
     9 #imgList li img{float:left;opacity:0.3;cursor:crosshair;filter:alpha(opacity=30);}
    10 #imgList li.current img{opacity:1;filter:alpha(opacity=100);}
    11 </style>
    12 </head>
    13 <body>
    14  <ul id="imgList">
    15    <li class=""><img src="06/1.jpg"></li>
    16    <li class=""><img src="06/2.jpg"></li>
    17    <li class=""><img src="06/3.jpg"></li>
    18    <li class=""><img src="06/4.jpg"></li>
    19    <li class=""><img src="06/5.jpg"></li>
    20    <li class=""><img src="06/6.jpg"></li>
    21    <li class=""><img src="06/7.jpg"></li>
    22    <li class=""><img src="06/8.jpg"></li>
    23    <li class=""><img src="06/9.jpg"></li>
    24    <li class=""><img src="06/10.jpg"></li>
    25  </ul>
    26  
    27 <script type="text/javascript">
    28 
    29 //思路:
    30 //通过透明度的变化实现效果
    31 //1:注意代码a  清除元素class值
    32 //2:注意代码b  当前元素添加class值
    33  window.onload = function(){
    34    var lis = document.getElementsByTagName("li");
    35    var size = lis.length;
    36    for(var i=0;i<size;i++){
    37       
    38       lis[i].onmouseover = function(){
    39          //a:当空所有列表样式
    40         for(p in lis)lis[p].className = "";
    41         //b:当前元素添加current样式
    42         this.className = "current";
    43         
    44       };
    45       
    46    }
    47  };
    48 </script> 
    49 </body>
    50 </html>
  • 相关阅读:
    scanf与scanf_s的区别
    PAT 1041 考试座位号
    PAT1018 锤子剪刀布
    Cookie
    JSP--原理
    多线程练习题
    Java线程--线程的同步与锁
    有关toString()和println(Object)
    Java Web请求和响应机制
    IO流
  • 原文地址:https://www.cnblogs.com/kaka100/p/3470788.html
Copyright © 2011-2022 走看看