Question

我想在kwicks图像滑块上添加一个png帧，但是当我这样做时，我失去了交互性。

如何在元素上添加png框架而不会丢失下面元素的交互性？

您可以在此处查看示例：www.jujumamablog.com/jujumama/dev.html

以下是开发页面的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
    <head>
        <title>Kwicks Examples: Example 1</title>
        <script src="http://jmar777.googlecode.com/svn/trunk/js/jquery-1.2.6.js" type="text/javascript"></script>
        <script src="http://jmar777.googlecode.com/svn/trunk/js/jquery.easing.1.3.js" type="text/javascript"></script>

        <script src="http://kwicks.googlecode.com/svn/branches/v1.5.1/Kwicks/jquery.kwicks-1.5.1.pack.js" type="text/javascript"></script>
                <style type="text/css">

        /* defaults for all examples */
        .kwicks {
            list-style: none;
            position: relative;
            margin: 5px 0;
            padding: 0;
        }
        .kwicks li{
            display: block;
            overflow: hidden;
            padding: 0;
            cursor: pointer;
        }

        /* example 1 */
        #example1 .kwicks li{
            float: left;
            width: 96px;
            height: 200px;
            margin-right: 2px;
        }
        #example1 #kwick1 { 
            background-color: #53b388;
        }
        #example1 #kwick2 {
            background-color: #5a69a9;
        }
        #example1 #kwick3 {
            background-color: #c26468;
        }
        #example1 #kwick4 { 
            background-color: #bf7cc7;
        }
        #example1 #kwick5 { 
            background-color: #bf7cc7;
            margin-right: none;
        }
        #sliderFrame{
            background: transparent url('sliderFrame.png') no-repeat scroll 0 0;
            display: block;
            height: 206px;
            position: absolute;
        //  top: 150px;
            width: 504px;
            z-index: 99;
            margin-top: -4px;

        }
        </style>

    <script type="text/javascript">
        $().ready(function() {
            $('.kwicks').kwicks({
                max : 205,
                spacing : 5
            });
        });
    </script>

    </head>

    <body>

            <div id="example1">
            <div id="sliderFrame"></div> <!-- This blocks ineteractivity -->
                <ul class="kwicks">

                    <li id="kwick1"></li>
                    <li id="kwick2"></li>
                    <li id="kwick3"></li>
                    <li id="kwick4"></li>
                    <li id="kwick5"></li>
                </ul>
            </div>
            <div style="clear:both;"></div>

            <div id="example1">
                <ul class="kwicks">

                    <li id="kwick1"></li>
                    <li id="kwick2"></li>
                    <li id="kwick3"></li>
                    <li id="kwick4"></li>
                    <li id="kwick5"></li>
                </ul>
            </div>
            <div style="clear:both;"></div>

    </body>
</html>

提前致谢

Answer 1

您不能将一个元素放在另一个元素上并保留较低级别的交互性。至少，不是没有使用Javascript;我想不出一个可以实现你想要的插件或脚本。

您是否可以将图像用作要保留其功能的元素的某种形式的背景？

Answer 2

不幸的是，使用z-index到'layer'元素将导致下面的元素变得非交互，但它们仍然显然是可见的。

因此，这里有两个选项：

JavaScript - 与下面的彩色框（第1层）非常相似，在“圆角”图像（第2层）上放置另一个元素（第3层），但制作背景颜色：透明对于那些可交互的盒子，然后引用JavaScript来移动第一层盒子以及第三层盒子。
CSS - 切割要在这些交互式框中使用的圆角图像，并将其用作背景图像。这将是一个相当数量的工作，试验和错误，以使其正确，但意味着没有额外的JavaScript或搞乱z-index。

希望有所帮助，并且不会进一步混淆问题：）

如何在不失去交互性的情况下添加“框架”图像（png）

2 个答案: