单击表格单元格或单击图像本身时翻转图像
Flip an image when a table cell is clicked, or the image itself is clicked
如果单击单元格或单击图像本身,我正在尝试将箭头翻转 180 度。这是我的代码: 注意:要翻转的图像是第一行中ID为image1的图像。一旦我让第一个图像工作,我将翻转所有图像。
<thead>
<tr>
<th style="text-align:left; padding-top: 20px;" width="10%" title="Sort by Symbol">Symbol <img src="/images/sort-arrow.jpg" title="Sort by Symbol" alt="Sort by Symbol" class="sort-right move-left bottom-image" id="image1"/></th>
<th style="text-align:left;" width="20%" title="Sort by Company Name">Company<br><span class="move_right">Name</span> <img src="/images/sort-arrow.jpg" title="Sort by Company Name" alt="Sort by Company Name" class="sort-right move-left"/></th>
<th style="text-align:center;" width="12%" title="Sort by Buy Date"><span class="center-text">Buy</span><br>Date <img title="Sort by Buy Date" src="/images/sort-arrow.jpg" alt="Sort by Buy Date"/></th>
<th style="text-align:center;" width="10%" title="Sort by Buy Price"><span class="center-text">Buy</span><br>Price <img title="Sort by Buy Price" src="/images/sort-arrow.jpg" alt="Sort by Buy Price"/></th>
<th style="text-align:center;" width="9%" title="Sort by Closed Price"><span class="center-text">Closed</span><br>Price <img title="Sort by Closed Price" src="/images/sort-arrow.jpg" alt="Sort by Closed Price"/></th>
<th style="text-align:center;" width="9%" title="Sort by Closed Date"><span class="center-text">Closed</span><br>Date <img title="Sort by Closed Date" src="/images/sort-arrow.jpg" alt="Sort by Closed Date" /></th>
<th style="text-align:center;" width="10%" title="Sort by Current Return"><span class="center-text">Total</span><br>Return <img title="Sort by Current Return" src="/images/sort-arrow.jpg" alt="Sort by Current Return"/></th>
</thead>
还有Javascript:
$(function(event){
$("table .title a").tooltip({ bodyHandler: function(event) { return $($(this).attr("href")).html(); }, showURL: false, track: true, delay: 0 });
});
var value = 0
$("#image1").rotate({
bind:
{
click: function(){
value +=180;
$(this).rotate({ animateTo:value})
}
}
});
我正在使用jQuery Rotate插件
有什么建议吗?
只是重申一下:如果单击图像,或者单击图像所在的单元格,则图像应进行 180 度翻转。
您需要在
"th"中添加.rotate.click并防止在图像上传播1 .click像这样
var value = 0
$("th:first").click(function(){//you can add some class or id the first th or select only the first
value +=180;
$("#image1").rotate({ animateTo:value});//or $(this).find("img")
});
$("#image1").rotate({
bind:
{
click: function(e){
e.stopPropagation();//or the image will rotate 360
value +=180;
$(this).rotate({ animateTo:value})
}
}
});
http://jsfiddle.net/9FMks/2/
相关文章:
- 单击图像时打开“跨度”标记
- 单击图像后如何创建下拉菜单?[引导/角度]
- 当使用 Javascript 单击图像 A 时,如何将图像 B 的 src 更改为图像 A 的 src
- 单击图像滑块计时器的事件
- 单击图像更改图像并调用函数
- 如何通过单击图像按钮打开图像
- Div在单击图像时未执行slideTogle()
- 单击图像时如何播放音乐
- 尝试单击图像并打开模式ajax
- 画布:单击图像
- 使用javascript和php,在单击图像时将其移动到另一个位置
- 单击图像时播放声音
- 单击图像时不会出现圆圈,但对其他人有效
- 图像可以'单击图像时不会显示
- 单击图像时从数据库加载选项id
- 单击图像,获取坐标并将其保存在数据库JavaScript和Rails中
- 单击图像不执行任何操作
- 单击图像几秒钟后,打开一个链接
- 在 IE7 和 IE8 中单击图像时触发的 window.blur
- 如何在悬停图像时显示某些信息,并在单击图像时显示某些内容