当移动的 div 到达特定区域时将 CSS 应用到它。用于移动元件的静态放大镜

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

我看到的大多数 jquery 缩放或放大插件从未使用固定位置，而是在鼠标悬停时使用 2 个图像并在放大镜区域内显示较大的图像或为每个元素使用附加 css。所以它们对我来说几乎没有用处。

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

我创建了一个小提琴以使其更有意义。

FIDDLE http://jsfiddle.net/4mTMw/770/

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;
}

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

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));
});
});

这应该通过 css 转换克隆原始 div，但是我不知道如何设置触发器。我在 javascript 或 jQuery 文档中找不到“位置”或“坐标”特定触发器。

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

这应该将克隆滚动到红色圆圈内

$(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));
});
});

因此，主要问题是为开始和结束设置正确的触发器。

不需要元件的克隆。

你可以看看这个小提琴JSFiddle http://jsfiddle.net/4mTMw/774/，我使用 getClientRects() 来获取元素的面积。每当图像进入 #zoom 元素时，都会将放大类添加到图像中。

并在 Zoomed-in 类中使用 CSS3 变换属性来缩放图像。

.zoomable {
    transition: 1s all;
}

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