zoukankan      html  css  js  c++  java
  • 一款手动幻灯图片效果

    <html>

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>网页特效| www.qpsh.com</title>
    <style>
    .spic a img{-moz-opacity:0.5; filter:alpha(opacity=50);border:0px;}
    .spic a:hover{font-size:9px;}
    .spic a:hover img{-moz-opacity:0.5; filter:alpha(opacity=100);cursor:hand;}
    </style>
    <script>
    function seeBig(thispic) {
      if(thispic==1){
        document.all.viewPic.innerHTML='<a target=_blank href=http://www.qpsh.com><img border=0 src=http://news.xinhuanet.com/photo/2007-12/18/xinsrc_32212041808203903041948.jpg width=300 height=250 style="border: 1px solid #C0C0C0"></a>'
      }
      if(thispic==2){
        document.all.viewPic.innerHTML='<a target=_blank href=http://www.qpsh.com><img border=0 src=http://news.xinhuanet.com/photo/2007-10/11/xinsrc_242100411072412537118.jpg width=300 height=250 style="border: 1px solid #C0C0C0"></a>'
      }
      if(thispic==3){
        document.all.viewPic.innerHTML='<a target=_blank href=http://www.qpsh.com><img border=0 src=http://news3.xinhuanet.com/world/2007-01/15/xin_0220104150902234148817.jpg width=300 height=250 style="border: 1px solid #C0C0C0"></a>'
      }
      if(thispic==4){
        document.all.viewPic.innerHTML='<a target=_blank href=http://www.qpsh.com><img border=0 src=http://news.xinhuanet.com/photo/2007-12/19/xinsrc_29212041908371712536913.jpg width=300 height=250 style="border: 1px solid #C0C0C0"></a>'
      }
    }
    </script>
    </head>

    <body>

    <table border="0" width="300" cellpadding="0" style="border-collapse: collapse">
     <tr>
      <td colspan="7" align="center" id="viewPic"><a target=_blank href=http://www.qpsh.com>
      <img  src="http://news.xinhuanet.com/photo/2007-12/18/xinsrc_32212041808203903041948.jpg" width=300 height=250 style="border: 1px solid #C0C0C0"></a></td>
     </tr>
     <tr>
      <td colspan="7" align="center"  height="15"></td>
     </tr>
     <tr>
      <td align="center" width="70"><span class="spic">
      <a href=# onmouseover="javascript:seeBig(1)" style="cursor:pointer">
      <img border="0" src="http://news.xinhuanet.com/photo/2007-12/18/xinsrc_32212041808203903041948.jpg" width="65" height="50" style="border: 1px solid #C0C0C0"></a></span></td>
      <td align="center" width="7"></td>
      <td align="center" width="70"><span class="spic">
      <a href=# onmouseover="javascript:seeBig(2)" style="cursor:pointer">
      <img border="0" src="http://news.xinhuanet.com/photo/2007-10/11/xinsrc_242100411072412537118.jpg" width="65" height="50" style="border: 1px solid #C0C0C0"></a></span></td>
      <td align="center" width="7"></td>
      <td align="center" width="70"><span class="spic">
      <a href=# onmouseover="javascript:seeBig(3)" style="cursor:pointer">
      <img border="0" src="http://news3.xinhuanet.com/world/2007-01/15/xin_0220104150902234148817.jpg" width="65" height="50" style="border: 1px solid #C0C0C0"></a></span></td>
      <td align="center" width="6"></td>
      <td align="center" width="70"><span class="spic">
      <a href=# onmouseover="javascript:seeBig(4)" style="cursor:pointer">
      <img border="0" src="http://news.xinhuanet.com/photo/2007-12/19/xinsrc_29212041908371712536913.jpg" width="65" height="50" style="border: 1px solid #C0C0C0" align="right"></a></span></td>
     </tr>
    </table>

    </body>

    </html>
    本代码由<a href=http://www.qpsh.com>网页特效网</a>提供

  • 相关阅读:
    编码以及⼩知识点补充
    基本数据类型(dict)
    基本数据类型(list,tuple)
    python基础
    Eclipse使用技巧
    条件与(&&)和逻辑与(&)以及条件或(||)和逻辑或(|)区别
    到底怎么样才叫看书?——Tony Zhao's
    Jsp servlet 值传递。。
    (06)odoo报表
    (05)odoo数据库和业务操作
  • 原文地址:https://www.cnblogs.com/fanjiming/p/2247270.html
Copyright © 2011-2022 走看看