以下是 jquery弹性幻灯片特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:wb="http://open.weibo.com/wb">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery弹性幻灯片</title>
<link rel="stylesheet" href="css/base.min.css" type="text/css" />
<link rel="stylesheet" href="css/master.min.css" type="text/css" />
<link rel="stylesheet" href="css/page.css" type="text/css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.fixabsmiddle.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/jquery.jcarousel.min.js"></script>
<script type="text/javascript" src="js/jquery.colorbox.min.js"></script>
<script type="text/javascript" src="js/page.min.js"></script>
</head>
<body class="newIndex">
<div id="wrap" class="wrap">
<div id="page-wrapper">
<div class="items login">
<form action="/login.aspx">
<div class="detail clearfix">
<span class="close">关闭</span>
<br>
<br>
<ul>
<li class="email">
<label>邮箱：<span class="errors" id="spanemail" style="display:none;"></span></label>
<input type="text" class="input-text" name="username" id="username" onblur="javascript:checkemail()" />
</li>
<li class="password">
<label>密码：<span class="errors" id="spanpassword" style="display:none;"></span></label>
<input type="password" class="input-text" name="password" id="password" value="" onblur="javascript:checkpassword()"/>
</li>
</ul>
<div class="weibo">
<img id="imgWeibo" class="imgWeiboLogin" src="/images/loginSinabtn.png" onclick="LoginByWeibo()" />
</div>
</div>
<div class="login-submit">
<button class="blueBtn70" onclick="return checkdata();" id="SubmitSend">登录</button>
<button class="blueBtn70" id="BtnRegister"> 注册</button>
<input type="submit" style="display: none" value="" id="hiddenSubmit" />
</div>
<input type="hidden" name="act" id="act" value="" />
<input type="hidden" name="mid" id="mid" value="" />
</form>
</div>
<div class="items Binding">
<form action="/login.aspx">
<div class="detail">
<span class="close">关闭</span>
<div class="SinaHeadInfo">
<p> <img id="SinaHeadImg" class="SinaHeadImg" src=""/>
hi,<label id="SinaUserName"> xx</label> <br>欢迎来到我开始网站！</p>
</div>
<ul>
<li class="email">
<label>邮箱：<span class="errors" id="span1" style="display:none;"></span></label>
<input type="text" class="input-text" id="BindingUsername" onblur="javascript:checkemail()" />
</li>
<li class="password">
<label>密码：<span class="errors" id="span2" style="display:none;"></span></label>
<input type="password" class="input-text" id="BindingPassword" value="" onblur="javascript:checkpassword()"/>
</li>
</ul>
<div class="Bingweibo">
<img id="BingWeibo" src="/images/BingWeibo.jpg" />
</div>
</div>
<div class="Binding-submit">
<button class="blueBtn70" id="Binding-btn" onclick="BindingSinaWeiboUser()"> 绑定</button>
<input type="submit" style="display: none" value="" id="SubmitBinding" />
<input type="hidden" name="SinaUserID" id="SinaUserID" value="" />
</div>
</form>
</div>
<div class="items register">
<form action="/register.aspx">
<div class="detail clearfix">
<span class="close">关闭</span>
<ul>
<li>
<label>邮箱：<span class="errors" id="spanregEmail" style="display:none;"></span> </label>
<input class="input-text" type="text" name="regEmail" id="regEmail" value="" onblur="javascript:checkRegEmail()" onkeyup="value=value.replace(/[^\w\.\_\-\@/]/ig,'')" />
</li>
<li>
<label>昵称：<span class="errors" id="spanregUsername" style="display:none;"></span></label>
<input class="input-text" type="text" name="regUsername" id="regUsername" onblur="javascript:checkusername();" value="" />
</li>
<li>
<label>密码：<span class="errors" id="spanregPassword" style="display:none;"></span></label>
<input class="input-text" type="password" name="regPassword" id="regPassword" value="" onblur="javascript:checkpassword()" />
</li>
<li>
<label>密码确认：<span class="errors" id="spanconfimpassword" style="display:none;"></span></label>
<input class="input-text" type="password" name="confimpassword" id="confimpassword" onblur="javascript:checkconfimpassword()" maxlength="18" value="" />
</li>
<li>
<label>请填写答案：<span class="errors" id="spanvcode" style="display:none;"></span></label>
<div class="pitem"><img src="#" style="width:75px;height:25px" id="vimgs" align="absmiddle" /></div>
<div class="vcodeDiv"><input type="text" name="vcode" id="vcode" onblur="javascript:checkvcode()" maxlength="5" value="" style="width:50px" /> </div>
<div class="changePicA"><a href="javascript:void(0)" onclick="changevcode()" style=" display:block;">看不清，换一张</a> </div>
<div>
<div class="LeaglAgreeDiv"><input type="checkbox" id="InpAgree" name="InpAgree" checked="checked" onclick="SetBtnSubmit()" style="width:20px;height:12px;float:left" />我同意<a href="/template/blue/免责声明.html" target="_blank">《服务条款》</a> </div>
<div class="regbtnDiv">
<div class="blueBtnDiv70" id="register-btn" onclick="checkRegdata();"> 注册</div> </div>
<input type="submit" style="display: none" value="" id="hiddernRegSubmit" />
</div>
</li>
</ul>
</div>
</form>
</div>
<div class="items regSuccess">
<form>
<div class="detail clearfix">
<span class="close">关闭</span>
<p class="weibo">
要马上开始健身游戏吗？！
</p>
</div>
<div class="login-submit">
<button class="grayBtn70" onclick="return checkdata();" id="Button1">开始游戏</button>
<button class="blueBtn70" id="Button2" id="AddMoreInfo"> 完善个人信息</button>
</div>
</form>
</div>
<div class="items HideBinding">
<iframe src="" id="frameHideBinding"></iframe>
</div>
<div id="page">
<h1 id="logo">
<span>
<a href="#"></a>
</span>
</h1>
<div style="position: relative; left: 370px;position: relative;top:20px;float:left;">
<img src="images/logoText.png" />
</div>
<div id="buttonList" class="divButtonList">
<a href="#"><img style="vertical-align:middle; width: 140px; display:inline; margin-right:10px;" src="images/jianshenshipinku.png" /></a>
<button class="grayBtn70">
登 录</button>
<button class="blueBtn70">
马上注册</button>
</div>
<ul class="jcarousel-list jcarousel-list-horizontal">
<li class="jcarousel-item jcarousel-item-horizontal"><a id="A1" >
<img width="573" height="409" src="images/homeslide11.jpg" alt="" /></a>
<div align="center">
<p style="color: #5d5d5d">
运动，健身，来这里！</p>
</div>
</li>
<li class="jcarousel-item jcarousel-item-horizontal"><a id="A5" href="#" target="_blank">
<img width="573" height="409" src="images/iosCS.jpg" alt="" /></a>
<div align="center">
<p style="color: #5d5d5d">
<a href="#" target="_blank">
全新推出iphone客户端
</a></p>
</div>
</li>
<li class="jcarousel-item jcarousel-item-horizontal"><a id="A2" >
<img width="573" height="409" src="images/homeslide12.jpg" alt="" /></a>
<div align="center">
<p style="color: #5d5d5d">
随时随地，跟视频，做运动，玩游戏！</p>
</div>
</li>
<li class="jcarousel-item jcarousel-item-horizontal"><a id="A3" >
<img width="573" height="409" src="images/yourFrends.jpg" alt="" /></a>
<div align="center">
<p style="color: #5d5d5d">
在这里，和你的朋友一起运动！</p>
</div>
</li>
<li class="jcarousel-item jcarousel-item-horizontal"><a id="A4" >
<img width="573" height="409" src="images/PopSpordetail.jpg" alt="" /></a>
<div align="center">
<p style="color: #5d5d5d">
让你的每次流汗都载入史册！</p>
</div>
</li>
<li class="jcarousel-item jcarousel-item-horizontal">
<div style="background:url(images/items-bg.png) no-repeat; height:410px;width:570px;margin: 80px auto 0; ">
<table id="mediaReport" cellpadding="10" cellspacing="0" style="width:100%;">
<tr height="45px">
<td colspan="4"></td>
</tr>
<tr>
<td width="55px"></td>
<td>
<a href="#" target="_blank"><img src="images/36krlogo.jpg" border="0" /></a>
</td>
<td>
<a href="#" target="_blank"><img src="images/ekeji-200x80.png" border="0" /></a>
</td>
<td width="120px"></td>
</tr>
<tr height="25px">
<td colspan="4"></td>
</tr>
<tr>
<td></td>
<td colspan="2">
<a href="#" target="_blank"><img src="images/technode-en-logo.jpg" border="0" /></a>
</td>
<td></td>
</tr>
<tr height="25px">
<td colspan="4"></td>
</tr>
<tr>
<td></td>
<td>
<a href="#" target="_blank"><img src="images/logo.gif" border="0" /></a>
</td>
<td>
<a href="#" target="_blank"><img src="images/Agenda_www_logo.jpg" border="0" /></a>
</td>
<td></td>
</tr>
</table>
</div>
<div align="center">
<p style="color: #5d5d5d">
媒体报道</p>
</div>
</li>
</ul>
</div>
<input type="hidden" name="urls" value="$urls" />
</div>
</div>
<div id="publicVedio" class="indexImgDiv">
<img src="images/leftdownarrow.png" />
</div>
</body>
</html>
JS代码(jquery.fixabsmiddle.min.js):
(function(c){
var b;
c.fn.fixAbsMiddle=function(e){
b=c.extend({
fixclass:"fixAbsMiddle"}
,e||{
}
);
b.element=this;
d();
return this}
;
function a(){
if(c("body").innerHeight()<b.element.outerHeight()){
b.element.addClass(b.fixclass)}
else{
b.element.removeClass(b.fixclass)}
}
function d(){
a();
c(window).resize(a)}
}
)(jQuery);
CSS代码(base.min.css):
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
q:before,q:after{content:''}
abbr,acronym{border:0}
legend{display:none;}
.f12{font-size:12px}
.f13{font-size:13px}
.f14{font-size:14px}
.f16{font-size:16px}
.f20{font-size:20px}
.fb{font-weight:bold}
.fn{font-weight:normal}
.t2{text-indent:2em}
.lh150{line-height:150%}
.lh180{line-height:180%}
.lh200{line-height:200%}
.unl{text-decoration:underline}
.no_unl{text-decoration:none}
.tl{text-align:left}
.tc{text-align:center}
.tr{text-align:right}
.bc{margin-left:auto;margin-right:auto}
.fl{float:left;display:inline}
.fr{float:right;display:inline}
.cb{clear:both}
.cl{clear:left}
.cr{clear:right}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{display:inline-block}
* html .clearfix{height:1%}
.clearfix{display:block}
.vm{vertical-align:middle}
.pr{position:relative}
.pa{position:absolute}
.abs-right{position:absolute;right:0}
.zoom{zoom:1}
.hidden{visibility:hidden}
.none{display:none}
.w10{width:10px}
.w20{width:20px}
.w30{width:30px}
.w40{width:40px}
.w50{width:50px}
.w60{width:60px}
.w70{width:70px}
.w80{width:80px}
.w90{width:90px}
.w100{width:100px}
.w200{width:200px}
.w250{width:250px}
.w300{width:300px}
.w400{width:400px}
.w500{width:500px}
.w600{width:600px}
.w700{width:700px}
.w800{width:800px}
.w{width:100%}
.h50{height:50px}
.h80{height:80px}
.h100{height:100px}
.h200{height:200px}
.h{height:100%}
.m10{margin:10px}
.m15{margin:15px}
.m30{margin:30px}
.mt5{margin-top:5px}
.mt10{margin-top:10px}
.mt15{margin-top:15px}
.mt20{margin-top:20px}
.mt30{margin-top:30px}
.mt50{margin-top:50px}
.mt100{margin-top:100px}
.mb5{margin-bottom:5px}
.mb10{margin-bottom:10px}
.mb15{margin-bottom:15px}
.mb20{margin-bottom:20px}
.mb30{margin-bottom:30px}
.mb50{margin-bottom:50px}
.mb100{margin-bottom:100px}
.ml5{margin-left:5px}
.ml10{margin-left:10px}
.ml15{margin-left:15px}
.ml20{margin-left:20px}
.ml30{margin-left:30px}
.ml50{margin-left:50px}
.ml100{margin-left:100px}
.mr5{margin-right:5px}
.mr10{margin-right:10px}
.mr15{margin-right:15px}
.mr20{margin-right:20px}
.mr30{margin-right:30px}
.mr50{margin-right:50px}
.mr100{margin-right:100px}
.p10{padding:10px}
.p15{padding:15px}
.p30{padding:30px}
.pt5{padding-top:5px}
.pt10{padding-top:10px}
.pt15{padding-top:15px}
.pt20{padding-top:20px}
.pt30{padding-top:30px}
.pt50{padding-top:50px}
.pb5{padding-bottom:5px}
.pb10{padding-bottom:10px}
.pb15{padding-bottom:15px}
.pb20{padding-bottom:20px}
.pb30{padding-bottom:30px}
.pb50{padding-bottom:50px}
.pb100{padding-bottom:100px}
.pl5{padding-left:5px}
.pl10{padding-left:10px}
.pl15{padding-left:15px}
.pl20{padding-left:20px}
.pl30{padding-left:30px}
.pl50{padding-left:50px}
.pl100{padding-left:100px}
.pr5{padding-right:5px}
.pr10{padding-right:10px}
.pr15{padding-right:15px}
.pr20{padding-right:20px}
.pr30{padding-right:30px}
.pr50{padding-right:50px}
.pr100{padding-right:100px}
分享到QQ
分享到微博
微信扫一扫
