0

我刚刚开始构建一个网页帮助（突出显示 + 教程步骤）jQuery 插件。你可以在这里看到最新的结果。

http://goo.gl/ZZ2xy

我第一次尝试突出显示是有 4 个覆盖 div，它们只是通过 css 转换移动。这很简单，但并不完美。它至少在 Chrome 中创建覆盖元素之间的空间线。

制作此动画的最佳方法是什么？

4

3 回答 3

1

我有更好的解决方案给你。这是一个概念证明，肯定需要调整，但总的来说它是有效的。这个想法是使用表 3x3 作为覆盖，对所有单元格使用半透明背景，除了一个假定作为窗口工作的单元格，通过它您正在查看目标 html 元素。

我想浏览器可能会有一些怪癖（可能是可修复的），但它仍然比您现在使用的更清洁和更好的选择。

示例代码可在此处获得http://jsbin.com/ekijev/4

于 2012-11-16T13:14:07.887 回答
0

正确使用 jQuery .css() 方法改进了很多。有时还是一条白线，但对我来说没关系。它已经在 github 上更新了。

老的：

$elem.css({"left" : x})
   .css({"top" : y}) 
   .width(width)
   .height(height);

新的

$elem.css({
            "left" : x,
            "top" : y,
            "width" : width,
            "height" : height
});
于 2012-11-16T12:25:53.530 回答
-1

所以我有一个褪色解决方案给你。只是基础知识，但应该足以帮助你。

只需将代码粘贴到记事本文件中保存并运行

代码更新

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
    <style>
    DIV{
        width:200px;
        height:200px;
        display:inline-block;
    }
    .black{
        background:black;
    }
    .yellow{
        background:yellow;
    }
    .red{
        background:red;
    }
    .green{
        background:green;
    }
    </style>
</head>
<body>
    <div id="container">
        <div id="1" class="yellow"></div>
        <div id="2" class="black"></div>
        <div id="3" class="red"></div>
        <div id="4" class="green"></div>
    </div>
</body>
<script>
    $(document).ready( function (){
        var target = 2;//id of element we dont want faded
        var pageElements = $('#container').find('*').toArray();//get all elements in our container
        for(var counter = 0; counter < pageElements.length;counter++){//itterate through them
            if(pageElements[counter].id != target){//if element is not our target fade
                $(pageElements[counter]).fadeOut("slow",OnFadeComplete);//fade

            }
        }
    });

    function OnFadeComplete(){
        $(this).attr('style','visibility:hidden;');
    }
</script>

于 2012-11-16T11:33:19.710 回答