1. 首頁
  2. 問答
  3. 哈弗無法識別圖片

哈弗無法識別圖片

2016-02-29 63 views
0

我在設計導航頁面的過程，但我所遇到的一個問題。我有以下均勻我的標誌間隔圖標，但是當我將鼠標懸停在圖標，我沒有點擊的圖標，我重定向到該網站的A HREF設置的選項。我相信這是與我排列影像的方式，但我似乎無法找出任何其他方式來得到這個工作。我也有一個JavaScript運行了隨機背景動畫，但我不認爲這是與任何干擾。任何幫助如何讓懸停工作非常感謝！哈弗無法識別圖片

（下面的代碼的引擎收錄：http://pastebin.com/GPfxMxrM）

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Welcome to VortexPvP!</title> 
</head> 

<script> 
    (function(){ 
     /** 
     author: @manufosela 
     2013/08/27 copyleft 2013 

     ShootingStar class Main Methods: 
      launch: launch shooting stars every N seconds received by param. 10 seconds by default. 
      launchStar: launch a shooting star. Received options object by param with: 
      - dir (direction between 0 and 1) 
      - life (between 100 and 400) 
      - beamSize (between 400 and 700) 
      - velocity (between 2 and 10) 
     **/ 

     ShootingStar = function(id) { 
     this.n = 0; 
     this.m = 0; 
     this.defaultOptions = { velocity:8, starSize:10, life:300, beamSize:400, dir:-1 }; 
     this.options = {}; 
     id = (typeof id != "undefined")?id:""; 
     this.capa = ($(id).lenght > 0)?"body":id; 
     this.wW = $(this.capa).innerWidth(); 
     this.hW = $(this.capa).innerHeight(); 
     }; 

     ShootingStar.prototype.addBeamPart = function(x, y) { 
     this.n++; 
     var name = this.getRandom(100, 1); 
     $("#star"+name).remove(); 
     $(this.capa).append("<div id='star"+name+"'></div>"); 
     $("#star"+name).append("<div id='haz"+this.n+"' class='haz' style='position:absolute; color:#FF0; width:10px; height:10px; font-weight:bold; font-size:"+this.options.starSize+"px'>·</div>"); 
     if (this.n > 1) $("#haz" + (this.n - 1)).css({ color:"rgba(255,255,255,0.5)" }); 
     $("#haz" + this.n).css({ top: y + this.n, left: x + (this.n * this.options.dir) }); 
     } 

     ShootingStar.prototype.delTrozoHaz = function() { 
     this.m++; 
     $("#haz" + this.m).animate({opacity:0}, 75); 
     if (this.m >= this.options.beamSize) { $("#ShootingStarParams").fadeOut("slow"); } 
     } 

     ShootingStar.prototype.getRandom = function(max, min) { 
     return Math.floor(Math.random() * (max - min + 1)) + min; 
     } 

     ShootingStar.prototype.toType = function (obj) { 
     if (typeof obj === "undefined") { return "undefined"; /* consider: typeof null === object */ } 
     if (obj === null) { return "null"; } 
     var type = Object.prototype.toString.call(obj).match(/^\[object\s(.*)\]$/)[1] || ''; 
     switch (type) { 
      case 'Number': if (isNaN(obj)) { return "nan"; } else { return "number"; } 
      case 'String': case 'Boolean': case 'Array': case 'Date': case 'RegExp': case 'Function': return type.toLowerCase(); 
     } 
     if (typeof obj === "object") { return "object"; } 
     return undefined; 
     } 

     ShootingStar.prototype.launchStar = function(options) { 
     if (this.toType(options) != "object") { options = {}; } 
     this.options = $.extend({}, this.defaultOptions, options); 
     this.n=0; 
     this.m=0; 
     var i=0, l=this.options.beamSize, 
      x=this.getRandom(this.wW - this.options.beamSize - 100, 100), y=this.getRandom(this.hW - this.options.beamSize - 100, 100), 
      self = this; 
     for(; i<l; i++) { setTimeout(function(){ self.addBeamPart(x, y); }, self.options.life + (i * self.options.velocity)); } 
     for(i=0; i<l; i++) { setTimeout(function(){ self.delTrozoHaz() }, self.options.beamSize + (i * self.options.velocity)); } 
     $("#ShootingStarParams").html(); 
     $("#ShootingStarParams").fadeIn("slow"); 
     } 

     ShootingStar.prototype.launch = function(everyTime) { 
     if (this.toType(everyTime) != "number") { everyTime = 2; } 
     everyTime = everyTime * 1000; 
     this.launchStar(); 
     var self = this; 
     setInterval(function() { 
      var options = { 
      dir: (self.getRandom(1, 0))?1:-1, 
      life: self.getRandom(400, 100), 
      beamSize: self.getRandom(700, 400), 
      velocity: self.getRandom(10, 4) 
      } 
      self.launchStar(options); 
     }, everyTime); 
     } 

})(); 

</script> 
    </div> 
<style type="text/css"> 
#top-image { 
    background:url('https://www.14denoviembre.es/img/stars_5.png') -25px -50px; 
    position:fixed ; 
    top:0; 
    width:100%; 
    z-index:0; 
    height:100%; 
    background-size: calc(100% + 50px); 
} 

body { 
    color:#FFF; 
    height:600px; 
    width:99%; 
    height:95%; 
    color:#FFF; 
    min-width:1920px; 
    width: auto !important; 
} 

.stars { 
    z-index: 0; 
    position: absolute; 
    background-image: url(http://www.14denoviembre.es/img/hori.png), url(http://www.14denoviembre.es/img/stars_5.png); 
    background-repeat: repeat-x,repeat-x repeat-y; 
    transform:translate3D(0em, 0em, 0); 
    animation: stars 21s ease; 
    transform-style: preserve-3d; 

     } 

.Icon { 

    width: 1920px; 
    height: 200px; 
    top: 5px; 
    position: fixed; 
    z-index: 998 !important; 
    padding: 10px; 
    display: block; 
    margin:auto; 
    align-content: center; 


} 

.container { 
    position: relative; 
    top: 0px; 
    text-align: center; 
} 
#logo { 
    height:auto; 
} 


.shadowfilter { 
    -webkit-filter: drop-shadow(0px 0px 0px rgba(0,0,0,0.80)); 
    -webkit-transition: all 0.5s linear; 
    -o-transition: all 0.5s linear; 
    transition: all 0.5s linear; 

} 

.shadowfilter:hover { 
    -webkit-filter: drop-shadow(0px 0px 8px rgba(255, 255, 255, 0.8)); 
} 

html { 
    overflow-y: scroll; 
} 


#thumbs { 
    width: 1000px; 
    margin-top: 500px; 
    margin-left: auto; 
    margin-right: auto; 

    text-align: justify; 
    -ms-text-justify: distribute-all-lines; 
    text-justify: distribute-all-lines; 
} 


.stretch { 
    width: 100%; 
    display: inline-block; 
    font-size: 5; 
} 

</style> 
<body class="stars"> 
    <div id="thumbs"> 

    <a href="http://vortexpvp.com/shop" id="single_image1"><img class="shadowfilter" src="http://i.imgur.com/pWLcgGj.png" alt="Shop_Icon" height="200" width="190"/></a> 

    <a href="http://vortexpvp.com/members" id="single_image2"><img class="shadowfilter" src="http://i.imgur.com/KLhSpnV.png" alt="Staff_Icon"/></a> 

    <a href="http://vortexpvp.com/forums" id="single_image3"><img class="shadowfilter" src="http://i.imgur.com/naxwKEM.png" alt="Forums_Icon"/></a> 

    <a href="http://vortexpvp.com/bans" id="single_image4"><img class="shadowfilter" src="http://i.imgur.com/Y99mgIG.png" alt="Bans_Icon"/></a> 

    <a href="http://vortexpvp.com/vote" id="single_image5"><img class="shadowfilter" src="http://i.imgur.com/iGIl9hs.png" alt="Vote_Icon"/></a> 

    <span class="stretch"></span> 
</div>​ 


<div class="container"> 
<div class="Icon"> 
<img src="http://files.enjin.com/353719/module_header/10950667/background/Vortex-Network-Logonew.png" width="593" height="425"></img> 
</div> 
</div> 

    <div id="top-image"></div> 
    <div id="ShootingStarParams"></div> 
    <script type="text/javascript" src="http://codeorigin.jquery.com/jquery-1.10.2.min.js"></script> 
    <script type="text/javascript" src="ShootingStarClass.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function(){ 
     var shootingStarObj = new ShootingStar("body"); 
      shootingStarObj.launch(); 
     }); 
    </script> 

</div> 
</body> 
</html>

來源

2016-02-29 Kyle Benson

回答

0

修改您#thumbs CSS有一個相對定位和添加的z-index。命名top-image股利是覆蓋你thumbs。

#thumbs { 
    position: relative; 
    width: 1000px; 
    margin-top: 500px; 
    margin-left: auto; 
    margin-right: auto; 
    z-index: 10000; 
    text-align: justify; 
    -ms-text-justify: distribute-all-lines; 
    text-justify: distribute-all-lines; 
}

來源

2016-02-29 05:38:50 Adrian

+0

這似乎工作。不勝感激。 –

相關問題

 相關問題