table样式加上图片切换效果

最新推荐文章于 2022-05-01 19:13:28 发布

mofijeck

最新推荐文章于 2022-05-01 19:13:28 发布

阅读量946

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/mofijeck/article/details/41706819

版权

js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

有时候一个平面设计可能往往被要求实现一些比较简单的样式，下面就讲一下如何做图片切换效果，其实很简单，以下图片切换效果的源码，关于table表格 +jquery代码的实现方式

<!---定义一个table的ID为imgList 方便后面样式和javascript调用-->
   <!--a标签里面的href="#" #可以替换成任意网址 如:<a href="#">改成<a href="http://www.baidu.com">-->
   <!--img参数说明：
   <img src="这里存放的当前图片地址" tempsrc="这里存放的是鼠标移上去切换的图片地址"  width="这里是图片宽度"  height="这里是图片高度" />
   -->
   <!---style样式说明:
      #imgList td{ padding-left:10px;padding-top:10px;}
      1.#imgList表示的是table这个对象 td就是里面每个小方块
      2.padding-left:10px; 表示每个td小方块距离左边的间距
      3.padding-top:10px;表示距离上面的td小方块的距离
   -->
   <!---script功能说明：
      写的javascript脚本代码 就是图片切换的效果，直接复制就好了 不用改代码
   -->
   <!---使用方法：
   1.复制--从代码开始--到--代码结束--代码
   2.替换里面的src 图片地址 和tempsrc 图片地址
   -->
   <!--代码开始-->
   <script src="http://code.jquery.com/jquery-latest.js"></script>
   <table id="imgList" cellpadding="0" cellspacing="0" border="0">
      <tr>
        <!---这里的colspan为2表示两个td合并成一个-->
        <td colspan="2">
           <a href="#"><img src="img/1.jpg" tempsrc="img/2.jpg" width="200"  height="100"  /></a>
        </td>
        <td>
           <a href="#"><img src="img/2.jpg" width="100"  tempsrc="img/1.jpg" height="100"   /></a>
        </td>
      </tr>
      <tr>
        <td>
           <a href="#"><img src="img/1.jpg" tempsrc="img/2.jpg"  width="100" height="100"   /></a>
        </td>
        <td>
           <a href="#"><img src="img/2.jpg" tempsrc="img/3.jpg"  width="100" height="100"   /></a>
        </td>
        <td>
           <a href="#"><img src="img/3.jpg" tempsrc="img/1.jpg"  width="100" height="100"   /></a>
        </td>
      </tr>
      <tr>
        <td>
           <a href="#"><img src="img/2.jpg" tempsrc="img/4.jpg"  width="100" height="100"   /></a>
        </td>
        <!---这里的colspan为2表示两个td合并成一个-->
        <td colspan="2">
            <a href="#"><img src="img/4.jpg" tempsrc="img/2.jpg"  width="200" height="100"   /></a>
        </td>
      </tr>
   </table>
   <style>
   #imgList td{ padding-left:10px; padding-top:10px;}/***这里的10就是距离左边的间隔***/
   </style>
   <script>
        $(document).ready(function(){
             //定义原来图片的src
             var imgsrc="";
             $("#imgList img").hover(
             function(){
                 imgsrc=$(this).attr("src");
                 var newImgsrc=$(this).attr("tempsrc");
                 $(this).attr("src",newImgsrc);
             },
             function(){
                 $(this).attr("src",imgsrc);
                 imgsrc="";//重置imgsrc
             });
        })  
   </script>
   <!--代码结束-->