標籤:style blog http java color width
appendTo 會移動元素。
比如:
<div class="wrap"> <div class="div1">111</div> <div class="div1">222</div></div>
$(".div1").appendTo(".div2") 會變成如下結構:
<div class="wrap"> <div class="div1">222 <div class="div1">111</div> </div></div>
可以看到 div1 被移動到div2的內部。
append 也會移動元素:$(".div2").append(".div1") 會變成如下結構:
<div class="wrap"> <div class="div1">222 <div class="div1">111</div> </div></div>
一個執行個體:圖片向上滾動。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>jquery 延時執行</title><style type="text/css">*{ margin: 0; padding: 0;}.wrap{ width:200px; height:200px; border: 1px solid #f00;}.wrap ul{ width: 180px; height: 400px;}.wrap ul li{ width: 50px; height: 30px; float: left; background: #f00; list-style: none; margin-left: 10px; margin-bottom: 10px;}.div2{ color: #f00;}</style><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script>$(function(){scrollTimer = setInterval(scrollcoorp, 3000 ); function scrollcoorp(){ var $self = $("ul"); $self.animate({ "margin-top" : "-40px" },600 , function(){ $self.css({"margin-top":"0px"}).find("li:lt(3)").appendTo($self); }) } $("ul").mouseover(function(){ clearInterval(scrollTimer); }); $("ul").mouseleave(function() { scrollTimer=setInterval(scrollcoorp,3000); } )})</script></head><body> <div class="wrap"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul> </div></body></html>