Javascript 使用JQuery查找和复制图像
我正试图使用JQuery使用本文中存在的图像创建动态页眉。我计划给图像一个类(.thumbnail)。我想删除文章中的图像,一旦它被用于标题。逻辑如下:Javascript 使用JQuery查找和复制图像,javascript,jquery,image,Javascript,Jquery,Image,我正试图使用JQuery使用本文中存在的图像创建动态页眉。我计划给图像一个类(.thumbnail)。我想删除文章中的图像,一旦它被用于标题。逻辑如下: 使用.缩略图类查找IMG标记 将该图像移动到新的DIV(#dynHeader),对其进行分类。Image1 将图像缩放到x像素的高度,保持纵横比宽度 查找新缩放图像的宽度(var remainWidth) 计算#dynHeader的剩余宽度 将IMG复制到.Image1的右侧,称之为.Image2 将其宽度设置为remainWidth的值 将
- 使用.缩略图类查找IMG标记
- 将该图像移动到新的DIV(#dynHeader),对其进行分类。Image1
- 将图像缩放到x像素的高度,保持纵横比宽度
- 查找新缩放图像的宽度(var remainWidth)
- 计算#dynHeader的剩余宽度
- 将IMG复制到.Image1的右侧,称之为.Image2
- 将其宽度设置为remainWidth的值
- 将其裁剪到图像1的高度
- 使用特定值将其放置在Y轴上
//need to clone before removing class so that the original is deletable later.
var cache = $('img.thumbnail').clone().removeClass('thumbnail').addClass('Image1').css('float','left');
//remove the original from the text
$('img.thumbnail').remove();
//attach the cloned image to the header
$('#dynHeader').append(cache);
//find the ratio
var ratio = (cache.width() / cache.height());
//set variable to hold image height
var imageHeight = (365);
//set variable to hold image width
var imageWidth = (imageHeight*ratio);
//set the image height & width
cache.height(imageHeight).width(imageWidth);
//figure the amount of width remaining in the header
var remainWidth = $('#dynHeader').width() - imageWidth;
//clone the header image
var dupe = cache.clone();
//work with the cloned image - change the class to Image2, set the width and height dupe.removeClass('Image1').addClass('Image2').css("width",remainWidth+"px").css("height","auto");
//place Image2 to the right of Image1
cache.after(dupe);
然后我使用一些CSS来定位Image2并隐藏溢出(我拍摄的缩放和裁剪效果)
希望这对其他人有帮助!感谢Alex指出了正确的方向。这应该可以让你开始:(请记住,它100%都是从我的头顶上掉下来的,而且在这里很晚……可能有一些打字错误!) 它当然可以改进,但应该给你一个大致的想法:)
哦,至于在页面上放置相同的图像,没问题,只需克隆()元素,并将其添加到您想要的位置即可 这应该让你开始:(请记住,它100%都是从我的头顶上掉下来的,而且在这里很晚……可能有一些打字错误!) 它当然可以改进,但应该给你一个大致的想法:)
哦,至于在页面上放置相同的图像,没问题,只需克隆()元素,并将其添加到您想要的位置即可 亚历克斯,非常感谢。这是一个很好的开始。.clone()函数正是我所需要的。正如你所说,可能会有一些小问题,但这正是我所需要的。现在重新编写代码,我会在代码运行时(或者当我遇到另一个问题时)发布Alex,非常感谢。这是一个很好的开始。.clone()函数正是我所需要的。正如你所说,可能会有一些小问题,但这正是我所需要的。现在就重新编写代码,我会在代码运行时发布(或者当我遇到另一个问题时!)
#dynHeader{
height: 365px;
overflow: hidden;
margin-bottom: 30px;
}
img.Image2{
position: relative;
top: -150px;
}
//Find IMG tag with .thumbnail class:
$('img.thumbnail')
//Move that image to a new DIV (#dynHeader), class it .Image1
// change class before and then grab image
var cache = $('img.thumbnail').removeClass('thumbnail').addClass('Image1').clone();
// remove from context
$('img.thumbnail').remove();
// add it to the div
$('#dynHeader').append(cache);
// Scale the image to x pixels in height, maintain aspect for width
// cache selector
var cache = $('.Image1');
// calculate aspect
var ratio = (cache.width() / cache.height());
// calculate & store width
var remainWidth = (x*ratio);
// scale to x pixels in height
cache.height(x).width(remainWidth);
// Calculate the remaining width of #dynHeader
var remainHeaderWidth = $('#dynHeader').width() - remainWidth;
// Duplicate the IMG to the right of .Image1, call it .Image2
// assuming you mean "duplicate it and add to the right"
var dupe = cache.clone();
dupe.removeClass('Image1).addClass('Image2');
// Set its width to the value of remainWidth
dupe.width(remainHeaderWidth);
// Crop it to the height of .Image1
// not sure about the cropping, here's how you would change it without maintaing aspect
dupe.height(cache.height());
// add it after the first image
cache.after(dupe);
// Position it on the Y axis with a specific value
// cant remember off the top of my head but as far as I know you have to first find its
// position on the axis and then shift it maybe applying relative css positioning