以下是 jquery php弹出滑块效果js特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!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弹出滑块效果</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="Latest Post Blogroll Slider with jQuery and PHP" />
<meta name="keywords" content="jquery, latest post, friends, blogroll, slider, blog, ajax, css3, xml, xsl, cache" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<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>
</head>
<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">
</font>
</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>
CSS代码(style.css):
*{margin:0;padding:0;}
body{font-family:"Myriad Pro",Arial,Helvetica,sans-serif;background:#282828 url(../images/bg.jpg) repeat top left;overflow-x:hidden;}
.overlay{position:fixed;z-index:999;top:0px;left:0px;width:100%;height:100%;background-color:#000;opacity:0.7;}
.modal{position:absolute;top:25%;width:500px;height:300px;margin-left:-250px;z-index:9999;color:#fff;text-shadow:1px 1px 1px #000;border:1px solid #303030;background-color:#212121;-moz-box-shadow:0px 0px 10px #000;-webkit-box-shadow:0px 0px 10px #000;box-shadow:0px 0px 10px #000;}
.modal h2{font-weight:100;padding:5px 0px 5px 5px;margin:5px;background-color:#111;border:1px solid #272727;}
.modal h2 img{float:left;width:28px;margin-right:10px;-moz-box-shadow:0px 0px 4px #000;-webkit-box-shadow:0px 0px 4px #000;box-shadow:0px 0px 4px #000;}
.modal h3{text-transform:uppercase;font-weight:100;font-size:16px;letter-spacing:1px;margin:25px 25px 5px 25px;color:#3365AF;}
.modal p{margin:15px 25px;line-height:24px;height:100px;overflow:hidden;}
.modal p a{color:#ddd;}
.modal p a:hover{color:#fff;}
.line{background-color:#000;border-bottom:1px solid #333;height:1px;margin:3px 10px 5px 10px;}
a.button{display:inline-block;float:right;padding:4px 10px;background-color:#1951A5;color:#fff;margin:20px;font-size:12px;letter-spacing:1px;text-shadow:1px 1px 1px #011c44;text-transform:uppercase;text-decoration:none;border:1px solid #4c7ecb;outline:none;background-image:-moz-linear-gradient(top,rgba(255,255,255,0.25),rgba(255,255,255,0.05));background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,rgba(255,255,255,0.25)),color-stop(1,rgba(255,255,255,0.05)));-moz-box-shadow:1px 1px 3px #000;-webkit-box-shadow:1px 1px 3px #000;box-shadow:1px 1px 3px #000;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}
a.button:hover{color:#011c44;text-shadow:1px 1px 1px #ccdffc;}
a.button:active{margin-top:21px;}
a.next,a.prev{height:50px;width:20px;background-color:#212121;background-repeat:no-repeat;background-position:center center;position:absolute;top:130px;cursor:pointer;border:1px solid #303030;outline:none;}
a.next{right:-21px;border-left:none;background-image:url(../images/next.png);-moz-border-radius:0px 5px 5px 0px;-webkit-border-top-right-radius:5px;-webkit-border-bottom-right-radius:5px;border-top-right-radius:5px;border-bottom-right-radius:5px;-moz-box-shadow:1px 1px 3px #000;-webkit-box-shadow:1px 1px 3px #000;box-shadow:1px 1px 3px #000;}
a.prev{left:-21px;border-right:none;background-image:url(../images/prev.png);-moz-border-radius:5px 0px 0px 5px;-webkit-border-top-left-radius:5x;-webkit-border-bottom-left-radius:5px;border-top-left-radius:5px;border-bottom-left-radius:5px;-moz-box-shadow:-1px 1px 3px #000;-webkit-box-shadow:-1px 1px 3px #000;box-shadow:-1px 1px 3px #000;}
span.close{background:#000 url(../images/close.png) no-repeat center center;cursor:pointer;height:25px;width:25px;position:absolute;right:12px;top:12px;cursor:pointer;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;opacity:0.5;}
span.close:hover{opacity:1.0;}
.content{width:800px;margin:40px auto 0 auto;background-color:#101010;height:555px;border:1px solid #191919;-moz-box-shadow:0px 0px 10px #000 inset;-webkit-box-shadow:0px 0px 10px #000 inset;box-shadow:0px 0px 10px #000 inset;}
.content h2{background-color:#222;color:#f0f0f0;text-shadow:1px 1px 1px #000;margin:-15px -15px 0 -15px;padding:20px;font-size:30px;font-weight:100;border:1px solid #303030;}
ul.friendsList{list-style:none;margin:10px 0 0 0;}
ul.friendsList li a{display:block;padding:15px 15px 15px 55px;text-decoration:none;color:#ddd;font-size:26px;text-shadow:1px 1px 1px #000;margin:5px 10px;background-color:#1f1f1f;border:1px solid #222;-moz-box-shadow:0px 0px 10px #000;-webkit-box-shadow:0px 0px 10px #000;box-shadow:0px 0px 10px #000;background-repeat:no-repeat;background-position:5px 50%;opacity:0.9;outline:none;}
ul.friendsList li a:hover{color:#fff;border:1px solid #303030;background-color:#212121;opacity:1.0;text-shadow:0px 0px 1px #fff;}
ul.friendsList li.devisefunction a{background-image:url(../images/devisefunction.jpg)}
ul.friendsList li.wordrom a{background-image:url(../images/wordrom.jpg)}
ul.friendsList li.fearlessflyer a{background-image:url(../images/fearlessflyer.jpg)}
ul.friendsList li.bluefaqs a{background-image:url(../images/bluefaqs.jpg)}
ul.friendsList li.ourtuts a{background-image:url(../images/ourtuts.jpg)}
ul.friendsList li.tzine a{background-image:url(../images/tzine.jpg)}
ul.friendsList li.w3avenue a{background-image:url(../images/w3avenue.jpg)}
ul.friendsList li a > span{color:#333;padding-left:10px;font-size:22px;}
ul.friendsList li a:hover > span{text-shadow:1px 1px 1px #000;color:#444;}
.loading{background:transparent url(../images/loading.gif) no-repeat center center;width:100%;height:200px;}
分享到QQ
分享到微博
微信扫一扫
