向360图像查看器添加工具提示/热点
Adding tooltips/hotspots to 360 image viewer
我的站点中使用了一个图像旋转器,但现在我需要能够将热点添加到特定角度。这是我使用的插件
http://blog.stableflow.com/jquery-plugins/360-degrees-product-view/#comments
以前有人用过这个吗?可以在推特上添加热点吗?
我查看了插件代码,它不支持使用图像映射,所以我提取了您需要的基本代码,并在第三个图像上添加了一个大的黄点,您可以将其悬停在上面-这是一个演示。
HTML
<div id="product" style="width: 640px; height: 480px; overflow: hidden;">
...
<img src="03.jpg" usemap="#img03" />
<map name="img03" width="640" height="480">
<area shape="circle" coords="366,154,65" href="#" title="Yellow Dot!" />
</map>
...
</div>
CSS
.notseen {
position: absolute;
left: 0;
top: 0;
visibility: hidden;
}
编写脚本
// original: http://blog.stableflow.com/jquery-plugins/360-degrees-product-view/
// No need to include the plugin, this is a simplified version of it
jQuery(document).ready(function ($) {
var $product = $('#product'),
$imgs = $product.find('img'),
imageTotal = $imgs.length - 1,
clicked = false,
widthStep = 4,
currPos,
currImg = 0,
lastImg = 0;
$imgs.bind('mousedown', function (e) {
e.preventDefault(); // prevent dragging images
})
.filter(':gt(0)').addClass('notseen');
$product.bind('mousedown touchstart', function (e) {
if (e.type == "touchstart") {
currPos = window.event.touches[0].pageX;
} else {
currPos = e.pageX;
}
clicked = true;
return false;
});
$(document)
.bind('mouseup touchend', function () {
clicked = false;
})
.bind('mousemove touchmove', function (e) {
if (clicked) {
var pageX;
if (e.type == "touchmove") {
pageX = window.event.targetTouches[0].pageX;
} else {
pageX = e.pageX;
}
widthStep = 4;
if (Math.abs(currPos - pageX) >= widthStep) {
if (currPos - pageX >= widthStep) {
currImg++;
if (currImg > imageTotal) {
currImg = 1;
}
} else {
currImg--;
if (currImg < 1) {
currImg = imageTotal;
}
}
currPos = pageX;
$imgs.eq(lastImg).addClass('notseen');
$imgs.eq(currImg).removeClass('notseen');
lastImg = currImg;
// $obj.html('<img src="' + aImages[options.currImg] + '" />');
}
}
});
});
相关文章:
- 高图表 - 是否可以为每个系列添加工具提示格式化程序
- HTML5/Bootstrap-如何为引导程序图标添加工具提示
- 如何在d3js垂直分组条形图中添加工具提示
- 如何使用d3js为循环中的圆环图添加工具提示
- 在d3.js地图中添加工具提示
- D3.js如何使用折线图在我的图例中添加工具提示
- 使用 dojo 将鼠标悬停在动态下拉列表选择上时添加工具提示
- 在 Dojo Select 中添加工具提示
- 从 XML 列表填充的 ASP 下拉列表如何添加工具提示
- 在jQuery中添加工具提示
- 如何使用dojocharts为指标绘图添加工具提示
- 如何使用bootstrap或jquery添加工具提示以在下拉列表中显示所选值
- 在 data.feature 对象上添加工具提示,就像我们可以对标记所做的那样
- 在javascript图形中添加工具提示
- nvd3向多条形图添加工具提示
- 如何使用C#向方框图添加工具提示
- 为html.dropdownlist添加工具提示
- 在进度条引导中添加工具提示
- 在D3js甘特图中添加工具提示
- 如何在chart.js图形中添加工具提示