<!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. (转)Http和Https的区别

    1.什么是Http Http中文叫做超文本传输协议, 它完成客户端到服务端等一系列运作流程 1.1 与http关系密切的协议: IP, TCP和DNS 负责传输的IP协议 IP协议数据网络层, IP协 ...

  2. windows上测试网络数据跳转路径

    今天遇到一个有关路由方面的问题,所以向一位CCIE大神问了点问题.就是关于ip ping包出了pc之后怎么走的. 然后告诉我了这么一个命令: Tracert(跟踪路由)是路由跟踪实用程序,用于确定 I ...

  3. 小米手机 - Charles无法安装证书 因为无法读取证书

    1.不要使用小米原装的浏览器安装证书 2.使用第三方浏览器安装,如我使用的是UC浏览器 3.使用第三方浏览器安装的证书格式是".pem"格式问卷 4.将这个文件放入小米的downl ...

  4. java笔试常见的选择题

    1.已知表达式int m[] = {0,1,2,3,4,5,6}; 下面那个表达式的值与数组的长度相等()A m.length()B. m.lengthC. m.length()+1D. m.leng ...

  5. Docker拉取镜像时错误解决办法

    拉取docker中的镜像时报错: [root@master ~]# docker pull docker.io/centos:latest Trying to pull repository dock ...

  6. promise、async、await、settimeout异步原理与执行顺序

    一道经典的前端笔试题,你能一眼写出他们的执行结果吗? async function async1() { console.log("async1 start"); await as ...

  7. ansible如何用root用户运行普通用户授权

    ansible默认以root用户进行授权,但是需要用普通用户执行一些命令操作: 如: 1. ansible 10.0.0.1 -m raw -a "date" -u www 但是会 ...

  8. 63. （FileInputStream）输入字节流

    IO分类:    按照数据流向分类:        输入流                输出流        按照处理的单位划分:        字节流:字节流读取的都是文件中的二进制数据,读取到的 ...

  9. java基础之toString的使用方法

    toString方法,其返回值类型为String类型,用于返回表示对象值的字符串,返回类名和它的引用地址(散列码 hashCode)toString方法是Object类中的一个实例方法,所有的java ...

  10. 生产环境用到的几个有用的Linux命令

    有时候,几个有用的Linux命令可以很大的提高你的工作效率. 1.free -m 这个命令我暂时就只会这么使用,它可以查看服务器的内存资源 2.top 这个命令同样可以查看服务器的资源,当然我还是用它 ...