当移动div到达特定区域时，将CSS应用于移动div。用于移动元素的静态放大镜 [英] Applying CSS to a moving div when it reaches certain area. Static magnifier for moving elements

问题描述

我偶然发现了创建一个非常具体的元素的问题。我有一个代码显示不同的内容 - 文本，图像和其他类型的内容。我想要做的就是添加一个静态的放大镜，这样所有移动的内容都会在放大镜区域进行缩放。

大多数jquery缩放或放大插件我看到从未使用固定位置，并使用2张图像并在放大镜区域内显示较大的图像或对每个元素使用额外的css来处理鼠标悬停。所以他们对我来说几乎没什么用。

我想要完成的是当任何移动的div到达放大镜区域时 - 触发创建覆盖原始的克隆div和css变换应用于克隆（可以说它是缩放2倍），它也必须具有比例变化速度，因此看起来很平滑（例如原始div为100px宽，并且会在放大区域内滑动2秒，因此速度为50px每秒 - 他的克隆将是200px宽，因此它必须每秒滑动100px等等）。请注意，所有这些操作仅在放大镜区域中可见。克隆div到达放大镜区域的末尾时，必须将其删除。

我已经创建了一个小提琴来增加感觉。

p> HTML：

 < div class ='scroll'> 
< div class ='scroll-content'> 
< img src =http://dummyimage.com/96x96/f0f0f0/626262.png&text=2>< / img> 
< img src =http://dummyimage.com/96x96/f0f0f0/626262.png&text=2>< / img> 
文字样本1 
< img src =http://dummyimage.com/96x96/f0f0f0/626262.png&text=2>< / img> 
< img src =http://dummyimage.com/96x96/f0f0f0/626262.png&text=2>< / img> 
< img src =http://dummyimage.com/96x96/f0f0f0/626262.png&text=2>< / img> 
文字样本2 
< img src =http://dummyimage.com/96x96/f0f0f0/626262.png&text=2>< / img> 
文本示例3 
< / div> 
  

CSS：

  div.scroll {margin-top：200px; 
 margin-left：100px; 
 white-space：no-wrap; 
 overflow：hidden; 
} 
 
 div.scroll> div.scroll-content {
 white-space：nowrap; 
 display：inline; 
 margin-top：20px; 
 margin-left：50 px; 
 width：auto; 
} 
 
 #zoom {
 position：absolute; 
 top：150px; 
剩下：150px; 
 height：200px; 
 width：200px; 
 border：solid;红色; 
 border-width：3px; 
 border-radius：155px; 
} 
 
 
 div.clone {
 white-space：nowrap; 
 display：inline; 
 margin-top：20px; 
 margin-left：50 px; 
 width：auto; 
 
 $ / code> 

现在最困难的部分 - 我的代码缺少开始和结束的触发器，所以我分为单独的部分。



jQuery：



  // this this scroll原始divs 
 
 $（函数scoll（）{
 var scroll = $（'div.scroll'）; 
 scroll.each（function（）{
 var mar = $（this），indent = mar.width（）; 
 mar.scroll = function（）{
 indent--; 
 mar.css（'text-indent'，indent ）; 
 if（indent< -1 * mar.children（'div.scroll-content'）.width（））{
 indent = mar.width（）; 
} 
}; 
 mar.data（'interval'，setInterval（mar.scroll，1/60））; 
}）; 
}）; 
  

这应该用css转换克隆原始div，但是我无法弄清楚如何设置触发器。我无法在javascript或jQuery文档中找到位置或坐标特定触发器。

  $（function clone（） {
 var val = 2; 
 $（'。scroll-content'）。clone（）。addClass（'clone'）。css（{
'-moz-transform'：' （'+ val +'）'，
'-webkit-transform'：'scale（'+ val +'）'}）。appendTo（'＃zoom'，scroll2）; 
 $（ '.clone'）。remove（）; 
}）; 
  

这应该滚动红圈内的克隆



<$ （）{
var $ {code> $（function scoll2（）{
var scroll = $（'div＃zoom'）;
scroll.each mar = $（this），indent = mar.width（）;
mar.scroll = function（）{
indent--;
mar.css（'text-indent'，indent ）;
if（indent< -1 * mar.children（'div.clone'）.width（））{
indent = mar.width（）;
}
};
mar.data（'interval'，setInterval（mar.scroll，1/60））;
}）;
}）;


所以主要的问题是设置开始和结束的正确触发器。

解决方案

不需要克隆元素。

这个小提琴 JSFiddle ，我用getClientRects（）来获取元素的区域。并将放大的类添加到图像中，只要它放到#zoom元素中。

在放大的类中使用CSS3 transform属性来放大图像。 p>

  .zoomable {
 transition：1s all; 
} 
 
 .zoomed-in {
 transform：scale（1.3）; 
} 
  

I've stumbled upon a problem of creating a very specific element. I have a ticker that shows different content - text, images and other types of content in it. What I want to do is to add a static "magnifier" so all the moving content would be scaled when it is in magnifiers area.

Most of jquery zoom or magnification plugins that I saw never used fixed position and worked on mouse over with either using 2 images and showing bigger one inside the magnifier area or using additional css for each element. So they are pretty much no use to me.

What I'm trying to accomplish is when any moving div reaches magnifier area - it triggers creation of a clone that overlays original div and css transformation is applied to the clone (lets say it is scaling 2x) it must also have proportional speed change so things look smooth ( for example original div is 100px wide and will slide inside magnifying area for 2 seconds so it's speed is 50px per second - his clone will be 200px wide so it must slide 100px per 1 second and etc.) . Note that all this actions are only visible in the magnifier area. When the clone div reaches the end of magnifier area it must be removed.

I've created a fiddle to make more sense.

FIDDLE

The code

HTML:

<div class='scroll'>
<div class='scroll-content'>
    <img src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=2"></img> 
    <img src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=2"></img>
    Text sample 1
    <img src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=2"></img>
    <img src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=2"></img>
    <img src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=2"></img>
    Text sample 2 
    <img src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=2"></img>
    Text sample 3
</div>

CSS:

div.scroll { margin-top: 200px;
margin-left: 100px;
white-space:no-wrap;
overflow:hidden;
}

div.scroll > div.scroll-content {
white-space:nowrap;
display:inline;
margin-top: 20px;
margin-left: 50 px;
width:auto;
}

#zoom { 
position: absolute;
    top: 150px;
    left: 150px;
height: 200px;
width: 200px;
border: solid; color:red;
border-width: 3px;
border-radius: 155px;
}


div.clone {
white-space:nowrap;
display:inline;
margin-top: 20px;
margin-left: 50 px;
width:auto;
}

Now the hard part - my code is missing triggers for beginning and ending so I divided into separate parts.

jQuery:

// this scrolls original divs

$(function scoll(){
var scroll = $('div.scroll');
scroll.each(function() {
var mar = $(this),indent = mar.width();
mar.scroll = function() {
    indent--;
    mar.css('text-indent',indent);
    if (indent < -1 * mar.children('div.scroll-content').width()) {
        indent = mar.width();
    }
};
mar.data('interval',setInterval(mar.scroll,1/60));
});
});

This should clone original divs with css transformation, however I can't figure out how to set the trigger. I can't find "position" or "coordinates" specific trigger in javascript or jQuery documentation.

$(function clone(){
var val = 2;
$('.scroll-content').clone().addClass('clone').css({
        '-moz-transform': 'scale(' + val + ')',
'-webkit-transform': 'scale(' + val + ')'}).appendTo('#zoom', scroll2);
$('.clone').remove();
});

This should scroll clones inside red circle

$(function scoll2(){
var scroll = $('div#zoom');
scroll.each(function() {
var mar = $(this),indent = mar.width();
mar.scroll = function() {
    indent--;
    mar.css('text-indent',indent);
    if (indent < -1 * mar.children('div.clone').width()) {
        indent = mar.width();
    }
};
mar.data('interval',setInterval(mar.scroll,1/60));
});
});

So the main problem is setting the correct triggers for beginning and ending.

解决方案

Cloning of element is not needed.

You can checkout this fiddle JSFiddle, I used getClientRects() to get the area of elements. And added the zoomed-in class to image whenever it gets inside the #zoom element.

and used CSS3 transform property inside zoomed-in class to zoom the image.

.zoomable {
    transition: 1s all;
}

.zoomed-in {
    transform: scale(1.3);
}

这篇关于当移动div到达特定区域时，将CSS应用于移动div。用于移动元素的静态放大镜的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！