使用jQuery左右移动图像
[英]Moving image left and right with jQuery
问题描述
好的，这是更新的工作代码。 使图像具有相对性就可以了。 现在剩下的唯一事情就是，一旦我从钥匙上移开手指，我就希望图像停止移动。 我如何正确使用键盘？
<html>
<head></head>
<body>
<img id="pic" src="run0.png" alt="image" height="100" width="100" style="position: relative;"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).keydown(function(event){
var keycode = (event.keyCode ? event.keyCode : event.which);
if(keycode == '39'){
$("#pic").animate({
left: '+=10px',
});
}
});
</script>
</body>
</html>
我也不想不必先使用HTML将图像放在文档上，而只是将其从Javascript / jQuery附加到文档中。 如果有人可以帮助我使用纯Javascript做到这一点，将不胜感激。
3 个解决方案
解决方案1
2 2015-11-28 08:59:07
按键无法检测到箭头键。 阅读： 在JavaScript中检测箭头键的按下
同样，为使left属性影响图像，也应绝对将其放置在页面中。 这是一个示例演示： https : //jsfiddle.net/6haxsbz9/
HTML：
<img id="pic" src="https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="image" width="100" />
CSS：
img {
position:absolute;
left:10px;
top:10px;
}
JS：
$(function () {
$(document).keydown(function (event) {
var keycode = (event.keyCode ? event.keyCode : event.which);
if (keycode == '39') {
$("#pic").animate({
left: '+=5px',
});
}
});
});
解决方案2
0 2015-11-28 09:00:24
首先，如评论中所述，修复语法错误！
然后，您要使用left在CSS position的CSS属性为图片设置动画。 如果将其添加到图像中，它将可以正常工作（我只是将键码97用作a因为我不知道39是什么）：
HTML：
<img id="pic" src="run0.png" alt="image" height="100" width="100" />
CSS：
#pic {
position: absolute;
left: 20px;
}
jQuery的：
$(document).keypress(function (event) {
// var keycode = (event.keyCode ? event.keyCode : event.which);
console.log(event.keyCode);
if (event.keyCode == '97') {
$("#pic").animate({
left: '+=5px',
});
}
});
参见jsfiddle： https ://jsfiddle.net/914m6ut3/
解决方案3
0 2015-11-28 09:01:11
尝试为图像添加相对位置：
<img id="pic" src="run0.png" alt="image" height="100" width="100" style="position: relative;" />
在小部件代码中没有jQuery的情况下将光标图像向左滑动到右侧
[英]Moving with cursor image left slide to right without jQuery in Widget code
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.