0

我搜索了很多答案，但我不明白如何解决这个问题......

所以我有一个登录页面，我想添加一个箭头，指向下载文件的位置（在 chrome 中，它的按钮向左）。

对于箭头，我使用了以下代码：http: //jsfiddle.net/hY2Ce/4/

问题是它在 safari 中效果很好，但在 chrome 上它不显示箭头......

我的代码：http: //jsfiddle.net/zP5Km/

如果您需要更多代码，请告诉我...

非常感谢！

Javascript

navigator.sayswho= (function(){
    var N= navigator.appName, ua= navigator.userAgent, tem;
    var M= ua.match(/(opera|chrome|safari|firefox|msie)\/?\s*(\.?\d+(\.\d+)*)/i);
    if(M && (tem= ua.match(/version\/([\.\d]+)/i))!= null) M[2]= tem[1];
    M= M? [M[1], M[2]]: [N, navigator.appVersion,'-?'];
    return M;
})();
// http://stackoverflow.com/questions/2400935/browser-detection-in-javascript#2401861
//console.log(navigator.sayswho);

function auK(auy) {
    $(auy).fadeIn(750, function () {
        setTimeout(function () {
            $(auy).fadeOut(1000);
        }, 10000);
    });
}

function download() {
    if (navigator.sayswho[0].toLowerCase() == 'chrome') {
      auK('#arrow-chrome');

    }
    if ((navigator.sayswho[0].toLowerCase() == 'msie') && (navigator.sayswho[1] == 9.0)) {
      auK('#arrow-ie');

    }
    if (navigator.sayswho[0].toLowerCase() == 'safari' && (navigator.platform.toUpperCase().indexOf('MAC')>=0) ) {
      auK('#arrow-safari-mac');

    }
}

HTML

<a href="http://www.example.com/test.exe" class="top-download-button" onclick="download()" >
  <img class="a" src="img/download-button.png" alt="Download">
  <img class="b" src="img/download-button-hover.png" alt="Download" >
</a>

<div id="arrow-chrome"></div>
<div id="arrow-ie"></div>
<div id="arrow-safari-mac"></div>

CSS

#arrow-chrome, #arrow-ie, #arrow-safari-mac {
    position: fixed;
    display: none;
    z-index: 10;
    height: 309px;
    width: 186px;
}

#arrow-chrome {
    bottom: 10px;
    left: 20px;
    background: url("http://cdn.mediafire.com/images/backgrounds/download/dlpointers/arrow_down.png") no-repeat scroll center center transparent;
}

#arrow-ie {
    bottom: 10px;
    left: 50%;
    margin-left: -140px;
    background: url("http://cdn.mediafire.com/images/backgrounds/download/dlpointers/arrow_down.png") no-repeat scroll center center transparent;
}

#arrow-safari-mac {
    top: 10px;
    right: 10px;
    z-index: 100 !important;
    background: url("http://cdn.mediafire.com/images/backgrounds/download/dlpointers/arrow_up.png") no-repeat scroll center center transparent;
}

html,body {
    width:100%;
    height:100%;
}
4

1 回答 1

0

试试这个代码：

    <a class="top-download-button" onclick="download(); window.location='test.exe';" >
<img class="a" src="img/download-button.png" alt="Download">
<img class="b" src="img/download-button-hover.png" alt="Download" >
</a>
于 2013-06-29T14:55:43.407 回答