<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>jquery+php点击获取最新发表 by 25175</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
</head>
<style>
span.reference { position:fixed; left:10px; bottom:10px; font-size:11px; font-weight:bold; }
span.reference a { text-decoration:none; text-transform:uppercase; color:#ddd; text-shadow:1px 1px 1px #000; }
span.reference a:hover { color:#000; text-shadow:1px 1px 1px #666; }
</style>
<body>
<div id="overlay" class="overlay" style="display:none;"></div>
<div id="modal" class="modal" style="display:none;"> <a href="#" class="prev"></a> <a href="#" class="next"></a> <span class="close"></span>
<h2 id="blog_info"></h2>
<div id="latest_post" class="loading"></div>
</div>
<div class="content">
<ul id="friendsList" class="friendsList">
<li class="ourtuts"><a href="#"><em>Our Tuts</em><span>The Easy Way to Learn Photoshop</span></a></li>
<li class="devisefunction"><a href="#"><em>Devise Function</em><span>Tutorials and Resources</span></a></li>
<li class="bluefaqs"><a href="#"><em>Bluefaqs</em><span>Inspiration and Resources for Web Developers and Designers</span></a></li>
<li class="w3avenue"><a href="#"><em>W3Avenue</em><span>Advice and Resources for Rapid Web Development</span></a></li>
<li class="tzine"><a href="#"><em>Tutorialzine</em><span>PHP MySQL jQuery CSS Tutorials, Resources and Freebies</span></a></li>
<li class="fearlessflyer"><a href="#"><em>Fearless Flyer</em><span>Pure Web Design and Inspiration for Web Artists</span></a></li>
<li class="wordrom"><a href="#"><em>Wordrom</em><span>Great Articles, Tutorials and Inspiration</span></a></li>
</ul>
</div>
<div> <span class="reference"> <a href="www.25175.com">25175</a> </span> </div>
<!-- The JavaScript -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
/**
* solve IE AJAX cache problem
*/
$.ajaxSetup({cache: false});
/**
* the index of the current element / blog selected
* and the total number of elements / blogs
*/
var current = -1;
var total = $('#friendsList').children().length;
/**
* when we click on a blog link,
* we get the latest post with an AJAX request
*/
$('#friendsList a').bind('click',function(e){
var $this = $(this);
show();
var $elem = $this.parent();
current = $elem.index() + 1;
var source = $elem.attr('class');
/**
* add the title and image of the blog
*/
$('#blog_info').empty()
.html('<img src="images/' + source + '.jpg"></img>' + $this.find('em').html());
$.get('rss.class.php', {source:source} , function(data) {
$('#latest_post').removeClass('loading').html(data);
});
e.preventDefault();
});
/**
* show the dialog with the post
*/
function show(){
$('#overlay').show();
if(!$('#modal').is(':visible'))
$('#modal').css('left','-260px')
.show()
.stop()
.animate({'left':'50%'}, 500);
}
/**
* hide the dialog
*/
function hide(){
$('#modal').stop()
.animate({'left':'150%'}, 500, function(){
$(this).hide();
$('#overlay').hide();
$('#latest_post').empty();
});
}
/**
* clicking on the cross hides the dialog
*/
$('#modal .close').bind('click',function(){
hide();
});
/**
* clicking on the next on the dialog
*/
$('#modal .next').bind('click',function(e){
if(current == total){
e.preventDefault();
return;
}
$('#latest_post').empty().addClass('loading');
$('#friendsList li:nth-child('+ parseInt(current+1) +')').find('a').trigger('click');
e.preventDefault();
});
/**
* clicking on the prev on the dialog
*/
$('#modal .prev').bind('click',function(e){
if(current == 1){
e.preventDefault();
return;
}
$('#latest_post').empty().addClass('loading');
$('#friendsList li:nth-child('+ parseInt(current-1) +')').find('a').trigger('click');
e.preventDefault();
});
});
</script>
</body>
</html>