27.jquery模擬滾動效果
阿新 • • 發佈:2018-02-24
頁面 light 一次 win 定時 request slide asc created
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style type="text/css"> div{ width: 150px; height: 100px; border: 1px red solid; } </style> <script type="text/javascript" src="${ pageContext.request.contextPath }/js/jquery-1.8.3.js"></script> <title>Insert title here</title> <script type="text/javascript"> $(function(){ //頁面一加載完成,生成4個div createDiv(); //定時器,每隔一秒執行一次 window.setInterval("gogo()",1000); }) //循環 function gogo(){ //目的:讓第一個div慢慢的從下向上消失 $("div:first").slideUp(1000,function(){ //第一個div消失後,讓第一個div放到末尾 $("body").append($(this)); //淡入 $(this).fadeIn(1000); }); } //生成的4個div function createDiv(){ for(var i=1;i<=4;i++){ //創建div var $div=$("<div></div>"); //給div設置文本的內容 $div.text("生成的div"+i); //創建的div添加到body標簽下 $("body").append($div); } } </script> </head> <body> </body> </html>
27.jquery模擬滾動效果