jq练习-点击改变图片

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style>
 7             td, img {
 8                 width: 100px;
 9                 height: 100px;
10             }
11         </style>
12     </head>
13     <body>
14         <table border="1px" >
15             <tr>
16                 <td><img src="images/1.jpg"/></td>
17                 <td><img src="images/2.jpg"/></td>
18                 <td><img src="images/11.jpg"/></td>
19             </tr>
20         </table>
21         <img id="showImg" src="images/1.jpg"/>
22
23         <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
24         <script>
25             $(function(){
26                 $("tr img").click(function () {
27                     $("#showImg").attr("src", $(this).attr("src"));
28                     console.log($(this).index("tr img"));
29                 })
30             })
31
32         </script>
33
34     </body>
35 </html>

时间： 2024-11-05 04:02:47

jq练习-点击改变图片的相关文章

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

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

<html><head><meta charset="utf-8"><title></title><script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script><style>.bg1 { background

jquery点击toggle并改变图片src

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

系统的 UIScrollView 就有多点触摸改变图片的大小的功能,如果在向添加别的触摸事件,如这次讲到的双击图片大小就可以自定义一个 scrollView,当然,这个 scrollView 是继承自系统的 UIScrollView 的,这样,它仍然具有系统 scrollView 的特性,另外,可以添加自己想要的特性. 新的 scrollView 只需要添加一个方法,就可以实现双击图片变大的功能 #import "ZYScrollView.h" @implementation ZYS

函数传参，改变Div任意属性的值&&图片列表：鼠标移入/移出改变图片透明度

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

UITableviewCell点击改变背景颜色, 标题高亮.

改变UITableViewCell选中时背景色: cell.selectedBackgroundView = [[[UIImageView alloc] initWithImage:[UIImage imageNamed:@"cellart.png"]] autorelease]; // 点击背景图片 cell.selectedBackgroundView = [[[UIView alloc] initWithFrame:cell.frame] autorelease];

点击放大图片或者文字

在鑫旭大神博客,看到这个插件的效果,觉得效果真的好好啊,佩服佩服呀. 不禁觉得大神的Css功底真的很深.再次佩服. 贴出研究过的插件源码,里面注释都是我自己琢磨的,如有不同意见欢迎探讨. jQuery.fn.fancyZoom = function(options){ var options = options || {}; //初始化参数 var directory = options && options.directory ? options.directory : 'images'

[读码时间] 图片列表：鼠标移入/移出改变图片透明度

说明:代码来自网络.注释为笔者学习时添加. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>图片列表:鼠标移入/移出改变图片透明度</title> <style> ul,li{ /*去除内外边距,去除列表默认样式*/ margin:0; padding:0; list-style-type:none; } #imgList{ /

WP8_区分滑动和点击(在图片列表中)

在windows phone中,对于一个页面中有图片列表的,滑动的时候,很容易被误认为是点击了图片,而打开图片详细信息等,原意是滑动列表,由此对图片添加2个事件,来控制其点击行为(滑动的时候,基本不会执行到do clicked something处) private bool _isClickEnable = false; private DateTime _clickedTime; private void Img1_OnMouseLeftButtonDown(object send