1

我正在使用 jquery 一次实现一个轮换。我有一些图像我想使用“touchmove”、“swipeleft”或“swiperight”一次旋转一个。

首先，我制作一个可以放置所有图像的背景。我的问题是，我可以在开始时给出一个静态值（左上角）并更改 swipeleft 和 swiperight 事件的顶部和左侧值。

这就是我想要实现的目标： 带有圆形窗格的浏览器屏幕截图

我的代码：

<body>

<div class="outer-container">


</div>
</body>

.outer-container{
background-image: url(images/dial.png);
width: 400px;
height: 403px;
background-size: cover;
top: 280px;
left: 32%;
position: absolute;
}

这就是它现在的样子：

带有没有按钮的圆形窗格的浏览器屏幕截图

4

1 回答 1

0

添加新图像：只需放置一堆这些：<img src="--path--" style="position:absolute;top:--value--;left:--value--;" id="--uniqueID--"></img>并将 --path-- 替换为图像的路径，将 --value-- 替换为适当的位置。还将 --uniqueID-- 替换为唯一 ID（两张图片不应具有相同的 ID）。

我不完全确定您在问什么，但是您可以在页面中包含一个样式表来设置初始值top和left值，然后使用 jQuery 的 .css() 动态更改这些值。

$('.outer-container').on('swipeleft',function(e){
      e.preventDefault();
      $('#--uniqueID--').css("left",newLeftValue);
      $('#--uniqueID--').css("top",newTopValue);
});

将 --uniqueID-- 替换为您要移动的图片。

用适当的值替换 newLeftValue 和 newTopValue。

有关 jQuery 的 css 方法的更多信息，请参阅http://api.jquery.com/css/。

于 2013-09-05T09:53:08.147 回答