代码之家 › 专栏 › 技术社区 › windsurf88

jquery将悬停附加到数组元素

hover arrays jquery

windsurf88 · 技术社区 · 14 年前

我正在尝试在每个数组元素上放置hover()方法。然后当光标在字符上滚动时,它会被复制到另一个分区。我有点迷路了。你有什么建议吗?

<html>
<head>
<script type="text/javascript" scr="http://code.jquery.com/jquery.min.js">
</head>

<body>

<script type="text/javascript">
var str="one two three four five";
var a1 = new Array();
a1=str.split("");
//document.write(a1.join(" <br /> "));
//document.write(str.split("") + "<br />");

for (var i=0;i<a1.length;i++) {

    // for each array element attach hover method, when rollover then feed to over div magnifyView
    $("a1[i]").hover(function () {
      // put into magnifyView upon hover on array element
    });
}

</script>

<div id='stringToView'><script type="text/javascript">document.getElementById('stringToView').innerHTML = str;</script> </div>

<br /><br />
<div id='magnifyView' style="font-size:36px;"> what's here</div>

</body>
</html>

4 回复 | 直到 14 年前

pex 14 年前

http://plugins.jquery.com/project/jMagnify

http://www.senamion.com/blog/jMagnify.html

dotariel 14 年前

<span class="canHover">...array</span>

<script type="text/javascript">
   $(function(){
     $('.canHover').hover(function() {
          // Your hover code here...
     });
   })

</script>

pex 14 年前

<html>
  <head>
    <script type="text/javascript" charset="utf-8" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
    <script type="text/javascript" charset="utf-8">
    $(function() {
      var str       = "one two three four five",
          array     = str.split(""),
          viewPort  = $('<div />', { id: 'stringToView' });

      for(var objId in array) {
        var obj = $('<span/>', { text: array[objId] }).hover(function() {
          var clone = $(this).clone();
          $('#magnifyView').html(clone);
        }).appendTo(viewPort);
      }

      $('body').prepend(viewPort);
    });
    </script>
  </head>
  <body>
    <div id='magnifyView' style="font-size:36px;"> what's here</div>
  </body>
</html>

$('#stringToView span') <div id="stringToView"></div>

Community CDub 8 年前

XSaint32

http://jsbin.com/4054602/25/

hover

<body>
  <ul class="canHover">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
  <div id="stringToView"></div>
</body>

<script type="text/javascript">
  $(function(){ // delay execution until DOM is fully constructed
    $(".canHover li").hover(           // bind to the children LI elements
      function() {                     // mouseEnter event first
        var text = $(this).text();     // copy 'hovered' text value
        $("#stringToView").text(text); // set the value in the div
      },
      function() {                     // mouseLeave event second
        $("#stringToView").text("");   // clear the value from the div
      }
    );
  });
</script>