<!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <style>

             td, img {

                 width: 100px;

                 height: 100px;

             }

         </style>

     </head>

     <body>

         <table border="1px" >

             <tr>

                 <td><img src="data:images/1.jpg"/></td>

                 <td><img src="data:images/2.jpg"/></td>

                 <td><img src="data:images/11.jpg"/></td>

             </tr>

         </table>

         <img id="showImg" src="data:images/1.jpg"/>

         <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

         <script>

             $(function(){

                 $("tr img").click(function () {

                     $("#showImg").attr("src", $(this).attr("src"));

                     console.log($(this).index("tr img"));

                 })

             })

         </script>

     </body>

 </html>

jq-demo-点击改变图片的更多相关文章

  1. jquery点击改变图片src源码并toggle

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. jquery点击改变class并toggle；jquery点击改变图片src源码并toggle；jquery显示隐藏toggle

    <html><head><meta charset="utf-8"><title></title><script ...

  3. jq demo 点击弹窗，居中，可滚动，可拖动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. jq demo 点击评分组件

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. jq demo 点击选中元素左右移动

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  6. jq demo 轮播图，图片可调用，向左，自动+鼠标点击切换

    <!doctype html> <html> <head> <meta http-equiv="Content-Type" content ...

  7. jq demo 轮播图，图片可调用，向上，自动+鼠标点击切换

    1 <!doctype html> <html> <head> <meta http-equiv="Content-Type" conte ...

  8. 一款基于jquery的下拉点击改变背景图片

    今天给大家介绍一款基于jquery的下拉点击改变背景图片.单击右上角的图片,下拉显示可选择的背景图片,单击图片变为背景图.效果图下: 在线预览   源码下载 实现的代码. html代码: <a ...

  9. 22.用demo通过点击切换图片路径

    用demo通过点击切换图片路径 html: <img src="images/driving.png" class="driving"/> js: ...

随机推荐

  1. malloc&&fread

    const char *wavePath = [_filePath UTF8String]; FILE *fh; int16_t * adbuf; fh = fopen(wavePath, " ...

  2. Dubbo面试常见问题

    一.dubbo是什么? dubbo是⼀个分布式服务框架,提供⾼性能和透明化的RPC远程服务调⽤⽅案,以及SOA服务治理方案.说白了其实dubbo就是一个远程调用的分布式框架. 二.dubbo的核心服务 ...

  3. Vim: Overwrite read-only file without quiting vim

    当你忘记以sudo命令使用vim编辑一个只读文件时,可以执行以下vim命令强制覆写该文件: :w !sudo tee % > /dev/null 命令太长,可在vimrc文件中做命令映射(映射为 ...

  4. Coin Slider

    题目描述 You are playing a coin puzzle. The rule of this puzzle is as follows: There are N coins on a ta ...

  5. Comet OJ - contest #3 C DP

    题意:给你一个长度为n序列,和一个数m,问这个序列有多少个子序列,满足这个子序列的所有子序列的和是m的倍数?答案对1e9 + 7取模,n, m范围到5e3; 思路:容易发现,如果一个子序列的长度是n, ...

  6. ansible-继续普通用户权限运行

    ansible 远程以普通用户执行命令   1. ansible 10.0.0.1 -m raw -a "date" -u www 2.在ansible的主机配置文件中指定ssh_ ...

  7. 从文本文件hello.txt到可执行文件hello

    第一阶段 使用编辑器编写的源代码 (.txt) 文件 hello.c.经过 Pre-processor 进行前处理.在前处理阶段,当 pre-processor 读到代码中的#include<s ...

  8. macOS添加字体

    打开macOS的Applications文件夹: 双击其中的Font Book: 把下载的字体解压后的_文件夹_ 拖进来,字体就安装好了.

  9. DUBBO+Zookeeper在Centos7中本地搭建及小案例

    环境: 1.centos7 2.jdk-7u76-linux-x64.tar.gz 2.tomcat:apache-tomcat-7.0.59.tar.gz 3.zookeeper-3.4.6.tar ...

  10. K8S 容器之间通讯方式

    概述 首先k8s里面容器是存在于pod里面的,所以容器之间通讯,一般分为三种类型: 1. pod内部容器之间 2. pod 与 pod 容器之间 3. pod 访问service服务 pod内部容器之 ...