日期:2014-05-16 浏览次数:20388 次
<!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> <title></title> <style type="text/css"> body { font-size:13px; color:#222; margin:0;} p { margin:20px; padding:0;} #container { width:960px; margin:20px auto; position:relative; list-style:none;} #container li { width:150px; height:100px; position:absolute; top:0; left:0; text-align:center; border:solid 1px #aaa; cursor:pointer; -moz-box-shadow: 0px 0px 3px #888; -webkit-box-shadow: 0px 0px 3px #888; box-shadow: 0px 0px 3px #888; -moz-border-radius:5px; -webkit-border-radius: 5px; border-radius:5px; background:#e0e0e0 url(file:///D|/%E6%96%87%E4%BB%B6/web/%E5%A4%A7%E4%B8%89%E4%B8%8A%E5%AD%A6%E4%B9%A0%E7%9A%84%E5%AE%9E%E6%88%98/bkg.png) repeat-x scroll left top;} #container li a { color:#222; text-decoration:none;} #container li.current { border:solid 1px #888; background:#f0f0f0 url(file:///D|/%E6%96%87%E4%BB%B6/web/%E5%A4%A7%E4%B8%89%E4%B8%8A%E5%AD%A6%E4%B9%A0%E7%9A%84%E5%AE%9E%E6%88%98/bkg-current.png) repeat-x scroll left top; cursor:default;} #container li.current a { color:#0010a9; text-decoration:underline;} </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { var itemWidth = $("#container li").width(); // hide 50% of each window var itemPosition = itemWidth * 50 / 100; // slide each window 60% if its width var itemMove = itemWidth * 60 / 100; // move windows below eachother $("#container li").each(function(i) { $(this).attr("id", i).css("z-index", 100 - i).css("left", itemPosition * i); }); $("#container li").click(function(e) { var currentID = parseInt($(".current").attr("id")); var clickedID = parseInt($(this).attr("id")); if (currentID != clickedID) { e.preventDefault(); var currentZ = 99; var current = $(this); setTimeout(function() { $(".current").removeClass("current"); current.css("z-index", currentZ).addClass("current"); }, 500); if (clickedID > currentID) { var i = 1; for (j = clickedID - 1; j >= 0; j = j - 1) { $("#" + j).animate({ "left": "-=" + itemMove * (i) + "px" }, 500); $("#" + j).animate({ "left": "+=" + itemMove * (i) + "px" }, 300); i = i + 1; } var i = 1; setTimeout(function() { for (j = clickedID - 1; j >= 0; j = j - 1) { $("#" + j).css("z-index",currentZ - i); i = i + 1; } }, 500); } else { var i = 1; var total = $("#container li").length; for (j = clickedID + 1; j <= tot