如何获取网站中最顶部图像的链接
How do i get the link of the topmost positioned image in a website?
我正在编写一个脚本,该脚本需要放置在任何网站上最顶部的图像的src,而不是源中的第一个图像,而是位置最高的图像。
我尝试了一些非常基本的东西,即检索第一个图像标签,但这不适用于由CSS/jQuery/JavaScript定位的图像。
那么知道我该如何做到这一点吗?
|-----------------
| .....title....
| |------|
| |image | <==== link needed
| |------|
|//text content
|Lorem dolor ipsum
我不确定 jQuery 回复,但我相信这仍然只会给出你相对图像坐标。在这篇较早的帖子之后,展示了一种获取页面上 HTML 元素的绝对 x、y 坐标,并窃取相同的方法从 PrototypeJS,以下代码应该可以满足您的需求,
警告,我认为 0 top 检查可以安全地用于确定图像是否不可见与否,但可能会有问题。此外,这只会获取 img 标签中的图像,而不是图像链接或使用 css 设置的任何内容。
// cumulative offset function stolen from PrototypeJS
var cumulativeOffset = function(element) {
var top = 0, left = 0;
do {
top += element.offsetTop || 0;
left += element.offsetLeft || 0;
element = element.offsetParent;
} while(element);
return {
top: top,
left: left
};
};
// get all images
var results = document.getElementsByTagName("img");
var images = [];
for (result in results) {
if (results.hasOwnProperty(result)) {
images.push(results[result]);
}
}
// map our offset function across the images
var offsets = images.map(cumulativeOffset);
// pull out the highest image by checking for min offset
// offset of 0 means that the image is invisible (I think...)
var highest = images[0];
var minOffset = offsets[0];
for (i in offsets) {
if (minOffset.top === 0 ||
(offsets[i].top > 0 && offsets[i].top < minOffset.top)) {
minOffset = offsets[i];
highest = images[i];
}
}
// highest is your image element
console.log(highest);
您需要
比较每个元素的.y
属性。
function getTopMostImage() {
//Get all images
var imgs = document.querySelectorAll("img");
//Define a variable that marks the topmost image
var topmost = imgs[0];
//Check all image positions and mark the topmost
for (i = 1; i < imgs.length; i++) {
if (topmost.y > imgs[i].y)
topmost = imgs[i];
}
return topmost.src;
}
加载后,您可以通过 first() 检查 Dom 中存在的第一个 img 元素 文档在这里希望对你有帮助
// Use the most appropriate selector for your images such as "body img" or bla bla...
var images = jQuery('img');
var topMostImageIndex = 0;
for (var i = 0; i < images.length; i++) {
if (jQuery(images[i]).position().top < jQuery(images[topMostImageIndex]).position().top) {
topMostImageIndex = i;
}
}
// It's the top-most image
images[topMostImageIndex];
相关文章:
- 背景图像顶部的滚动图像不移动
- 如何在引导程序中将输入文本框嵌入到图像的顶部
- 使用paperjs在图像顶部绘制
- HTML5 中图像顶部的超链接文本
- 引导进度条,顶部附有图像
- 如何在 jQuery 中将可点击的图像定位到浏览器顶部
- 如何停止幻灯片放映隐藏文本和图像跳到顶部,而下一张幻灯片进来
- 图像旋转背景 js 跳转到页面顶部
- HTML5 画布 - 我的线条/弧线没有出现在图像顶部
- 当圆形图像在圆轮中发生变化时,如何在顶部显示标签
- 在图像顶部显示文本
- 图像映射顶部的文本
- 使用 JavaScript 在鼠标悬停时在内容顶部查看放大的图像
- 在HTML和Javascript中的图像顶部“绘制”
- 获取图像以覆盖在表格顶部
- 如何在多个位置绘制svg,在另一个svg图像的顶部
- 当主图像调整大小时,使顶部图像保持原位
- 使用SuperScrollorama将图像从页面顶部放入
- 向下滚动后,顶部图像折叠到导航栏中
- 如何获取网站中最顶部图像的链接