覆盖按钮覆盖所有图像
Overlay button over all images
基本上我想循环通过html和得到所有的图片和覆盖一个小按钮在他们悬停,所以当用户点击那个按钮,一堆信息的图片将出现。现在我可以在照片上覆盖一个小图标,当它被点击时会产生一个弹出窗口,但我不知道如何动态地在悬停的所有照片上添加一个图标。这就是我目前所做的http://jsfiddle.net/s5sp1h6e/1/
//Getting all the images
function getAllImages()
{
var images = document.getElementsByTagName('img');
var srcList = [];
for(var i = 0; i < images.length; i++)
{
srcList.push(images[i].src);
}
}
I've found a script that overlays a image over all images but every time i'm changing the size of the image i'm overlaying, the script stops working and i can't understand why.
如果我想改变这一行的宽度和高度要硬编码,脚本停止工作。
var overlay = $('<img class="protectionOverlay" src="' + overlayImg + '" width="' + img.width() + '" height="' + img.height() + '"/>') bla bla..
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(function()
{
var overlayImg = 'http://www.privdog.com/PrivDog/logo-medium.png';
var useOnAllImages = true;
// Preload the pixel
var preload = new Image();
preload.src = overlayImg;
$('img').on('mouseenter touchstart', function(e)
{
// Only execute if this is not an overlay or skipped
var img = $(this);
if (img.hasClass('protectionOverlay')) return;
if (!useOnAllImages && !img.hasClass('protectMe')) return; // The script will be applied to all images. IF u don't want this -> useOnAllImages = false and class="protectMe"
// Get the real image's position, add an overlay
var pos = img.offset();
//var xx = overlayImg.offset();
//alert(xx.top);
var overlay = $('<img class="protectionOverlay" src="' + overlayImg + '" width="' + img.width() + '" height="' + img.height() + '"/>').css({position: 'absolute', zIndex: 9999999, left: pos.left, top: pos.top}).appendTo('body').bind('mouseleave', function()
{
setTimeout(function(){ overlay.remove(); }, 0, $(this));
});
if ('ontouchstart' in window) $(document).one('touchend', function(){ setTimeout(function(){ overlay.remove(); }, 0, overlay); });
});
}
基本上您需要为鼠标悬停和鼠标离开添加一个事件处理程序。在处理程序中对图像应用必要的更改。
$("img").on("mouseover", function () {
$(this).addClass("overlay-class");
var icon = $("<span class='icon' />").appendTo(document.body);
// logic to position the icon
}).on("mouseout", function () {
$(this).removeClass("overlay-class");
$(".icon").remove();
});
相关文章:
- 点击(右键点击)使用传单地图库获取图像覆盖的像素坐标
- PNG图像被覆盖,但每个图像都有一个链接可以更改,每次一个-Javascript/jQuery/CSS
- 将谷歌地图中的平移边界设置为图像覆盖
- TinyMCE图像上传覆盖images_upload_handler
- 如何使用 OnClick 事件更改结构 JS 的覆盖图像
- 多个背景图像,一个覆盖另一个
- node.js在覆盖图像时无法提供图像
- 如何使用PHP、提交和单选按钮复制/重命名/覆盖图像
- 在HTML中覆盖图像
- 如何删除覆盖图像查看器的溢出(滚动条)
- 使用CSS悬停类悬停在链接上,并在页面的其他位置显示覆盖图像
- 覆盖图像与砌体在WP
- 如何覆盖图像和链接路径在iframe对象
- 使用Javascript覆盖图像文件
- 覆盖图像与文本,保存和共享
- 添加多个水印/覆盖图像到amcharts.com图表
- 是否有可能隐藏(切换)主地图层,只显示地面覆盖图像本身?
- 覆盖图像与JS, HTML, CSS
- 防止在加载覆盖图像时显示列表项
- 谷歌地图api v3覆盖图像与搜索栏