我目前有一系列图像,当在桌面上激活onmouseover时,它会在其位置显示另一个图像。这适用于所有桌面,移动和平板电脑浏览器 - 除了iPad Safari / Chrome上的横向外。
我主要感到困惑,因为它在肖像方面工作得很好,但是一旦你将iPad改为横向 - 点击图像就无效了。我们还有一个脚本可以刷新方向更改的页面,但我认为这不会导致任何问题。如果我错了,请纠正我。
以下是我们代码的摘录:
<img src="/getmedia/b69c7c54-e84e-486d-b9fb-b89644b0c7fe/Claire-1.jpg?width=224&height=224&ext=.jpg" alt="Claire" title="Claire" class="team-member-static4" onmouseover="jQuery(this).attr('src','/getmedia/6abe9a6f-0144-470e-8dc5-3124c1446642/Claire-2.jpg?width=224&height=224&ext=.jpg').stop.toggle();" onmouseout="jQuery(this).attr('src','/getmedia/b69c7c54-e84e-486d-b9fb-b89644b0c7fe/Claire-1.jpg?width=224&height=224&ext=.jpg');">
非常感谢。
答案 0 :(得分:0)
看起来像这样:
var claire = {}
$(function() {
claire.$img = $("img[alt='Claire']");
claire.on=claire.$img.data("on")+'?width=224&height=224&ext=.jpg';
claire.off=claire.$img.attr("src");
claire.$img.on('mouseover touchstart',function(){
$(this).prop("src",claire.on) // .stop.toggle(); // why toggle?
})
.on('mouseout touchend',function(){
$(this).prop("src",claire.off);
});
使用
<img src="/getmedia/b69c7c54-e84e-486d-b9fb-b89644b0c7fe/Claire-1.jpg?width=224&height=224&ext=.jpg"
alt="Claire" title="Claire" class="team-member-static4"
data-on="/getmedia/b69c7c54-e84e-486d-b9fb-b89644b0c7fe/Claire-1.jpg" />