相关疑难解决方法(0)

打开讨论 我正在寻找优化这个代码,可能是一个对象.但更重要的是,我是功能新手.我想学习传递,检索,返回变量.如果有人对此有任何好的教程链接,或者想讨论,请从这里开始.:)

我们知道,图像是矩形.我在div的单独z-index层中有一些透明的PNG.我遇到了一个问题,我试图点击其中一个图像,但它被顶部的div阻止了更高的z-index.是否可以点击通过PNG和他们的父div来实现这种效果？请参阅附图作为参考,它更能说明我的观点.

谢谢!

简而言之,出于某种原因,我认为我可以使用PNG的alpha作为hitspot.大声笑@那个想法.所以我在一个新的独立容器中创建了重叠的div,这些就是hitspots.

正如您所看到的,这是一个无限的旋转木马.点击时,点击点的z索引以及图像的z索引都会发生变化.至少可以说这是一个有趣的项目.我希望优化它,并学习如何更有效地使用函数(即传递,检索变量,返回变量等).

我希望,当我回到家时,我会发布一些有趣的对话.如果您对如何优化有任何想法,请分享!:)

(function (w, d) {
$(w).load(function () { //window load
    preload();
    $('#info div a:not([rel=ad])').find('img').hide();  //hides 'learn more' buttons
}); //end window.load

$(d).ready(function () {        //document ready
    onHover();                  //activate hover
    onClick();                  //activates click function
});                             //end document.ready

var isFirst =   ["1"],      //flag to see if the first click was triggered on a hotspot or not
    pxPos   =   ["1px", "399px", "577px", "782px", "969px", "1162px", "1330px"],    //pixel position where we will animate the targets
    name    =   ["bill", …

我有一个自定义的可拖动元素(拖动从点击开始,到点击结束),可以在某些区域删除.鼠标悬停区域决定是否接受当前可拖动,并分别更改其颜色.一切都像魅力一样,直到客户决定可拖动元素应位于光标的上方和左侧,这就是故事开始的地方.

当我移动它时,我意识到鼠标悬停事件现在转移到可拖动的,而不是区域.我做了一些搜索,发现了魔法

pointer-events:none

CSS属性.遗憾的是,这在IE9中不起作用,它是我们的目标浏览器.

这是一个简单的例子:http://jsfiddle.net/q9njK/5/

问题是:我能否以更简单的方式在IE9中使用它,而不是直接观察鼠标移动并计算现在哪个区域是指针？

Edit_1:通过"直接观看mousemove"我的意思是这样的解决方案:http://jsbin.com/uhuto 在mousemove的情况下,这将是缓慢而丑陋的.嗯,我知道,"缓慢而丑陋"是IE的座右铭,但如果某处存在更优雅的解决方案,我想知道它.

Edit_2:似乎IE9 pointer-events: none甚至不支持SVG(这里是一个例子,在IE9中不起作用:http://jsfiddle.net/q9njK/9/),所以除了绑定到document.mousemove之外别无他法.或者是吗？

我之前没有在这里发帖,但已经广泛阅读,所以我希望我不违反任何规则......

我试图在传单地图上放置一种掩模图像(一个带有透明圆孔的黑色正方形); 使它看起来像旧示波器屏幕上显示的圆形地图;-).绝对位于顶部:0px; 底部:0px;.固定,独立于缩放或平移.

我可以显示图像,在某些情况下我甚至可以让地图平移和放大透明孔,我甚至可以按X关闭标记上的弹出窗口,但无论我尝试什么,我都无法管理单击或触摸时使标记弹出窗口出现.

我尝试过多种组合:使用PNG图像或原始SVG代码,在div中改变z-index.我尝试在同一容器中,在不同的容器中,甚至将其添加到传单控制窗格:

document.getElementsByClassName("leaflet-control-container")[0].innerHTML += '\
    <svg style="position: absolute; top:  0px; left: 0px; height: 360px; width: 360px;">\
        <g>\
            <path style="fill-rule: evenodd; fill: black; stroke: black; stroke-width: 0"\
                  d="M 0,0 L 360,0 L 360,360 L 0,360 z M 180,10 A 170,170 0 0,1 180,350 A 170,170 0 0,1 180,10 z"></path>\
        </g>\
    </svg>';        

图像显示正常,但与Leaflet的交互已损坏,无法进行弹出交互.

如果我将svg的z-index设置为-1,则不再显示掩码,但弹出窗口确实出现了.

在通知悬停时,我希望它使不透明度变为半透明,并且能够像在此通知插件中一样点击它Pines Notify

我尝试使用pointer-events:none,但随后它禁用了DOM元素,因此jQuery不能处理这个元素.我需要jQuery在悬停和悬停时执行代码.怎么做到呢 ？

我有一个canvas-mouse横跨整个屏幕的canvas元素() - 其目的是在特定大小的鼠标周围绘制一个50%的不透明度圆(grabsize).页面上还会有一些div中的图像.我希望这些图像可以点击/可以浏览,但我也希望50%不透明度的圆圈canvas-mouse出现在它们之上.

有没有办法实现这个目标？

HTML:

<canvas id="canvas-mouse" class="fullscreen"></canvas>
<div class="object die"><img src="images/Die_d6.svg"></div>

CSS:

html, body {
    width:  100%;
    height: 100%;
    margin: 2px;
    overflow: hidden;
    color: #FFFFFF;
    background-color: #2C744C;
}

canvas.fullscreen {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -1;
}

.object {
    position: absolute;
}

#canvas-mouse {
    z-index: 10;
}

JavaScript的:

CanvasRenderingContext2D.prototype.drawCircle = function(xpos, ypos, radius, linewidth, linecolor, fill) {
    if(typeof(linewidth)==="undefined") {
        linewidth = 1;
    }
    if(typeof(linecolor)==="undefined") {
        linecolor = "#000000";
    }

    this.beginPath();
    this.arc(xpos, …

我有两个 div，每个 div 都有按钮。div 应该以最节省空间的方式排列，如下面的屏幕截图所示：

但是当我这样做时，无法再单击“暖”和“热”按钮（因为另一个 div 正在重叠。

解决这个问题的好方法是什么？

这是我的 html：

<div id="page1">
        <div id="formScales">
            <div class="formContent" id="noise">
                <p>Noise</p>
                <input type="button" id="nbtn1" value="Noisy" />
                <input type="button" id="nbtn2" value="Medium noisy" />
                <input class="active" type="button" id="nbtn3" value="Neutral" />
                <input type="button" id="nbtn4" value="Medium silent" />
                <input type="button" id="nbtn5" value="Silent" />       
            </div>

            <div class="formContent" id="lighting">
                <p>Lighting</p>
                <input type="button" id="lbtn1" value="Bright" />
                <input type="button" id="lbtn2" value="Medium bright" />
                <input class="active" type="button" id="lbtn3" value="Neutral" />
                <input type="button" id="lbtn4" value="Medium dark" />
                <input type="button" id="lbtn5" value="Dark" /> …

我有:

<div style="bottom:0; left:0; right:0; position:fixed; z-index:50; display:inline-block;">
    <div style="margin:auto; width:500px; background-color:#90C553; -moz-border-radius-topleft:5px; -moz-border-radius-topright:5px; border:1px solid #CCC; text-align:center;">
        <h3 style="font-size:17px; color:#0072A7; padding:10px 15px;">example</h3>
    </div>
</div>

如果有与此div相同级别的内容,则div溢出它.

有没有办法解决这个问题而不改变整个设计结构？

UPDATE

外部div的空间从一侧延伸到另一侧100%.由于它具有z-index属性,因此会溢出下面的所有内容.因此,如果我有例如按钮,在滚动期间将低于此div,它将无法推送.

我在一个 div 下有一个链接，高度和宽度为 100%，固定位置和 z-index: 5。我需要将此 div 保持在我的链接上方，但链接不起作用。我可以使链接工作但将此 div 保留在我的链接上方吗？

https://jsfiddle.net/8hu90e9x/1/

div {
  background:grey;
  width:100%;
  height:100%;
  position:fixed;
  top:0;
  opacity:0.5;
  z-index:5
}

a {
  font-size:50px;
  z-index:0
}

<a href="http://google.com"> My link</a>

<div></div>

#bottom_fade {
            position: absolute;
            bottom: 0;
            width: 100%;
            background: url("bottom-fade.png");
            background-repeat:repeat-x;
            height: 400px;
            z-index: 2;
            }
        .categories {
            position: absolute;
            left: 50%;
            color:black;
            word-wrap: break-word;
            font-family: 15px 'Libre Baskerville', serif;
            margin-left: -200px;
            z-index: 1;
            }
        .categories td {
            width: 200px;
            }

你可以在这里看到上面代码的结果.尝试调整浏览器窗口的大小,以便您不得不滚动查看表格中的整个文本.

滚动时,您可能会看到它#bottom_fade不会保持粘在页面底部,但会跟随您的滚动.我不希望这种情况发生:无论滚动条发生什么变化,我怎么能说bottom_fade始终保持连接到浏览器窗口的底部？

非常感谢!