小编use*_*364的帖子

我正在尝试显示/隐藏一些谷歌地图标记,具体取决于缩放级别.我已经看过这里的答案了,虽然我已经更好地了解了我的意图,但我没有运气能够将它实现到我的谷歌地图中.

var infowindow = new google.maps.InfoWindow();
var marker, i;
var locations = [
    ['<div style="width: 170px;">Title1</div>', 50.794785, -1.116947, image],
    ['<div style="width: 190px;">Title2</div>', 50.797, -1.109, image],
    ['<div style="width: 120px;">Title3', 50.796928, -1.107119, '../images/map-pointer.png'],
    ['<div style="width: 150px;">Title4</div>', 50.794703, -1.117880, '../images/map-pointer.png']
];
/* Get the markers from the array */
for (i = 0; i < locations.length; i++) {  
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
        map: map,
        icon: locations[i][3],
        zIndex: 10
    }); 
    /* Open marker on mouseover */
    google.maps.event.addListener(marker, 'mouseover', (function(marker, i) …

我有一个SVG图像,我想从块颜色更改为渐变.我有这个工作,但我想有一个过渡或动画.这是否可能 - 如果是这样,它将如何实现？

http://jsfiddle.net/otaxjpa2/

HTML:

<svg width="96px" height="96px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
<defs>
    <linearGradient id="gradient" gradientUnits="userSpaceOnUse" fy="90%" >
        <stop  offset="0" style="stop-color:#1EBEE0"/>
        <stop  offset="1" style="stop-color:#952491"/>
        <animate attributeName="fy"from="0" to="1" dur="5s" repeatCount="indefinite" />
    </linearGradient>
</defs>
    <path id="time-3-icon" d="M256,50C142.229,50,50,142.229,50,256c0,113.77,92.229,206,206,206c113.77,0,206-92.23,206-206
    C462,142.229,369.77,50,256,50z M256,417c-88.977,0-161-72.008-161-161c0-88.979,72.008-161,161-161c88.977,0,161,72.007,161,161
    C417,344.977,344.992,417,256,417z M382.816,265.785c1.711,0.297,2.961,1.781,2.961,3.518v0.093c0,1.72-1.223,3.188-2.914,3.505
    c-37.093,6.938-124.97,21.35-134.613,21.35c-13.808,0-25-11.192-25-25c0-9.832,14.79-104.675,21.618-143.081
    c0.274-1.542,1.615-2.669,3.181-2.669h0.008c1.709,0,3.164,1.243,3.431,2.932l18.933,119.904L382.816,265.785z"/>
</svg>

CSS:

svg {
   fill: blue;
    transition: all 0.3s ease;
    display: inline-block;    
            -webkit-transition: fill .4s ease;
        -moz-transition: fill .4s ease;
        -o-transition: fill .4s ease;
        transition: fill .4s ease;  
}


svg:hover {
    fill: url(#gradient); …

我发现Firefox(44.0.2)渲染的盒子阴影CSS非常微弱/轻盈.

如果你比较Chrome和Firefox之间的差异,它在Firefox中看起来要轻得多. https://jsfiddle.net/8db8zr6q/

我想知道是否有人之前遇到过这个问题,是否有什么可以解决这个问题？

当前代码:

.shadow {
  height: 400px;
  -webkit-box-shadow: inset 0px -200px 101px -52px rgba(0,0,0,1);
  -moz-box-shadow: inset 0px -200px 101px -52px rgba(0,0,0,1);
  box-shadow: inset 0px -200px 101px -52px rgba(0,0,0,1);
}

问题图片:

我最近一直在将脚趾浸入 SVG 中，并且我目前正尝试在用户将鼠标悬停在钻石上方时将其变形为圆形。

我在CSS Tricks 上找到了这个教程

我注意到他们使用点来制作动画，但是我的 SVG 形状是：

<circle cx="49.873" cy="50.155" r="49.845"/>

和

<rect x="15.211" y="14.798" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -20.8426 50.3112)" width="70.198" height="71.034"/>

有没有办法做到这一点？我如何获得这些形状的点，以便我可以遵循 CSS Tricks 教程？

我正在使用最新的Google分析代码:

(function(i,s,o,g,r,a,m){  
    i['GoogleAnalyticsObject']=r;
    i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();
         a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;
         a.src=g;m.parentNode.insertBefore(a,m) })
      (window,document,'script','//www.google-analytics.com/analytics.js','ga');

      ga('create', 'XXXXXXXXX', 'XXXXXXXX');   
      ga('send', 'pageview');

我使用以下内容进行事件跟踪以处理下载链接:

<a href="#" onclick="ga('send', 'event', 'Download', 'PDF', 'FILE NAME');">

但是,它没有在mailto链接上工作 - 当我在控制台中查看它说请求已被取消.这就是我正在使用的:

<a href="mailto:email@address.com" onclick="ga('send', 'event', 'Contact', 'Email', 'Name here');">

当我删除"mailto"时,它将跟踪.

我设置错了吗？

编辑:如果我把一个target ="_ blank"看起来它会起作用 - 然而它会打开另一个不理想的窗口.

第二个编辑:它似乎与Chrome有关 - 我在Firefox和IE中测试过,当我这样做时它有效 - 其他人都经历过这个吗？

我很难让我的Isotope插件正常工作.我尝试过很多不同的东西,但现在我已经回到了开始阶段.

我正在使用bootstrap 3,我想要一个可排序的基于网格的新闻部分(如pinterest) - 区别在于我想要两种不同类型的网格宽度.我的默认网格宽度为' col-sm-4 '(相当于33.33333%宽度),然后是'特色'网格宽度'col-sm-8 '.列也将是不同的高度,我希望它们堆叠在彼此之下(如pinterest).

我认为这很简单但是我尝试过的所有东西都可以工作但是在特征网格尺寸下留下了一个大的垂直间隙或完全打破它.

我想知道是否有其他人必须做类似的事情,如果他们设法让它按预期工作.

所以这是同位素工作,如果我的所有网格项都是相同的宽度(工作正常):http: //jsfiddle.net/JR3gu/

当我添加'特色'col-sm-8网格(休息)时会发生这种情况:http: //jsfiddle.net/JR3gu/1/

我尝试过使用这个插件(sloppyMasonry),但也没有太多运气:https: //github.com/cubica/isotope-sloppy-masonry

我的代码:

<div class="container">
  <div class="row">
    <div class="col-md-12">             
      <div class="row iso">
        <div class="col-sm-8 iso-item" style="padding-bottom: 20px;">
          <div class="item">
            <p>The quick brown fox jumped over the lazy dog.</p>
          </div>
        </div>
        <div class="col-sm-4 iso-item" style="padding-bottom: 20px;">
          <div class="item">
            <p>The quick brown fox jumped over the lazy dog.</p>
          </div>
        </div>
        <div class="col-sm-4 iso-item" style="padding-bottom: 20px;">
          <div class="item">
            <p>The quick brown fox …

我有一个图表,如果可能的话我想用CSS动画.我认为自己这样做的方式是使用一个面具,所以它从零开始,然后慢慢地,面具逐渐显露出图形线.

这不是我正在使用的图像,但会是类似的:http: //jsfiddle.net/e50mnm2p/

所以想象一下它什么也没有开始,然后从左边开始逐渐显露出绿线,给人的印象是它被画出来了.有没有办法用面具做这个或有更好的选择？

<img src="http://www.freeimages.com/assets/183018/1830173156/graph-line-up-and-down-1-1131299-m.jpg" />

UPDATE

这就是我最终做的事情:http: //jsfiddle.net/e50mnm2p/5/

HTML

<div class="hgInner">
    <img src="http://www.freeimages.com/assets/183018/1830173156/graph-line-up-and-down-1-1131299-m.jpg" />
</div>

CSS

.hgInner {
    position: relative;
    float: left;
    height: 100%;
    width: 955px;
    overflow: hidden;
    -webkit-animation: reveal 4s ease;
    -webkit-animation-fill-mode: backwards;
}

@-webkit-keyframes reveal {
    0%   {width: 0px;}
    100% { width: 100%;}
}
@keyframes reveal {
    0%   {width: 0px;}
    100% { width: 100%;}
}