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>提供

  • 相关阅读:
    对java中接口的简单理解
    jqgrid
    sed跨行匹配替换
    linux 安装 mysql
    mysql 导入或导出(mysqldump)数据
    spring boot slf4j + logback
    原码、反码、补码
    Java线程池(一)
    springboot 多环境配置及打包资源
    springboot自定义yaml配置文件
  • 原文地址:https://www.cnblogs.com/fanjiming/p/2247270.html
Copyright © 2011-2022 走看看