对imges的影响表现不同

时间：2015-12-27 17:56:11

标签： javascript html css

我在jsfiddle中创建了图像效果库

here 我尝试在我的网站上实现，但效果和结果与jsfiddle不同。

我的html结构看起来像这样

<body id="body">
<div class="main">
    <div class="menu">
        <ul>
            <li data-href="ponuka">Ponuka</li>
            <li data-href="montaz" data-script="lightbox">montáž pohonov KEY</li>
            <li data-href="vyrobky" data-script="slide">výrobký</li>
            <li data-href="partneri">partneri</li>
            <li data-href="kontakt">kontakt</li>
        </ul>
    </div>
    <div class="info">

    <div class="vyrobky">
<div class="vyrobky_holder">
    <ul>
        <li>
            <div class="vyrobky_image"><img src="zabradlia/5.jpg" style="transform: scale(1);"></div>
        </li>
        <li>
            <div class="vyrobky_image"><img src="zabradlia/5.jpg" style="transform: scale(1);"></div>
        </li>
      <li>
            <div class="vyrobky_image"><img src="zabradlia/5.jpg" style="transform: scale(1);"></div>
        </li>
        <li>
            <div class="vyrobky_image"><img src="zabradlia/5.jpg" style="transform: scale(1);"></div>
        </li>
        <li>
            <div class="vyrobky_image"><img src="zabradlia/5.jpg" style="transform: scale(1);"></div>
        </li>
        <li>
            <div class="vyrobky_image"><img src="zabradlia/5.jpg" style="transform: scale(1);"></div>
        </li>
       <li>
            <div class="vyrobky_image"><img src="zabradlia/5.jpg" style="transform: scale(1);"></div>
        </li>
        <li>
            <div class="vyrobky_image"><img src="zabradlia/5.jpg" style="transform: scale(1);"></div>
        </li>
        <li>
            <div class="vyrobky_image"><img src="zabradlia/5.jpg" style="transform: scale(1);"></div>
        </li>
        <li>
            <div class="vyrobky_image"><img src="zabradlia/5.jpg" style="transform: scale(1);"></div>
        </li>
        <li>
            <div class="vyrobky_image"><img src="zabradlia/5.jpg" style="transform: scale(1);"></div>
        </li>
        <li>
            <div class="vyrobky_image"><img src="zabradlia/5.jpg" style="transform: scale(1);"></div>
        </li>
        <li>
            <div class="vyrobky_image"><img src="zabradlia/5.jpg" style="transform: scale(1);"></div>
        </li>
        <li>
            <div class="vyrobky_image"><img src="zabradlia/5.jpg" style="transform: scale(1);"></div>
        </li>
       <li>
            <div class="vyrobky_image"><img src="zabradlia/5.jpg" style="transform: scale(1);"></div>
        </li>
        <li>
            <div class="vyrobky_image"><img src="zabradlia/5.jpg" style="transform: scale(1);"></div>
        </li>
        <li>
            <div class="vyrobky_image"><img src="zabradlia/5.jpg" style="transform: scale(1);"></div>
        </li>
        <li>
            <div class="vyrobky_image"><img src="zabradlia/5.jpg" style="transform: scale(1);"></div>
        </li>
       <li>
            <div class="vyrobky_image"><img src="zabradlia/5.jpg" style="transform: scale(1);"></div>
        </li>
        <li>
            <div class="vyrobky_image"><img src="zabradlia/5.jpg" style="transform: scale(1);"></div>
        </li>
        <li>
            <div class="vyrobky_image"><img src="zabradlia/5.jpg" style="transform: scale(1);"></div>
        </li>
        <li>
            <div class="vyrobky_image"><img src="zabradlia/5.jpg" style="transform: scale(1);"></div>
        </li>
        <li>
            <div class="vyrobky_image"><img src="zabradlia/5.jpg" style="transform: scale(1);"></div>
        </li>
        <li>
            <div class="vyrobky_image"><img src="zabradlia/5.jpg" style="transform: scale(1);"></div>
        </li>
        <li>
            <div class="vyrobky_image"><img src="zabradlia/5.jpg" style="transform: scale(1);"></div>
        </li>
        <li>
            <div class="vyrobky_image"><img src="zabradlia/5.jpg" style="transform: scale(1);"></div>
        </li>
       <li>
            <div class="vyrobky_image"><img src="zabradlia/5.jpg" style="transform: scale(1);"></div>
        </li>
        <li>
            <div class="vyrobky_image"><img src="zabradlia/5.jpg" style="transform: scale(1);"></div>
        </li>
        <li>
            <div class="vyrobky_image"><img src="zabradlia/5.jpg" style="transform: scale(1);"></div>
        </li>
        <li>
            <div class="vyrobky_image"><img src="zabradlia/5.jpg" style="transform: scale(1);"></div>
        </li>
        <li>
            <div class="vyrobky_image"><img src="zabradlia/5.jpg" style="transform: scale(1);"></div>
        </li>
        <li>
            <div class="vyrobky_image"><img src="zabradlia/5.jpg" style="transform: scale(1);"></div>
        </li>

    </ul>
</div>
</div></div>



</div><script class="delete_script" src="slide.js"></script></body>

css看起来像这样

.vyrobky{
    width:1250px;
    height: 600px;
    //overflow-y:hidden;
    position: relative;
    margin-left: -100px;

}
.vyrobky_holder{
        width:1250px;
        height: 410px;
     -webkit-transition:1.5s ease all;
     -webkit-animation: mymove .5s ;
     margin-top: 0px;
     position: relative;
}
.vyrobky_holder ul{
     position:relative;
    width:100%;
    height:100%;
}
.vyrobky_holder ul li{
    float:left;
    width:150px;
    height:150px;
    border:1px solid black;
    list-style-type:none
}
.vyrobky_holder ul li img{
    width:100%;
    height: 100%;
}
.vyrobky .vyrobky_image{

    width:150px;
    height:150px;
     -webkit-transition:.5s ease all;
     -webkit-animation: mymove .5s ;

}

当然我调整了js，在网站上看起来像这样

var one = document.querySelectorAll(".vyrobky_image img");
var nav = document.getElementsByClassName("vyrobky_holder")[0];
var tmp_left=document.getElementsByClassName("vyrobky")[0];
nav.onmousemove=trick;
 var el = document.querySelector('.info');
  var style = window.getComputedStyle(el);

      var left = style['margin-left'];
        var top=el.offsetTop;
  /*alert(
      "Top:" + top + '\n' +
      "Left:" + left
  );*/
 function calculateDistance(elem, mouseX, mouseY) {
    return Math.floor(Math.sqrt(Math.pow(mouseX - (elem.offsetLeft +parseInt(left) + (elem.offsetWidth / 2)), 2) + Math.pow(mouseY - (elem.offsetTop + 189+(elem.offsetHeight / 2)), 2)));
}
function trick(e) {
    var x = e.pageX;
    var y = e.pageY;



    for (var i = 0; i < one.length; i++) {
        if (one[i] == e.currentTarget) continue;
        var vektor = calculateDistance(one[i], x, y);

        if (vektor <= 150) {
            var cislo=1.5+((100-vektor)*0.01); //scale
            var cislo_2=0.5+((100-vektor)*0.01); //opacity
            if(cislo>1.5)cislo=1.5;
            one[i].style.transform="scale("+cislo+")";
            //one[i].style.opacity=cislo_2;

        }
        else{
        one[i].style.transform="scale(1)";
            //one[i].style.opacity=0.5;
        }
    }
}

问题如下：悬停元素上的z-index没有效果，基于鼠标距离的缩放图像不能正常工作，它适用于鼠标左侧的元素，但是不在鼠标右侧或图像上方/下方的那些。我该如何解决这种不受欢迎的行为？ here是图像效果在我的网站上的行为方式，因为您可以看到鼠标靠近右侧的图像（如果鼠标位于任何图像上）不会影响右侧的图像

0 个答案:

没有答案
相关问题
最新问题