将元素移入和移出onmouseover上的可视div区域（对javascript数组有问题） [英] moving elements in and out of a viewable div area on onmouseover (having problems with javascript arrays)

问题描述

我有一个< div> 有一堆更多的图像，然后可以适应的视图，所以我使用了 overflow：hidden ; css属性隐藏其余部分。现在我有一个按钮，我想滚动到下一组图像，当箭头图像onmouseover当前隐藏。但我不确定我怎么可以这样做！我寻找css或javascript解决方案不是一个jquery插件。这是我目前有我的页面，看起来像这 http：// ec2-23-22-226-163.compute-1.amazonaws.com/ ，我想让它的功能像这样 http://ec2-23-22-226-163.compute-1.amazonaws.com/home.php

任何我不清楚我会很高兴澄清，感谢任何建议或提示我如何能做到这一点

我认为可能有一种方法来做到这一点与CSS纯粹（理想的）或深层html dom操纵与javascript。

---

更新
好​​，所以我继续尝试如何计算，但是我再次卡住了我有这个java脚本（下面）什么im基本上做是删除 div 中的第一个元素，并将其放入第二个 div 的可见性设置为隐藏（im将其放入第二个 div ，所以我不能把它们放回当scrolllayer但是在移动< div> 中的第二个元素时会出现错误未捕获错误：NotFoundError：DOM异常8 从我可以告诉这是由 genreNum [rownum] ++ （不实际更新，因此一个 0 应该成为一个 1 但不是）完全确定为什么这将不工作它的工作原理myarray [0] ++？
任何帮助将非常感谢你可以验证这发生在 http://ec2-23-22-226-163.compute-1.amazonaws.com/ 其中ive还添加了警报到显示的代码genreNum [rownum] +--- rownum to reasure this is the problem

  var timer_on = 0; 
 var t; 
 var genreNum; 
 
 function scrollright（genre，id，rownum）{
 var seriesID = genre +_+ genreNum [rownum]; 
 var moveTo =invisible+ genre; 
 var series = document.getElementById（seriesID）; 
 var hideTo = document.getElementById（moveTo）; 
 var row = document.getElementById（rownum）; 
 series.style.visibility =hidden; 
 hideTo.appendChild（series）; 
 row.removeChild（series）; 
 genreNum [rownum] ++; 
 if（genreNum [rownum] == id）{
 num = 0; 
} 
 t = setTimeout（function（）{scrollright（genre，id，rownum）}，1000）; // move one element evry 1 second 
} 
 
 function makecroll（genre，id，rownum）{
 if（！timer_on）{
 timer_on = 1; 
 scrollright（genre，id，rownum）; // move one element evry 1 second 
} 
} 
 
 function stopscroll（genre，id）{
 clearTimeout（t）; 
 timer_on = 0; 
} 
 function arrayStartup（）{
 var rows = document.getElementsByClassName（series_row）; 
 genreNum = new Array（）; 
 for（i = 0; i  genreNum [i] = 0; 
} 
 
} 
  

解决方案

这是一种方法：

Html：

 < div style =height：100px; width：250px; overflow：hidden; border：1px solid black;> 
< div id =innerstyle =left：0; height：100px; width：500px; position：relative;> 
< div style =width：100px; height：100px; float：left; border：1px solid red> image1< / div> 
< div style =width：100px; height：100px; float：left; border：1px solid red> image2< / div> 
< div style =width：100px; height：100px; float：left; border：1px solid red> image3< / div> 
< div style =width：100px; height：100px; float：left; border：1px solid red> image4< / div> 
< / div> 
< / div> 
< a href =javascript :; onclick =doMove（200）>向左移动< / a> 
< a href =javascript :; onclick =doMove（-200）>向右移动< / a> 
  

javascript：

 code> function doMove（pix）{
 var inner = document.getElementById（inner）; 
 var currentLeft = parseInt（inner.style.left）; 
 var newLeft = currentLeft + pix; 
 inner.style.left = newLeft +px; 
} 
  

jsfiddle： jsfiddle

说明：

1. 顶部div已溢出隐藏


2. 内部div包含具有相对位置的图像


3. javascript将更改内部div的style.left，给出了水平滚动页面的印象。

I have a <div> that has a bunch more images then can fit into the view so i've used the overflow: hidden; css attribute to hide the rest. Now I have a button that i would like to "scroll" to the next set of images which are currently hidden when onmouseover of arrow image. However I am unsure of how I can go about doing this! Im looking for css or javascript solution not a jquery plugin. Here is what i currently have my page which looks like this http://ec2-23-22-226-163.compute-1.amazonaws.com/ and i would like to have it function like this http://ec2-23-22-226-163.compute-1.amazonaws.com/home.php

Anything I have left unclear i'd be glad to clarrify thanks for any advice or tips on how i can get this done

Im thinking there may be a way to do it with css purely (ideal) or deep html dom manipulation with javascript.

---

Update Okay so i've continued attempting how to figure this out, But im stuck again I have this java script (below) what im basically doing is removing the first element in the div and putting it into a second div with a visibilty set to hidden (im placing it into a second div so I don't i can put them back in when scrollingleft once i figure this out)however on moving the second element in the <div> i get an error Uncaught Error: NotFoundError: DOM Exception 8 from what i can tell this is caused by genreNum[rownum]++ (not actually updating so a 0 should become a 1 but does not) entirely sure why this would not work it works as this myarray[0]++ does? any help would be greatly be appreciated you can verify this happening at http://ec2-23-22-226-163.compute-1.amazonaws.com/ where ive also added alert's to code displaying genreNum[rownum]+"---"rownum to reasure this is the problem

 var timer_on=0;
 var t;
 var genreNum;

function scrollright(genre, id, rownum){
 var seriesID = genre + "_" + genreNum[rownum];
 var moveTo = "invisible" +genre;
 var series = document.getElementById(seriesID);
 var hideTo = document.getElementById(moveTo);
 var row = document.getElementById(rownum);
 series.style.visibility = "hidden";
 hideTo.appendChild(series);
 row.removeChild(series);
 genreNum[rownum]++;
 if (genreNum[rownum] == id){
   num=0;
 }
 t=setTimeout(function() {scrollright(genre,id,rownum)},1000); // move one element evry    1 second
}

function makescroll(genre, id, rownum){
  if(!timer_on){
    timer_on=1;
    scrollright(genre, id, rownum); // move one element evry 1 second
  }
 }

function stopscroll(genre, id){
  clearTimeout(t);
  timer_on=0;
 }
 function arrayStartup(){
  var rows =  document.getElementsByClassName("series_row");
  genreNum = new Array();
  for (i=0; i<rows.length ; i++){
      genreNum[i]=0;
   }

}

解决方案

This is one method of doing it:

Html:

<div style="height:100px;width:250px;overflow:hidden;border:1px solid black;">
    <div id="inner" style="left:0;height:100px;width:500px;position:relative;">
        <div style="width:100px;height:100px;float:left;border:1px solid red">image1</div>
        <div style="width:100px;height:100px;float:left;border:1px solid red">image2</div>
        <div style="width:100px;height:100px;float:left;border:1px solid red">image3</div>
        <div style="width:100px;height:100px;float:left;border:1px solid red">image4</div>
    </div>
</div>
<a href="javascript:;" onclick="doMove(200)">move left</a>
<a href="javascript:;" onclick="doMove(-200)">move right</a>

javascript:

function doMove(pix){
    var inner = document.getElementById("inner");
    var currentLeft = parseInt(inner.style.left);
    var newLeft = currentLeft+pix;
    inner.style.left = newLeft+"px";
}

jsfiddle : jsfiddle

explanation:

1. top div has overflow hidden
2. inner div contains image with position relative
3. javascript will change style.left of inner div and it will give an impression of scrolling page horizontally

这篇关于将元素移入和移出onmouseover上的可视div区域（对javascript数组有问题）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！