200分求一JS图片放大

<html>
    <head>
        <meta http-equiv="Content-Language" content="zh-CN" />
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript">
            var   interval=1; 
            function changeBoxMarginLeft(v,val){
                if(v.style.marginLeft == ""){
                    v.style.marginLeft = "0px";
                }
                var current = Number(v.style.marginLeft.substr(0,v.style.marginLeft.indexOf("p")));
                v.style.marginLeft = Number(current + val) + "px";
            }            function changeBoxMarginTop(v,val){
                if(v.style.marginTop == ""){
                    v.style.marginTop = "0px";
                }
                var current = Number(v.style.marginTop.substr(0,v.style.marginTop.indexOf("p")));
                v.style.marginTop = Number(current + val) + "px";
            }
            function over(v){
                var maxWidth = 200;
                if(v.interval != undefined){
                    clearInterval(v.interval);
                }
                v.intervalID = setInterval(function(){
                    if(v.width < maxWidth) {
                        v.width = v.width + 10;
                        topchange = v.width * 3/4 - v.height;
                        v.height = v.width * 3/4;
                        changeBoxMarginLeft(v,-5);
                        changeBoxMarginTop(v,-topchange/2);
                    }
                    else{
                        clearInterval(v.intervalID);   
                    }
                },interval);
            }
            function out(v){  
                var minWidth = 100;
                clearInterval(v.intervalID);
                v.interval = setInterval(function(){
                    if(v.width > minWidth) {
                        v.width = v.width - 10 ; 
                        v.height = v.width * 3/4;
                        changeBoxMarginLeft(v,5);
                        changeBoxMarginTop(v,topchange/2)
                    }
                    else{
                        clearInterval(v.interval);   
                    }
                },interval); 
            }
        </script>
        
    </head>
    <body>
        <img src="DSC00509_nEO_IMG.jpg" width="100" height="75" onmouseover="over(this)" onmouseout="out(this)"/>
    </body>
</html>

解决方案 »

  1.   

    JavaScript 渐变效果
      

  2.   

    初始值高和宽是75，100
    最大最小宽度自己设定
    高度是按宽度比例来变得，要不图片会变形
    每次变的步长也是自己改的 改了步长之后changeBoxMarginLeft(v,5); 这个里面的数字改成步长的一半
    水平不高，可能写的不是很好，不好意思啊
      

  3.   

    <img style="margin:300 300 300 300 " src="111.jpg" id="img" onmouseover="changeLarge();" onmouseout="changesmall();" width="100" height="100" /><script>   var img = document.getElementById("img");    var s = null;   var l = null;   function changeLarge(){  
          clearInterval(s);
          l = setInterval("larger()",1);
       }   function changesmall(){
          clearInterval(l);
          s = setInterval("smaller()",1);
       }   function smaller(){
          if(parseInt(img.width)>100){
             img.style.marginLeft = parseInt(img.style.marginLeft)+1;
             img.width = parseInt(img.width) - 2;
          }else{
             clearInterval(s);
          }
          if(parseInt(img.height)>100){
             img.style.marginTop = parseInt(img.style.marginTop)+1;
             img.height = parseInt(img.height) - 2;
          }else{
             clearInterval(s);
          }
       }   function larger(){
          if(parseInt(img.width)<200){
             img.style.marginLeft = parseInt(img.style.marginLeft)-1;
             img.width = parseInt(img.width) + 2;
          }else{
             clearInterval(l);
          }
          if(parseInt(img.height)<200){
             img.style.marginTop = parseInt(img.style.marginTop)-1;
             img.height = parseInt(img.height) + 2;
          }else{
             clearInterval(l);
          }
       }
    </script>在下班前我也做了一个，不过2L做的早，分就给他吧我们俩思路差不多
      

  4.   

    <img style="margin:300 300 300 300 " src="111.jpg" id="img" onmouseover="changeLarge();" onmouseout="changesmall();" width="100" height="100" /><script>   var img = document.getElementById("img");    var s = null;   var l = null;   var step = 8; //调整改变尺寸的速度   var step_ = step * 2;   var maxWidth = 200; //最大宽度   var maxHeight = 200; //最大高度   var minWidth = 100; //最小宽度   var minHeight = 100; //最小高度   function changeLarge(){  
          clearInterval(s);
          l = setInterval("larger()",1);
       }   function changesmall(){
          clearInterval(l);
          s = setInterval("smaller()",1);
       }   function smaller(){
          if(parseInt(img.width)>minWidth){
             img.style.marginLeft = parseInt(img.style.marginLeft)+step;
             img.width = parseInt(img.width) - step_;
          }else{
             clearInterval(s);
          }
          if(parseInt(img.height)>minHeight){
             img.style.marginTop = parseInt(img.style.marginTop)+step;
             img.height = parseInt(img.height) - step_;
          }else{
             clearInterval(s);
          }
       }   function larger(){
          if(parseInt(img.width)<maxWidth){
             img.style.marginLeft = parseInt(img.style.marginLeft)-step;
             img.width = parseInt(img.width) + step_;
          }else{
             clearInterval(l);
          }
          if(parseInt(img.height)<maxHeight){
             img.style.marginTop = parseInt(img.style.marginTop)-step;
             img.height = parseInt(img.height) + step_;
          }else{
             clearInterval(l);
          }
       }
    </script>完善一下，写的活点
      

  5.   

    2楼代码我不会该尺寸。。
    14楼的不能用啊
    ie状态栏说网页有错误<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <script> 
    var img = document.getElementById("img"); 
    var s = null; 
    var l = null; 
    var step = 8; //调整改变尺寸的速度 
    var step_ = step * 2; 
    var maxWidth = 200; //最大宽度 
    var maxHeight = 200; //最大高度 
    var minWidth = 100; //最小宽度 
    var minHeight = 100; //最小高度 function changeLarge(){  
          clearInterval(s); 
          l = setInterval("larger()",1); 
      } function changesmall(){ 
          clearInterval(l); 
          s = setInterval("smaller()",1); 
      } function smaller(){ 
          if(parseInt(img.width)>minWidth){ 
            img.style.marginLeft = parseInt(img.style.marginLeft)+step; 
            img.width = parseInt(img.width) - step_; 
          }else{ 
            clearInterval(s); 
          } 
          if(parseInt(img.height)>minHeight){ 
            img.style.marginTop = parseInt(img.style.marginTop)+step; 
            img.height = parseInt(img.height) - step_; 
          }else{ 
            clearInterval(s); 
          } 
      } function larger(){ 
          if(parseInt(img.width) <maxWidth){ 
            img.style.marginLeft = parseInt(img.style.marginLeft)-step; 
            img.width = parseInt(img.width) + step_; 
          }else{ 
            clearInterval(l); 
          } 
          if(parseInt(img.height) <maxHeight){ 
            img.style.marginTop = parseInt(img.style.marginTop)-step; 
            img.height = parseInt(img.height) + step_; 
          }else{ 
            clearInterval(l); 
          } 
      } 
    </script> </head><body><img src="./images/2.jpg" name="img" width="100" height="100" style="margin: 300px 300px 300px 300px;" id="img"  onmouseover="changeLarge();" onmouseout="changesmall();" /> 
    </body>
    </html>
      

  6.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">这句话删掉
      

  7.   

    改了之后还是不能用啊<head><title>无标题文档</title>
    <script> 
    var img = document.getElementById("img"); 
    var s = null; 
    var l = null; 
    var step = 8; //调整改变尺寸的速度 
    var step_ = step * 2; 
    var maxWidth = 200; //最大宽度 
    var maxHeight = 200; //最大高度 
    var minWidth = 100; //最小宽度 
    var minHeight = 100; //最小高度 function changeLarge(){  
          clearInterval(s); 
          l = setInterval("larger()",1); 
      } function changesmall(){ 
          clearInterval(l); 
          s = setInterval("smaller()",1); 
      } function smaller(){ 
          if(parseInt(img.width)>minWidth){ 
            img.style.marginLeft = parseInt(img.style.marginLeft)+step; 
            img.width = parseInt(img.width) - step_; 
          }else{ 
            clearInterval(s); 
          } 
          if(parseInt(img.height)>minHeight){ 
            img.style.marginTop = parseInt(img.style.marginTop)+step; 
            img.height = parseInt(img.height) - step_; 
          }else{ 
            clearInterval(s); 
          } 
      } function larger(){ 
          if(parseInt(img.width) <maxWidth){ 
            img.style.marginLeft = parseInt(img.style.marginLeft)-step; 
            img.width = parseInt(img.width) + step_; 
          }else{ 
            clearInterval(l); 
          } 
          if(parseInt(img.height) <maxHeight){ 
            img.style.marginTop = parseInt(img.style.marginTop)-step; 
            img.height = parseInt(img.height) + step_; 
          }else{ 
            clearInterval(l); 
          } 
      } 
    </script> </head><body><img src="./images/2.jpg" name="img" width="100" height="100" style="margin: 300px 300px 300px 300px;" id="img"  onmouseover="changeLarge();" onmouseout="changesmall();" /> 
    </body>
    </html>
      

  8.   


    <html>
    <head>
    <title>无标题文档</title></head><body><img src="./images/2.jpg" name="img" width="100" height="100" style="margin: 300px 300px 300px 300px;" id="img"  onmouseover="changeLarge();" onmouseout="changesmall();" /> 
    <script> 
    var img = document.getElementById("img"); 
    var s = null; 
    var l = null; 
    var step = 8; //调整改变尺寸的速度 
    var step_ = step * 2; 
    var maxWidth = 200; //最大宽度 
    var maxHeight = 200; //最大高度 
    var minWidth = 100; //最小宽度 
    var minHeight = 100; //最小高度 function changeLarge(){  
          clearInterval(s); 
          l = setInterval("larger()",1); 
      } function changesmall(){ 
          clearInterval(l); 
          s = setInterval("smaller()",1); 
      } function smaller(){ 
          if(parseInt(img.width)>minWidth){ 
            img.style.marginLeft = parseInt(img.style.marginLeft)+step; 
            img.width = parseInt(img.width) - step_; 
          }else{ 
            clearInterval(s); 
          } 
          if(parseInt(img.height)>minHeight){ 
            img.style.marginTop = parseInt(img.style.marginTop)+step; 
            img.height = parseInt(img.height) - step_; 
          }else{ 
            clearInterval(s); 
          } 
      } function larger(){ 
          if(parseInt(img.width) <maxWidth){ 
            img.style.marginLeft = parseInt(img.style.marginLeft)-step; 
            img.width = parseInt(img.width) + step_; 
          }else{ 
            clearInterval(l); 
          } 
          if(parseInt(img.height) <maxHeight){ 
            img.style.marginTop = parseInt(img.style.marginTop)-step; 
            img.height = parseInt(img.height) + step_; 
          }else{ 
            clearInterval(l); 
          } 
      } 
    </script> 
    </body>
    </html>
    你应该把script写到后面，因为html运行的流程是从上到下，当浏览器运行var img = document.getElementById("img"); 这句报错的原因就是还没有创建img对象所以会说找不到对象，解决方法就是把script代码放到后面就可以了。对于20L的说的问题确实存在，但是请问有什么解决方案吗？我现在的思路有点错误。
      

  9.   

    干脆把var img = document.getElementById("img"); 放在那两个方法里头:<html>
    <head runat="server">
        <title>无标题文档</title>
        <script type="text/javascript"> 
            var s = null; 
            var l = null; 
            var step = 8; //调整改变尺寸的速度 
            var step_ = step * 2; 
            var maxWidth = 200; //最大宽度 
            var maxHeight = 200; //最大高度 
            var minWidth = 100; //最小宽度 
            var minHeight = 100; //最小高度         function changeLarge(){  
                  clearInterval(s); 
                  l = setInterval("larger()",1); 
              }         function changesmall(){ 
                  clearInterval(l); 
                  s = setInterval("smaller()",1); 
              }         function smaller(){ 
                var img = document.getElementById("img"); 
                if(parseInt(img.width)>minWidth){ 
                img.style.marginLeft = parseInt(img.style.marginLeft)+step; 
                img.width = parseInt(img.width) - step_; 
                }else{ 
                clearInterval(s); 
                } 
                if(parseInt(img.height)>minHeight){ 
                img.style.marginTop = parseInt(img.style.marginTop)+step; 
                img.height = parseInt(img.height) - step_; 
                }else{ 
                clearInterval(s); 
                } 
              }         function larger(){ 
                var img = document.getElementById("img"); 
                if(parseInt(img.width) <maxWidth){ 
                img.style.marginLeft = parseInt(img.style.marginLeft)-step; 
                img.width = parseInt(img.width) + step_; 
                }else{ 
                clearInterval(l); 
                } 
                if(parseInt(img.height) <maxHeight){ 
                img.style.marginTop = parseInt(img.style.marginTop)-step; 
                img.height = parseInt(img.height) + step_; 
                }else{ 
                clearInterval(l); 
                } 
            } 
        </script> </head>
    <body>
        <form id="form1" runat="server">    <img src="images/02.jpg"name="img" width="100" height="100" style="margin: 300px 300px 300px 300px;" id="img"  onmouseover="changeLarge();" onmouseout="changesmall();" /> 
         
        </form>
    </body>
    </html>
      

  10.   

    <html>
        <head>
            <meta http-equiv="Content-Language" content="zh-CN" />
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <script type="text/javascript">
                var  interval=1;
                var minWidth = 100;//最小宽度
                var maxWidth = 200;//最大宽度
                var ratio = 3/4;//这个是你的图片高和宽的比值，不这么写的话图片会变形
                var step = 10;//步长，调整变化的速度
                
                
                function changeBoxMarginLeft(v,val){
                    if(v.style.marginLeft == ""){
                        v.style.marginLeft = "0px";
                    }
                    var current = Number(v.style.marginLeft.substr(0,v.style.marginLeft.indexOf("p")));
                    v.style.marginLeft = Number(current + val) + "px";
                }            function changeBoxMarginTop(v,val){
                    if(v.style.marginTop == ""){
                        v.style.marginTop = "0px";
                    }
                    var current = Number(v.style.marginTop.substr(0,v.style.marginTop.indexOf("p")));
                    v.style.marginTop = Number(current + val) + "px";
                }
                function over(v){
                    
                    if(v.interval != undefined){
                        clearInterval(v.interval);
                    }
                    v.intervalID = setInterval(function(){
                        if(v.width < maxWidth) {
                            v.width = v.width + step;
                            topchange = v.width * ratio - v.height;
                            v.height = v.width * ratio;
                            changeBoxMarginLeft(v,-step/2);
                            changeBoxMarginTop(v,-topchange/2);
                        }
                        else{
                            clearInterval(v.intervalID); 
                        }
                    },interval);
                }
                function out(v){ 
                    clearInterval(v.intervalID);
                    v.interval = setInterval(function(){
                        if(v.width > minWidth) {
                            v.width = v.width - step ;
                            v.height = v.width * ratio;
                            changeBoxMarginLeft(v,step/2);
                            changeBoxMarginTop(v,topchange/2)
                        }
                        else{
                            clearInterval(v.interval); 
                        }
                    },interval);
                }
            </script>
           
        </head>
        <body>
            <img src="DSC00509_nEO_IMG.jpg" width="100" height="75" style="margin: 300px 300px 300px 300px;" onmouseover="over(this)" onmouseout="out(this)"/>
        </body>
    </html>
    我这样写总能知道怎么改宽度和高度了吧？？
    开始的时候记得输入图片的初始高和宽，minwidth要和初始宽度一样
    还有20L说的那个，这段代码当然要放进别的容器里用阿……直接放任何一个会改变大小的东西都会扰乱布局的
    比如把它放进一个大点的div里面先腾出地方来，或者写个覆盖后面内容的浮动窗口里就没问题了问个很菜的问题……大家说的2楼是我还是那个给了一篇文章的那个？？
      

  11.   

    呵呵  我说的2l是comcow 不好意思啊  csdn上的论坛好像和别的论坛不太一样
      

  12.   

    HOHOHOHO～
    我还以为写了那么多没人看到呢……
    danengnai__ 你那样写图片会变形的，正方形的看不出来，
    假设开始是30宽40高，宽比高是3比4，但是像你那样加一次之后变成4比5了，越往后越趋向于一个正方形
    要是高宽都限制的话最后得到的结果会是对的，但是变得过程中变化不均匀我想到办法是只设置宽度的变化和步长，高度按比例随着宽度变，这样就不会让图片变形了
      

  13.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>鼠标悬停图片放大效果</title>
    <meta http-equiv="content-Type" content="text/html;charset=gb2312">
    <!--把下面代码加到<head>与</head>之间-->
    <style type="text/css">
    .area .col2{float:left; width:25px;}
    .focusArea .col2{ float:right; width:497px; margin:0 1px 0 0; display:inline; background:#FAFAFA;height:320px; overflow:hidden; }
    .focusPic{clear:both; margin:0 auto; width:464px; padding:16px 0 0;text-align:left;}
    .focusPic .pic{clear:both; height:250px; overflow:hidden;}
    .focusPic .pic img{border:1px solid #ccc;}
    .focusPic .pic ul{float:right; width:97px;}
    .focusPic .pic li{clear:both; text-align:right; padding:0 0 9px;}
    .focusPic .pic .active{ background:url(http://cimg2.163.com/cnews/img/bg1.gif) 0 -454px no-repeat;}
    .focusPic .pic .active img{padding:2px; background:#fff; border:1px solid #1f3a87;}
    .focusPic .pic .active img:hover{border:1px solid #bc2931;}
    .focusPic h2{clear:both; font-size:14px; font-weight:bold;}
    .focusPic .text{line-height:19px; padding:5px 12px 0 0;}
    .left{ float: left;}
    .foot .text{padding:3px 0 6px; border-bottom:1px solid #000; margin:0 0 5px; clear:both;}
    /* CSS Document */
    body {text-align:center;font-family: 宋体, serif;  margin:0; padding:0; background: #fff; font-size:12px; color:#000;}
    div,form,img,ul,ol,li,dl,dt,dd {margin: 0; padding: 0; border:0; }
    h1,h2,h3,h4,h5,h6 {margin:0; padding:0; font-size:12px; font-weight:normal;}
    table,td,tr,th{font-size:12px;}
    li{list-style-type:none;}
    input,button{cursor:pointer;}
    img{vertical-align:top;}
    table{margin:0 auto;}
    /* 链接颜色 */
    a:link {color: #000; text-decoration:none;}
    a:visited {color: #83006f;text-decoration:none;}
    a:hover {color: #bc2931; text-decoration:underline;}
    a:active {color: #bc2931;}
    /* 颜色属性 */
    .cRed,a.cRed:link,a.cRed:visited{ color:Red; }
    .cBlue,a.cBlue:link,a.cBlue:visited{color:#1f3a87;}
    .cDRed,a.cDRed:link,a.cDRed:visited{ color:#bc2931;}
    .cGray,a.cGray:link,a.cGray:visited{ color: #333;}
    .cDGray,a.cDGray:link,a.cDGray:visited{ color: #666;}
    .cWhite,a.cWhite:link,a.cWhite:visited{ color:#fff;}
    .cBlack,a.cBlack:link,a.cBlack:visited{color:#000;}
    a.cBlack:hover{color:#bc2931;}
    .cGreen,a.cGreen:link,a.cGreen:visited{color:#008000;}
    .cYellow,a.cYellow:link,a.cYellow:visited{color:#ff0;}
    /* 字体属性 */
    .fB {font-weight: bold;}
    .fI {font-style: italic;}
    /* 字体大小*/
    .f12px{ font-size:12px;}
    .f14px{ font-size:14px;}
    /* 其他属性 */
    .left{ float: left;}
    .right{ float: right;}
    .clear{ clear: both; font-size:1px; width:1px; height:0; overflow:hidden; }
    .hidden {display: none;}
    .unLine ,.unLine a{text-decoration: none;}
    .noBorder{border:none;    }
    </style>
    <script language="javascript" src="http://news.163.com/special/0001jt/indexjs.js"></script>
    </head>
    <body>
    <!--把下面代码加到<body>与</body>之间-->
    <div class="col2">
      <div class="focusPic">
        <div class="pic">
          <div id="focusPic1" style="display:block;"><a href="http://news.163.com/08/0529/06/4D3EK93A00012MS7.html"><img src="http://cimg21.163.com/cnews/2008/5/29/20080529063645633e1.jpg" alt="陕西灾区学生烈日下备战高考" width="360" height="240" border="0" class="left" /></a></div>
          <div id="focusPic2" style="display:none;"><a href="http://news.163.com/08/0529/04/4D376PV90001124J.html"><img src="http://cimg21.163.com/cnews/2008/5/29/20080529042010e2865.jpg" alt="内蒙古浮尘远飘青岛" width="360" height="240" border="0" class="left" /></a></div>
          <div id="focusPic3" style="display:none;"><a href="http://news.163.com/08/0528/15/4D1S66GQ000120GU.html"><img src="http://cimg21.163.com/cnews/2008/5/29/2008052909284405e57.jpg" alt="胡锦涛会见国民党主席吴伯雄" width="360" height="240" border="0" class="left" /></a></div>
          <div id="focusPic4" style="display:none;"><a href="http://cimg21.163.com/cnews/2008/5/29/20080529092409c16e0.jpg"><img src="http://cimg21.163.com/cnews/2008/5/28/20080528042715c7168.jpg" alt="贵州暴雨山洪造成30人死亡 13人失踪" width="360" height="240" border="0" class="left" /></a></div>
          <ul>
            <li id="focusnav1" class="active" onmouseover="javascript:showFocus(1);"><a href="http://news.163.com/08/0529/06/4D3EK93A00012MS7.html"><img src="http://cimg21.163.com/cnews/2008/5/29/20080529063645633e1.jpg" width="75" height="50" alt="陕西灾区学生烈日下备战高考" border="0" /></a></li>
            <li id="focusnav2" class="" onmouseover="javascript:showFocus(2);"><a href="http://news.163.com/08/0529/04/4D376PV90001124J.html"><img src="http://cimg21.163.com/cnews/2008/5/29/20080529042010e2865.jpg" width="75" height="50" alt="内蒙古浮尘远飘青岛" border="0" /></a></li>
            <li id="focusnav3" class="" onmouseover="javascript:showFocus(3);"><a href="http://news.163.com/08/0528/15/4D1S66GQ000120GU.html"><img src="http://cimg21.163.com/cnews/2008/5/29/2008052909284405e57.jpg" width="75" height="50" alt="胡锦涛会见国民党主席吴伯雄" border="0" /></a></li>
            <li id="focusnav4" class="" onmouseover="javascript:showFocus(4);"><a href="http://cimg21.163.com/cnews/2008/5/29/20080529092409c16e0.jpg"><img src="http://cimg21.163.com/cnews/2008/5/28/20080528042715c7168.jpg" width="75" height="50" alt="贵州暴雨山洪造成30人死亡 13人失踪" border="0" /></a></li>
          </ul>
        </div>
        <div id="focusContent1" style="display:block;">
          <h2><a href="http://news.163.com/08/0529/06/4D3EK93A00012MS7.html">陕西灾区学生烈日下备战高考</a></h2>
          <div class="text">由于帐篷闷热，宁强县1100多名学生的很多课程只能放到帐篷外上。 <a href="http://news.163.com/08/0529/06/4D3EK93A00012MS7.html" class="cDRed">[详细]</a></div>
        </div>
        <div id="focusContent2" style="display:none;">
          <h2><a href="http://news.163.com/08/0529/04/4D376PV90001124J.html">内蒙古浮尘远飘青岛</a></h2>
          <div class="text">5月26日，内蒙古出现大范围扬沙和沙尘暴天气。28日，浮尘飘移至青岛 <a href="http://news.163.com/08/0529/04/4D376PV90001124J.html" class="cDRed">[详细]</a></div>
        </div>
        <div id="focusContent3" style="display:none;">
          <h2><a href="http://news.163.com/08/0528/15/4D1S66GQ000120GU.html">胡锦涛会见国民党主席吴伯雄</a></h2>
          <div class="text">这是在台湾局势发生积极变化形势下，两党最高领导人之间的首次会谈。 <a href="http://news.163.com/08/0528/15/4D1S66GQ000120GU.html" class="cDRed">[详细]</a></div>
        </div>
        <div id="focusContent4" style="display:none;">
          <h2><a href="http://cimg21.163.com/cnews/2008/5/29/20080529092409c16e0.jpg">贵州暴雨山洪造成30人死亡 13人失踪</a></h2>
          <div class="text">贵州全省已有25个县不同程度受灾，因灾毁损房屋3200多间。 <a href="http://cimg21.163.com/cnews/2008/5/29/20080529092409c16e0.jpg" class="cDRed">[详细]</a></div>
        </div>
      </div>
    </div>
    </body>
    </html>
      

  14.   

    //这个最漂亮。
    <html> 
    <head> 
    <title>好玩的样式—鼠标经过图片放大效果</title> 
    <body> 
    <STYLE type=text/css> 
       ul#hovershow{list-style-type: none; margin: 50px; float: left; display: inline; clear: both;   } 
       ul#hovershow li{ float: left; display: inline; width:64px; height: 64px; margin: 2px;} 
       ul#hovershow li a {display: block;width:64px; height: 64px;} 
       ul#hovershow li a img{border:1px #666 solid; width:100%;height:100%;} 
       ul#hovershow li a:hover{position: absolute; z-index:100;margin: -32px 0 0 -32px;} 
       ul#hovershow li a:hover img{width:128px;height:128px;border:1px red solid;} 
    </STYLE> 
    </body> 
       <ul id="hovershow"> 
        <li><a href="1#" title="test"><img src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im1.jpg" width="128" height="128" alt="test" /></a></li> 
        <li><a href="2#" title="test"><img src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im2.jpg" width="128" height="128" alt="test" /></a></li> 
        <li><a href="3#" title="test"><img src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im3.jpg" width="128" height="128" alt="test" /></a></li> 
        <li><a href="4#" title="test"><img src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im4.jpg" width="128" height="128" alt="test" /></a></li> 
        <li><a href="5#" title="test"><img src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im5.jpg" width="128" height="128" alt="test" /></a></li> 
        <li><a href="6#" title="test"><img src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im6.jpg" width="128" height="128" alt="test" /></a></li> 
        <li><a href="7#" title="test"><img src="http://preview.zcool.com.cn/code/js/04/10/slide-M_data/im7.jpg" width="128" height="128" alt="test" /></a></li> 
    </ul> 
    </html>
      

  15.   

    CSDN 发的代码不会换行~
      

  16.   

    css怎么能控制渐变啊？？