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

  • 相关阅读:
    php+redis 学习 一 连接
    【转】什么是tcp
    什么是 lnmp 实现原理。
    gitlab wiki 500
    memcached 与 redis 的区别和具体应用场景
    选择 稳定的工作 还是 挑战的工作
    php 数组变成树状型结构
    虚拟机服务器更新时间
    Phalcon调试大杀器之phalcon-debugbar安装
    MySQL 中的数据类型介绍
  • 原文地址:https://www.cnblogs.com/fanjiming/p/2247270.html
Copyright © 2011-2022 走看看