以下是 jQuery猎豹橙色大巴动态背景特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery猎豹橙色大巴动态背景特效</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<div class="top-wrap">
<div class="banner-main">
<div class="yuna">
<img src="images/yun-1.png">
</div>
<div class="yunb">
<img src="images/yun-2.png">
</div>
<div class="bus-title">
<img src="images/title.png">
</div>
<div class="bus-sub-title">
<img src="images/title-1.png">
</div>
<div class="bus">
<img src="images/bus.png">
</div>
</div>
</div>
</body>
</html>JS代码(belatedPNG.js):
/*** DD_belatedPNG:Adds IE6 support:PNG images for CSS background-image and HTML <IMG/>.* Author:Drew Diller* Email:drew.diller@gmail.com* URL:http://www.dillerdesign.com/experiment/DD_belatedPNG/* Version:0.0.8a* Licensed under the MIT License:http://dillerdesign.com/experiment/DD_belatedPNG/#license** Example usage:* DD_belatedPNG.fix('.png_bg');
// argument is a CSS selector* DD_belatedPNG.fixPng( someNode );
// argument is an HTMLDomElement**/
/*PLEASE READ:Absolutely everything in this script is SILLY. I know this. IE's rendering of certain pixels doesn't make sense,so neither does this code!*/
var DD_belatedPNG ={
ns:'DD_belatedPNG',imgSize:{
}
,delay:10,nodesFixed:0,createVmlNameSpace:function (){
/* enable VML */
if (document.namespaces && !document.namespaces[this.ns]){
document.namespaces.add(this.ns,'urn:schemas-microsoft-com:vml');
}
}
,createVmlStyleSheet:function (){
/* style VML,enable behaviors */
/*Just in case lots of other developers have addedlots of other stylesheets using document.createStyleSheetand hit the 31-limit mark,let's not use that method!further reading:http://msdn.microsoft.com/en-us/library/ms531194(VS.85).aspx*/
var screenStyleSheet,printStyleSheet;
screenStyleSheet = document.createElement('style');
screenStyleSheet.setAttribute('media','screen');
document.documentElement.firstChild.insertBefore(screenStyleSheet,document.documentElement.firstChild.firstChild);
if (screenStyleSheet.styleSheet){
screenStyleSheet = screenStyleSheet.styleSheet;
screenStyleSheet.addRule(this.ns + '\\:*','{
behavior:url(#default#VML)}
');
screenStyleSheet.addRule(this.ns + '\\:shape','position:absolute;
');
screenStyleSheet.addRule('img.' + this.ns + '_sizeFinder','behavior:none;
border:none;
position:absolute;
z-index:-1;
top:-10000px;
visibility:hidden;
');
/* large negative top value for avoiding vertical scrollbars for large images,suggested by James O'Brien,http://www.thanatopsic.org/hendrik/ */
this.screenStyleSheet = screenStyleSheet;
/* Add a print-media stylesheet,for preventing VML artifacts from showing up in print (including preview). */
/* Thanks to R闁檌 Pr闁st for automating this! */
printStyleSheet = document.createElement('style');
printStyleSheet.setAttribute('media','print');
document.documentElement.firstChild.insertBefore(printStyleSheet,document.documentElement.firstChild.firstChild);
printStyleSheet = printStyleSheet.styleSheet;
printStyleSheet.addRule(this.ns + '\\:*','{
display:none !important;
}
');
printStyleSheet.addRule('img.' + this.ns + '_sizeFinder','{
display:none !important;
}
');
}
}
,readPropertyChange:function (){
var el,display,v;
el = event.srcElement;
if (!el.vmlInitiated){
return;
}
if (event.propertyName.search('background') != -1 || event.propertyName.search('border') != -1){
DD_belatedPNG.applyVML(el);
}
if (event.propertyName == 'style.display'){
display = (el.currentStyle.display == 'none') ? 'none':'block';
for (v in el.vml){
if (el.vml.hasOwnProperty(v)){
el.vml[v].shape.style.display = display;
}
}
}
if (event.propertyName.search('filter') != -1){
DD_belatedPNG.vmlOpacity(el);
}
}
,vmlOpacity:function (el){
if (el.currentStyle.filter.search('lpha') != -1){
var trans = el.currentStyle.filter;
trans = parseInt(trans.substring(trans.lastIndexOf('=')+1,trans.lastIndexOf(')')),10)/100;
el.vml.color.shape.style.filter = el.currentStyle.filter;
/* complete guesswork */
el.vml.image.fill.opacity = trans;
/* complete guesswork */
}
}
,handlePseudoHover:function (el){
setTimeout(function (){
/* wouldn't work as intended without setTimeout */
DD_belatedPNG.applyVML(el);
}
,1);
}
,/*** This is the method to use in a document.* @param{
String}
selector - REQUIRED - a CSS selector,such as '#doc .container'**/
fix:function (selector){
if (this.screenStyleSheet){
var selectors,i;
selectors = selector.split(',');
/* multiple selectors supported,no need for multiple calls to this anymore */
for (i=0;
i<selectors.length;
i++){
this.screenStyleSheet.addRule(selectors[i],'behavior:expression(DD_belatedPNG.fixPng(this))');
/* seems to execute the function without adding it to the stylesheet - interesting... */
}
}
}
,applyVML:function (el){
el.runtimeStyle.cssText = '';
this.vmlFill(el);
this.vmlOffsets(el);
this.vmlOpacity(el);
if (el.isImg){
this.copyImageBorders(el);
}
}
,attachHandlers:function (el){
var self,handlers,handler,moreForAs,a,h;
self = this;
handlers ={
resize:'vmlOffsets',move:'vmlOffsets'}
;
if (el.nodeName == 'A'){
moreForAs ={
mouseleave:'handlePseudoHover',mouseenter:'handlePseudoHover',focus:'handlePseudoHover',blur:'handlePseudoHover'}
;
for (a in moreForAs){
if (moreForAs.hasOwnProperty(a)){
handlers[a] = moreForAs[a];
}
}
}
for (h in handlers){
if (handlers.hasOwnProperty(h)){
handler = function (){
self[handlers[h]](el);
}
;
el.attachEvent('on' + h,handler);
}
}
el.attachEvent('onpropertychange',this.readPropertyChange);
}
,giveLayout:function (el){
el.style.zoom = 1;
if (el.currentStyle.position == 'static'){
el.style.position = 'relative';
}
}
,copyImageBorders:function (el){
var styles,s;
styles ={
'borderStyle':true,'borderWidth':true,'borderColor':true}
;
for (s in styles){
if (styles.hasOwnProperty(s)){
el.vml.color.shape.style[s] = el.currentStyle[s];
}
}
}
,vmlFill:function (el){
if (!el.currentStyle){
return;
}
else{
var elStyle,noImg,lib,v,img,imgLoaded;
elStyle = el.currentStyle;
}
for (v in el.vml){
if (el.vml.hasOwnProperty(v)){
el.vml[v].shape.style.zIndex = elStyle.zIndex;
}
}
el.runtimeStyle.backgroundColor = '';
el.runtimeStyle.backgroundImage = '';
noImg = true;
if (elStyle.backgroundImage != 'none' || el.isImg){
if (!el.isImg){
el.vmlBg = elStyle.backgroundImage;
el.vmlBg = el.vmlBg.substr(5,el.vmlBg.lastIndexOf('")')-5);
}
else{
el.vmlBg = el.src;
}
lib = this;
if (!lib.imgSize[el.vmlBg]){
/* determine size of loaded image */
img = document.createElement('img');
lib.imgSize[el.vmlBg] = img;
img.className = lib.ns + '_sizeFinder';
img.runtimeStyle.cssText = 'behavior:none;
position:absolute;
left:-10000px;
top:-10000px;
border:none;
margin:0;
padding:0;
';
/* make sure to set behavior to none to prevent accidental matching of the helper elements! */
imgLoaded = function (){
this.width = this.offsetWidth;
/* weird cache-busting requirement! */
this.height = this.offsetHeight;
lib.vmlOffsets(el);
}
;
img.attachEvent('onload',imgLoaded);
img.src = el.vmlBg;
img.removeAttribute('width');
img.removeAttribute('height');
document.body.insertBefore(img,document.body.firstChild);
}
el.vml.image.fill.src = el.vmlBg;
noImg = false;
}
el.vml.image.fill.on = !noImg;
el.vml.image.fill.color = 'none';
el.vml.color.shape.style.backgroundColor = elStyle.backgroundColor;
el.runtimeStyle.backgroundImage = 'none';
el.runtimeStyle.backgroundColor = 'transparent';
}
,/* IE can't figure out what do when the offsetLeft and the clientLeft add up to 1,and the VML ends up getting fuzzy... so we have to push/enlarge things by 1 pixel and then clip off the excess */
vmlOffsets:function (el){
var thisStyle,size,fudge,makeVisible,bg,bgR,dC,altC,b,c,v;
thisStyle = el.currentStyle;
size ={
'W':el.clientWidth+1,'H':el.clientHeight+1,'w':this.imgSize[el.vmlBg].width,'h':this.imgSize[el.vmlBg].height,'L':el.offsetLeft,'T':el.offsetTop,'bLW':el.clientLeft,'bTW':el.clientTop}
;
fudge = (size.L + size.bLW == 1) ? 1:0;
/* vml shape,left,top,width,height,origin */
makeVisible = function (vml,l,t,w,h,o){
vml.coordsize = w+','+h;
vml.coordorigin = o+','+o;
vml.path = 'm0,0l'+w+',0l'+w+','+h+'l0,'+h+' xe';
vml.style.width = w + 'px';
vml.style.height = h + 'px';
vml.style.left = l + 'px';
vml.style.top = t + 'px';
}
;
makeVisible(el.vml.color.shape,(size.L + (el.isImg ? 0:size.bLW)),(size.T + (el.isImg ? 0:size.bTW)),(size.W-1),(size.H-1),0);
makeVisible(el.vml.image.shape,(size.L + size.bLW),(size.T + size.bTW),(size.W),(size.H),1 );
bg ={
'X':0,'Y':0}
;
if (el.isImg){
bg.X = parseInt(thisStyle.paddingLeft,10) + 1;
bg.Y = parseInt(thisStyle.paddingTop,10) + 1;
}
else{
for (b in bg){
if (bg.hasOwnProperty(b)){
this.figurePercentage(bg,size,b,thisStyle['backgroundPosition'+b]);
}
}
}
el.vml.image.fill.position = (bg.X/size.W) + ',' + (bg.Y/size.H);
bgR = thisStyle.backgroundRepeat;
dC ={
'T':1,'R':size.W+fudge,'B':size.H,'L':1+fudge}
;
/* these are defaults for repeat of any kind */
altC ={
'X':{
'b1':'L','b2':'R','d':'W'}
,'Y':{
'b1':'T','b2':'B','d':'H'}
}
;
if (bgR != 'repeat' || el.isImg){
c ={
'T':(bg.Y),'R':(bg.X+size.w),'B':(bg.Y+size.h),'L':(bg.X)}
;
/* these are defaults for no-repeat - clips down to the image location */
if (bgR.search('repeat-') != -1){
/* now let's revert to dC for repeat-x or repeat-y */
v = bgR.split('repeat-')[1].toUpperCase();
c[altC[v].b1] = 1;
c[altC[v].b2] = size[altC[v].d];
}
if (c.B > size.H){
c.B = size.H;
}
el.vml.image.shape.style.clip = 'rect('+c.T+'px '+(c.R+fudge)+'px '+c.B+'px '+(c.L+fudge)+'px)';
}
else{
el.vml.image.shape.style.clip = 'rect('+dC.T+'px '+dC.R+'px '+dC.B+'px '+dC.L+'px)';
}
}
,figurePercentage:function (bg,size,axis,position){
var horizontal,fraction;
fraction = true;
horizontal = (axis == 'X');
switch(position){
case 'left':case 'top':bg[axis] = 0;
break;
case 'center':bg[axis] = 0.5;
break;
case 'right':case 'bottom':bg[axis] = 1;
break;
default:if (position.search('%') != -1){
bg[axis] = parseInt(position,10) / 100;
}
else{
fraction = false;
}
}
bg[axis] = Math.ceil( fraction ? ( (size[horizontal?'W':'H'] * bg[axis]) - (size[horizontal?'w':'h'] * bg[axis]) ):parseInt(position,10) );
if (bg[axis] % 2 === 0){
bg[axis]++;
}
return bg[axis];
}
,fixPng:function (el){
el.style.behavior = 'none';
var lib,els,nodeStr,v,e;
if (el.nodeName == 'BODY' || el.nodeName == 'TD' || el.nodeName == 'TR'){
/* elements not supported yet */
return;
}
el.isImg = false;
if (el.nodeName == 'IMG'){
if(el.src.toLowerCase().search(/\.png$/) != -1){
el.isImg = true;
el.style.visibility = 'hidden';
}
else{
return;
}
}
else if (el.currentStyle.backgroundImage.toLowerCase().search('.png') == -1){
return;
}
lib = DD_belatedPNG;
el.vml ={
color:{
}
,image:{
}
}
;
els ={
shape:{
}
,fill:{
}
}
;
for (v in el.vml){
if (el.vml.hasOwnProperty(v)){
for (e in els){
if (els.hasOwnProperty(e)){
nodeStr = lib.ns + ':' + e;
el.vml[v][e] = document.createElement(nodeStr);
}
}
el.vml[v].shape.stroked = false;
el.vml[v].shape.appendChild(el.vml[v].fill);
el.parentNode.insertBefore(el.vml[v].shape,el);
}
}
el.vml.image.shape.fillcolor = 'none';
/* Don't show blank white shapeangle when waiting for image to load. */
el.vml.image.fill.type = 'tile';
/* Makes image show up. */
el.vml.color.fill.on = false;
/* Actually going to apply vml element's style.backgroundColor,so hide the whiteness. */
lib.attachHandlers(el);
lib.giveLayout(el);
lib.giveLayout(el.offsetParent);
el.vmlInitiated = true;
lib.applyVML(el);
/* Render! */
}
}
;
try{
document.execCommand("BackgroundImageCache",false,true);
/* TredoSoft Multiple IE doesn't like this,so try{
}
it */
}
catch(r){
}
DD_belatedPNG.createVmlNameSpace();
DD_belatedPNG.createVmlStyleSheet();
JS代码(common.js):
var liebaoBus={
}
;
function isCard(e){
var f=$(".tip_info");
e=e.toUpperCase();
if(!(/(^\d{
15}
$)|(^\d{
17}
([0-9]|X)$)/.test(e))){
f.html("输入的身份证号不符合规定！");
return false}
else{
f.html("")}
var g,m;
g=e.length;
if(g==15){
m=new RegExp(/^(\d{
6}
)(\d{
2}
)(\d{
2}
)(\d{
2}
)(\d{
3}
)$/);
var l=e.match(m);
var c=new Date("19"+l[2]+"/"+l[3]+"/"+l[4]);
var b;
b=(c.getYear()==Number(l[2]))&&((c.getMonth()+1)==Number(l[3]))&&(c.getDate()==Number(l[4]));
if(!b){
f.html("输入的身份证号里出生日期不对！");
return false}
else{
var j=new Array(7,9,10,5,8,4,2,1,6,3,7,9,10,5,8,4,2);
var k=new Array("1","0","X","9","8","7","6","5","4","3","2");
var h=0,d;
e=e.substr(0,6)+"19"+e.substr(6,e.length-6);
for(d=0;
d<17;
d++){
h+=e.substr(d,1)*j[d]}
e+=k[h%11];
return true}
}
if(g==18){
m=new RegExp(/^(\d{
6}
)(\d{
4}
)(\d{
2}
)(\d{
2}
)(\d{
3}
)([0-9]|X)$/);
var l=e.match(m);
var c=new Date(l[2]+"/"+l[3]+"/"+l[4]);
var b;
b=(c.getFullYear()==Number(l[2]))&&((c.getMonth()+1)==Number(l[3]))&&(c.getDate()==Number(l[4]));
if(!b){
f.html("输入的身份证号里出生日期不对！");
return false}
else{
var a;
var j=new Array(7,9,10,5,8,4,2,1,6,3,7,9,10,5,8,4,2);
var k=new Array("1","0","X","9","8","7","6","5","4","3","2");
var h=0,d;
for(d=0;
d<17;
d++){
h+=e.substr(d,1)*j[d]}
a=k[h%11];
if(a!=e.substr(17,1)){
f.html("18位身份证的校验码不正确！应该为："+a);
return false}
return true}
}
return false}
liebaoBus.webLayout=function(){
var c=$(".line_list"),b=$(".det_main"),a=$(".area");
$("#mask").css({
height:$(document).height()+"px"}
);
if(b.height()<=514){
b.css({
height:"514px"}
)}
a.bind("focus",function(){
if($(this).val()==this.defaultValue){
$(this).val("#免费橙色大巴#")}
}
);
a.bind("blur",function(){
if($(this).val()=="#免费橙色大巴#"){
$(this).val(this.defaultValue)}
}
)}
;
liebaoBus.lineTab=function(){
var a=$(".line_list li");
a.bind("click",function(){
var c=$(this);
var d=c.index();
var b=$(".det_main");
a.find(".city_name").removeClass("cur");
c.find(".city_name").addClass("cur");
a.find(".cur_line").css({
display:"none"}
);
c.find(".cur_line").css({
display:"block"}
);
b.hide();
b.eq(d).show()}
)}
;
liebaoBus.popContnet=function(){
var c=$("#mask"),b=$("#sub_a"),e=$(".tip_info"),a=$("input[type='checkbox']:checked"),d=$(".form_text");
$(".close_pop").bind("click",function(){
e.html("");
$(".form_text").val("");
$(this).parents(".pop_main").hide();
c.hide()}
);
$("#businfo").bind("click",function(){
$("#pop10").show();
c.show()}
);
$("#myname").bind("blur",function(){
if($(this).val()==""||$(this).val().length==0){
e.html("姓名不能为空!");
return false}
}
).keyup(function(){
$(this).triggerHandler("blur")}
).focus(function(){
$(this).triggerHandler("blur")}
);
$("#id_a,#id_b").bind("blur",function(){
if($(this).val()==""||$(this).val().length==0){
e.html("身份证号不能为空！");
return false}
}
).keyup(function(){
isCard($(this).val());
return false}
).focus(function(){
$(this).triggerHandler("blur")}
);
$("#phone").bind("blur",function(){
var f=/^(((13[0-9]{
1}
)|(15[0-9]{
1}
)|(18[0-9]{
1}
)|(17[0-9]{
1}
))+\d{
8}
)$/;
if($(this).val()==""||$(this).val().length==0){
e.html("手机号不能为空!");
return false}
else{
if(!f.test($(this).val())){
e.html("手机号格式不正确!");
return false}
else{
e.html("")}
}
}
).keyup(function(){
$(this).triggerHandler("blur")}
).focus(function(){
$(this).triggerHandler("blur")}
);
$("#qq").bind("blur",function(){
var f=/[1-9][0-9]{
4,}
/;
if($(this).val()==""||$(this).val().length==0){
e.html("QQ号不能为空!");
return false}
else{
if(!f.test($(this).val())){
e.html("QQ号格式不正确!")}
else{
e.html("")}
}
}
).keyup(function(){
$(this).triggerHandler("blur")}
).focus(function(){
$(this).triggerHandler("blur")}
);
$("#cap_a,#cap_b,#cap_c").blur(function(){
if($(this).val()==""||$(this).val().length==0){
e.html("验证码不能为空!");
return false}
else{
e.html("")}
}
).keyup(function(){
$(this).triggerHandler("blur")}
).focus(function(){
$(this).triggerHandler("blur")}
);
$("#sub_k").bind("click",function(){
var k=$(this),g=$("#cap_b"),j=$("#qq"),f=$("#phone"),i=$("#id_b"),h=$("#myname");
if(h.val()==""||h.val().length==0){
e.html("姓名不能为空!");
return false}
else{
if(i.val()==""||i.val().length==0){
e.html("身份证号不能为空！");
return false}
else{
if(!isCard(i.val())){
e.html("身份证号错误！");
return false}
else{
if(f.val()==""||f.val().length==0){
e.html("手机号不能为空!");
return false}
else{
if(!/[1-9][0-9]{
4,}
/.test(f.val())){
e.html("手机号错误!");
return false}
else{
if(g.val()==""||g.val().length==0){
e.html("验证码不能为空!");
return false}
else{
e.html("");
$.ajax({
url:"http://api.liebao.cn/market/index.php?r=liebaobus/signup",type:"get",data:{
bid:lineBid,username:h.val(),idnum:i.val(),mobile:f.val(),qq:j.val(),comefrom:$("#sourceinfo option:selected").val(),code:g.val(),cityname:$("#city").val(),startdate:$("[name=startdate]").val(),starttime:$("[name=starttime]").val(),status:$("[name=status]").val()}
,dataType:"jsonp",success:function(n){
if(n.ret==0){
sid=n.sid;
k.parents(".pop_main").hide();
$("#pop2").show();
var o=$("[name=id]").val();
var l=parseInt($("#sign"+o).text());
var m=parseInt($("#rest"+o).text());
if(m>0){
$("#sign"+o).text(++l);
$("#rest"+o).text(--m)}
if(m==0){
$("[data-id="+o+"]").text("有坐通知我").addClass("style");
$("#sta"+o+" .sta_but").addClass("null")}
}
else{
if(n.ret==1){
k.parents(".pop_main").hide();
$("#pop3").show()}
else{
e.html(n.msg);
$("#pop9 .cap img").attr("src","http://api.liebao.cn/market/index.php?r=liebaobus/getcode&"+(new Date()).valueOf())}
}
}
,error:function(){
k.parents(".pop_main").hide();
$("#pop3").show()}
}
)}
}
}
}
}
}
}
);
$("#sub_a").bind("click",function(){
var h=$(this),f=$("#cap_c"),g=$("#id_a");
if(g.val()==""||g.val().length==0){
e.html("身份证号不能为空！");
return false}
else{
if(f.val()==""||f.val().length==0){
e.html("验证码不能为空!");
return false}
else{
e.html("");
$.ajax({
url:"http://api.liebao.cn/market/index.php?r=liebaobus/getmyinfo",type:"get",data:{
idnum:g.val(),code:f.val()}
,dataType:"jsonp",success:function(j){
window.idnum="";
if(j.ret==0){
window.idnum=g.val();
g.val("");
f.val("");
var k=j.data;
var i="";
i+="姓名："+k.username+"<br>";
i+="手机号："+k.mobile+"<br>";
i+="身份证号："+k.idnum+"<br>";
i+="您的行程：";
i+=k.startstation+"-"+k.middlestation+"-"+k.endstation+"<br>";
i+="发车日期："+k.startdate+"<br />";
i+="发车时间："+k.starttime+"<br />";
i+="报名状态：";
window.tatus=k.status;
switch(k.status){
case 1:case"1":i+="<span>报名成功，请耐心等待人工审核！</span>";
break;
case 2:case"2":i+="<span>已进入排队阶段！如有空闲座位系统将会自动替补！</span>";
break;
case 3:case"3":i+="<span>您已退出报名，感谢您的支持！</span>";
break;
case 4:case"4":i+="<span>很抱歉，由于您的爽约，已被加入黑名单！</span>";
break;
case 5:case"5":i+="<span>恭喜您，人工审核通过，请准时来乘坐橙色大巴，感谢您的支持！</span>";
break;
case 6:case"6":i+="<span>不好意思，您的报名未通过审核！</span>";
break}
if(k.status!=3){
$("#sub_c").show()}
else{
$("#sub_c").hide()}
i=i.replace(/\-{
3}
/,"-");
$("#pop7 .text_d").html(i);
h.parents(".pop_main").hide();
$("#pop7").show()}
else{
e.html(j.msg)}
}
,error:function(){
e.html("无法查询您的信息")}
}
)}
}
}
);
$("#sub_h").click(function(){
if($("#checkbox").is(":checked")==false){
e.html("请您阅读协议!");
return false}
else{
e.html("");
$(this).parents(".pop_main").hide();
$("#pop9 .cap img").attr("src","http://api.liebao.cn/market/index.php?r=liebaobus/getcode&"+(new Date()).valueOf());
$("#pop9").show()}
}
);
$("input[type='checkbox']").click(function(){
e.html("")}
);
$(".sign_but").click(function(){
$("#pop8 .cap img").attr("src","http://api.liebao.cn/market/index.php?r=liebaobus/getcode&"+(new Date()).valueOf());
$("#pop8").show();
c.show()}
);
$("#sub_b,#sub_e,#sub_f").click(function(){
e.html("");
$(this).parents(".pop_main").hide();
c.hide()}
);
$("#sub_yes").click(function(){
var f=window.location.href;
e.html("");
$(this).parents(".pop_main").hide();
c.hide();
window.location.href=f}
);
$("#sub_c").click(function(){
$(this).parents(".pop_main").hide();
$("#pop5 .cap img").attr("src","http://api.liebao.cn/market/index.php?r=liebaobus/getcode&"+(new Date()).valueOf());
$("#pop5").show()}
);
$("#sub_d").click(function(){
var g=$(this);
var f=$("#cap_a").val();
if(f==""){
$(this).closest(".pop_main").find(".tip_info").text("验证码不能为空!");
return false}
$.ajax({
url:"http://api.liebao.cn/market/index.php?r=liebaobus/changestatus",type:"get",data:{
idnum:window.idnum,code:f,status:window.tatus}
,dataType:"jsonp",success:function(h){
if(h.ret==0){
g.parents(".pop_main").hide();
$("#pop6").show()}
else{
if(h.ret==1){
e.html("网络错误，请重试。")}
else{
e.html(h.msg)}
}
}
,error:function(){
e.html("取消失败")}
}
)}
);
$(document).on("click",".bar_but",function(){
var f=$(this).attr("data-city");
lineBid=$(this).attr("data-bid");
var g="";
g+=f;
$("#city").html(g);
$("[name=startdate]").val($(this).attr("data-date"));
$("[name=starttime]").val($(this).attr("data-time"));
$("[name=id]").val($(this).attr("data-id"));
if($(this).hasClass("style")){
$("[name=status]").val(2);
$("#pop4").show();
$("#lineUpNum").html($(this).attr("data-queuenum"))}
else{
$("[name=status]").val(1);
$("#pop1").show()}
c.show()}
);
$("#sub_j").bind("click",function(){
$(this).parents(".pop_main").hide();
$("#pop1").show()}
);
$("#pop9 .for_huan").bind("click",function(){
$(this).parents("li").find(".cap img").attr("src","http://api.liebao.cn/market/index.php?r=liebaobus/getcode&"+(new Date()).valueOf())}
);
$("#pop8 .for_huan").bind("click",function(){
$(this).parents("li").find(".cap img").attr("src","http://api.liebao.cn/market/index.php?r=liebaobus/getcode&"+(new Date()).valueOf())}
);
$("#pop5 .for_huan").bind("click",function(){
$(this).parents("li").find(".cap img").attr("src","http://api.liebao.cn/market/index.php?r=liebaobus/getcode&"+(new Date()).valueOf())}
);
$("#sub_qr").click(function(){
$("#pop10").hide();
$("#mask").hide()}
)}
;
liebaoBus.dddcAjax=function(){
var a=$("#sub_dddc");
a.click(function(){
$.ajax({
url:"http://api.liebao.cn/market/index.php?r=liebaobus/didicode",type:"get",data:{
sid:sid}
,dataType:"jsonp",success:function(b){
if(b&&b!=null){
var c=$("#dddcInfo");
if(b.ret==0){
c.text(b.msg)}
else{
if(b.ret==1){
c.text(b.msg)}
else{
if(b.ret==2){
c.text(b.msg)}
else{
if(b.ret==3){
c.text(b.msg)}
else{
if(b.ret==4){
c.text(b.msg)}
else{
if(b.ret==5){
c.text(b.msg)}
else{
c.text("出现请求错误了！")}
}
}
}
}
}
$("#pop2").hide();
$("#pop10").show()}
}
,error:function(){
throw new Error("ajax error!")}
}
)}
)}
;
String.prototype.trim=function(){
return this.replace(/(^\s*)|(\s*$)/g,"")}
;
String.prototype.temp=function(b){
return this.replace(/\$\w+\$/gi,function(a){
a=b[a.replace(/\$/g,"")];
return a+""=="undefined"?"":a}
)}
;
var LBBus={
getBus:function(){
$.ajax({
url:"http://api.liebao.cn/market/index.php?r=liebaobus/getbusinfo",type:"get",data:{
r:"liebaobus/getbusinfo"}
,dataType:"jsonp",success:function(a){
LBBus.formatBus(a.data)}
,error:function(){
throw new Error("ajax error!")}
}
)}
,formatBus:function(e){
var j='<li><div class="cur_line"></div><span class="city_name">$startstation$-$middlestation$-$endstation$</span></li>';
var f='<li><div class="cur_line"></div><span class="city_name" style="line-height:22px;
"><b>(世纪佳缘专列)</b><br />$startstation$-$middlestation$-$endstation$</span></li>';
var k='<li><div class="cur_line"></div><span class="city_name" style="line-height:22px;
"><b>(爱玛电动车专列)</b><br />$startstation$-$middlestation$-$endstation$</span></li>';
var h='<li><div class="cur_line"></div><span class="city_name" style="line-height:22px;
"><b>(王老吉专列)</b><br />$startstation$-$middlestation$-$endstation$</span></li>';
var a="";
var b="";
var l="";
var g=[];
for(var m in e){
if(e[m]["line"].bid==8||e[m]["line"].bid==9||e[m]["line"].bid==3||e[m]["line"].bid==4){
a+=h.temp(e[m]["line"])}
else{
if(e[m]["line"].bid==11){
a+=f.temp(e[m]["line"])}
else{
if(e[m]["line"].bid==6){
a+=k.temp(e[m]["line"])}
else{
a+=j.temp(e[m]["line"])}
}
}
b+='<div class="det_main clearfix">';
b+='<div class="parking_info">'+e[m]["line"]["lineinfo"]+"</div>";
b+='<table class="time_table"><tbody><tr><th>发车日期</th><th>发车时间</th><th>预计到达</th><th>车辆(45座位)</th><th>报名人数</th><th>剩余座位</th><th>报名</th><th></th></tr>';
l="";
g=[];
for(var c=0;
c<e[m]["info"].length;
c++){
if(l!=e[m]["info"][c]["startdate"]){
g.push(1);
l=e[m]["info"][c]["startdate"]}
else{
g[g.length-1]++}
}
l="";
for(var c=0;
c<e[m]["info"].length;
c++){
b+="<tr>";
if(l!=e[m]["info"][c]["startdate"]){
b+='<td rowspan="'+g.shift()+'"><b>'+e[m]["info"][c]["startdate"]+"</b></td>";
l=e[m]["info"][c]["startdate"]}
b+="<td>"+e[m]["info"][c]["starttime"]+"</td>";
b+="<td>"+e[m]["info"][c]["arrivetime"]+"</td>";
b+="<td>"+e[m]["info"][c]["busnum"]+"</td>";
b+='<td id="sign'+e[m]["info"][c]["id"]+'">'+e[m]["info"][c]["signinfo"]+"</td>";
b+='<td id="rest'+e[m]["info"][c]["id"]+'">'+e[m]["info"][c]["restseats"]+"</td>";
if(e[m]["info"][c]["restseats"]>0){
b+='<td id="sta'+e[m]["info"][c]["id"]+'"><span class="sta_but"></span></td>';
b+='<td class="bar-btn-wrap"><span class="bar_but" data-queuenum="'+e[m]["info"][c]["queuenum"]+'" data-bid="'+e[m]["line"]["bid"]+'" data-city="'+e[m]["line"]["startstation"]+"-"+e[m]["line"]["middlestation"]+"-"+e[m]["line"]["endstation"]+'" data-date="'+e[m]["info"][c]["startdate"]+'" data-time="'+e[m]["info"][c]["starttime"]+'" data-id="'+e[m]["info"][c]["id"]+'"></span></td>'}
else{
b+='<td id="sta'+e[m]["info"][c]["id"]+'"><span class="sta_but mnull"></span></td>';
b+='<td class="bar-btn-wrap"><span class="bar_but style" data-queuenum="'+e[m]["info"][c]["queuenum"]+'" data-bid="'+e[m]["line"]["bid"]+'" data-city="'+e[m]["line"]["startstation"]+"-"+e[m]["line"]["middlestation"]+"-"+e[m]["line"]["endstation"]+'" data-date="'+e[m]["info"][c]["startdate"]+'" data-time="'+e[m]["info"][c]["starttime"]+'" data-id="'+e[m]["info"][c]["id"]+'"></span></td>'}
b+="</tr>"}
b+="</tbody></table>";
b+='<div class="map">'+e[m]["line"]["imginfo"]+"</div>";
b+="</div>"}
$(".line_list").html(a.replace(/\-{
3}
/g,"-"));
$(".det_box").html(b);
$(".line_list li:eq(0) .city_name").addClass("cur");
$(".line_list li:eq(0) .cur_line").css({
display:"block"}
);
$(".line_list li:last-child").addClass("backb");
$(".line_list li:first-child").addClass("backa");
$(".det_main").height($(".line_city").height()-100);
$(".det_box .det_main:eq(0)").show();
liebaoBus.lineTab()}
}
;
SlideClass={
hasPrototype:false,newClass:function(a){
var a=a||{
}
;
if(!this.hasPrototype){
this.init.prototype=SlideClass;
this.hasPrototype=true}
return new this.init(a)}
,autoPlay:function(){
var a=this;
if(!this.slideMain.is(":animated")){
a.item++;
if(a.item==a.length){
a.item=0}
a.animationObj(a.item);
a.curAnimation(a.item);
a.clearAnimation=setTimeout(function(){
a.autoPlay()}
,a.interval)}
}
,prvePage:function(){
if(!this.slideMain.is(":animated")){
if(this.item==0){
this.item=this.length-1}
else{
this.item--}
this.animationObj(this.item);
this.curAnimation(this.item)}
}
,nextPage:function(){
if(!this.slideMain.is(":animated")){
if(this.item==this.length-1){
this.item=0}
else{
this.item++}
this.animationObj(this.item);
this.curAnimation(this.item)}
}
,clickCur:function(a){
var c=this;
clearTimeout(c.clearAnimation);
var b=$(a).index();
this.aCur.removeClass(this.curName);
this.aCur.eq(b).addClass(this.curName);
this.animationObj(b);
this.item=b}
,animationObj:function(a){
this.slideMain.removeClass(this.addclassName).hide().css({
opacity:0.6,zIndex:0}
);
this.slideMain.eq(a).addClass(this.addclassName).show().stop(true,false).animate({
opacity:1,zIndex:8}
,this.speed)}
,curAnimation:function(b){
var a=this.aCur;
a.removeClass(this.curName);
a.eq(b).addClass(this.curName)}
,hoverWrap:function(a){
var b=this;
a.hoverMain.hover(function(c){
clearTimeout(b.clearAnimation)}
,function(){
b.clearAnimation=setTimeout(function(){
b.autoPlay()}
,b.interval)}
)}
,init:function(a){
var b=this;
b.clearAnimation=null;
b.item=0;
b.speed=a.speed;
b.interval=a.interval;
b.prev=a.prve;
b.next=a.next;
b.length=a.slideMain.length;
b.slideMain=a.slideMain;
b.aCur=a.aCur;
b.curName=a.curName;
b.addclassName=a.addclassName;
b.touchMain=a.touchMain;
b.hoveMain=a.hoveMain;
clearTimeout(b.clearAnimation);
b.clearAnimation=setTimeout(function(){
b.autoPlay()}
,b.interval);
a.prev.click(function(){
b.prvePage()}
);
a.prev.hover(function(){
clearTimeout(b.clearAnimation);
$(this).addClass(a.pnHover)}
,function(){
$(this).removeClass(a.pnHover);
b.clearAnimation=setTimeout(function(){
b.autoPlay()}
,b.interval)}
);
a.next.click(function(){
b.nextPage()}
);
a.next.hover(function(){
clearTimeout(b.clearAnimation);
$(this).addClass(a.pnHover)}
,function(){
$(this).removeClass(a.pnHover);
b.clearAnimation=setTimeout(function(){
b.autoPlay()}
,b.interval)}
);
a.aCur.click(function(){
b.clickCur(this)}
);
b.hoverWrap(a)}
}
;
var eleObject={
speed:500,interval:5000,slideMain:$(".slide"),curName:"cur",addclassName:"banAnimate",prev:$(".prev"),next:$(".next"),aCur:$(".item a"),hoverMain:$(".cpaslide"),pnHover:"pnhover"}
;
$(function(){
LBBus.getBus();
liebaoBus.webLayout();
liebaoBus.popContnet();
SlideClass.newClass(eleObject);
liebaoBus.dddcAjax();
var c=$("#pop5"),b=$("#pop8"),a=$("#pop9");
c.is(":visible")?c.find(".cap img").attr("src","http://api.liebao.cn/market/index.php?r=liebaobus/getcode"):c.find(".cap img").attr("src","");
b.is(":visible")?b.find(".cap img").attr("src","http://api.liebao.cn/market/index.php?r=liebaobus/getcode"):b.find(".cap img").attr("src","");
a.is(":visible")?a.find(".cap img").attr("src","http://api.liebao.cn/market/index.php?r=liebaobus/getcode"):a.find(".cap img").attr("src","");
$(".close_pop").hover(function(){
$(this).addClass("hopacity")}
,function(){
$(this).removeClass("hopacity")}
);
$(document).on("click","a",function(d){
var f=$(this).attr("stat");
try{
_hmt.push(["_trackEvent",f,"liebaobus","click","stat",f])}
catch(d){
}
}
);
$("#video").html('<embed src="http://player.youku.com/player.php/sid/XNjY2ODYxMDc2/v.swf" allowFullScreen="true" quality="high" width="500" height="300" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>')}
);
CSS代码(style.css):
@charset "utf-8";body,dl,dd,h1,h2,h3,h4,p{margin:0;}
body,input,button,textarea,select,option,label{font-family:Tahoma,Arial,Roboto,"Droid Sans","Helvetica Neue","Droid Sans Fallback","Heiti SC","Hiragino Sans GB",'\5FAE\8F6F\96C5\9ED1','\5B8B\4F53,\9ED1\4F53',sans-self;font-size:12px;color:#333;}
img,a,a:active,a:focus{border:none;outline:none;}
ol,ul{list-style:none;margin:0;padding:0;}
em,i,b,strong{font-size:100%;font-style:normal;font-weight:normal;}
button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}
input,button,textarea,select,label,form{margin:0;padding:0;border:none;font-size:100%;outline:none;}
input,select{vertical-align:middle;}
table{border-collapse:collapse;border-spacing:0;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;font-size:0;}
.clearfix{zoom:1;}
a{text-decoration:none;}
* html{background-image:url(about:blank);background-attachment:fixed;}
/* 修正IE6振动bug */
body{background:#ffc600;}
/* layout */
.top-wrap{height:620px;background:url(../images/top-wrap-bg.png) repeat-x;}
.header{width:980px;height:55px;position:relative;margin:0 auto;overflow:hidden;}
.logo{position:absolute;z-index:1;}
.logo{display:block;top:7px;left:0;width:79px;height:41px;background:url(../images/logo.png) no-repeat left top;text-indent:-999px;overflow:hidden;cursor:pointer;}
.logo:hover{opacity:.8;filter:alpha(opacity=80);}
.banner-main{width:100%;height:565px;background:url(../images/ban.png) no-repeat center 90px;position:relative;overflow:hidden;}
.nav{width:100%;height:54px;line-height:54px;text-align:right;}
.nav a{display:inline-block;height:54px;line-height:54px;padding:0 15px;font-size:16px;color:#fff;-webkit-transition:background .6s;-moz-transition:background .6s;-ms-transition:background .6s;transition:background .6s;}
.nav a:hover{background:#ff8a00;color:#fff;}
.top-wrap h1{display:none;}
.content,.bus_light{position:absolute;z-index:22;}
.bus_light{width:700px;height:500px;z-index:23;top:0px;left:50%;margin-left:-656px;}
.content{width:454px;left:50%;top:175px;z-index:33;}
.title{display:block;padding-bottom:29px;opacity:.8;filter:alpha(opacity=80)}
.download{display:block;width:264px;height:58px;background:url(../images/back.png) no-repeat left top;}
.bus,.bus-sub-title,.bus-title,.sign-btn,.yuna,.yunb{position:absolute;z-index:12;left:50%;top:50%;}
.yuna{width:136px;height:49px;top:15px;margin-left:-380px;}
.yunb{width:136px;height:49px;top:82px;margin-left:360px;}
.yuna{animation-name:yunAnia;-webkit-animation:yunAnia 4s alternate infinite;-moz-animation:yunAnia 4s alternate infinite;animation:yunAnia 4s alternate infinite;}
@-webkit-keyframes yunAnia{from{-webkit-transform:translateX(60px)}
to{-webkit-transform:translateX(0px)}
}
@-moz-keyframes yunAnia{from{-moz-transform:translateX(-60px)}
to{-moz-transform:translateX(0px)}
}
@keyframes yunAnia{from{transform:translateX(-60px)}
to{transform:translateX(0px)}
}
.yunb{animation-name:yunAnib;-webkit-animation:yunAnib 3s alternate infinite;-moz-animation:yunAnib 3s alternate infinite;animation:yunAnib 3s alternate infinite;}
@-webkit-keyframes yunAnib{from{-webkit-transform:translateX(40px)}
to{-webkit-transform:translateX(0px)}
}
@-moz-keyframes yunAnib{from{-moz-transform:translateX(40px)}
to{-moz-transform:translateX(0px)}
}
@keyframes yunAnib{from{transform:translateX(40px)}
to{transform:translateX(0px)}
}
.bus{display:block;width:504px;height:309px;margin:75px 0 0 -520px;animation-name:busAnia;-webkit-animation:busAnia 1s cubic-bezier(0,1.19,.99,.99) 0s normal none;-moz-animation:busAnia 1s cubic-bezier(0,1.19,.99,.99) 0s normal none;-ms-animation:busAnia 1s cubic-bezier(0,1.19,.99,.99) 0s normal none;}
@-webkit-keyframes busAnia{from{left:-40%;}
to{left:50%;}
}
@-moz-keyframes busAnia{from{left:-40%;}
to{left:50%;}
}
@keyframes busAnia{from{left:-40%;}
to{left:50%;}
}
.bus-sub-title{width:340px;height:68px;margin:80px 0 0 0px;animation-name:subTitle;-webkit-animation:subTitle 1s cubic-bezier(0,1.19,.99,.99) 0s normal none;-moz-animation:subTitle 1s cubic-bezier(0,1.19,.99,.99) 0s normal none;-ms-animation:subTitle 1s cubic-bezier(0,1.19,.99,.99) 0s normal none;}
@-webkit-keyframes subTitle{from{left:90%;}
to{left:50%;}
}
@-moz-keyframes subTitle{from{left:90%;}
to{left:50%;}
}
@keyframes subTitle{from{left:90%;}
to{left:50%;}
}
.bus-title{display:block;width:691px;height:132px;z-index:1;top:224px;left:50%;margin-left:-346px;animation-name:bustitle;-webkit-animation:bustitle 0.6s linear 0s normal none;-moz-animation:bustitle 0.6s linear 0s normal none;animation:bustitle 0.6s linear 0s normal none;}
@-webkit-keyframes bustitle{from{opacity:0;-webkit-transform:scale(0,0);}
to{opacity:1;-webkit-transform:scale(1,1);}
}
@-moz-keyframes bustitle{from{opacity:0;-moz-transform:scale(0,0);}
to{opacity:1;-moz-transform:scale(1,1);}
}
@keyframes bustitle{from{opacity:0;transform:scale(0,0);}
to{opacity:1;transform:scale(1,1);}
}
.sign-btn{display:block;top:447px;left:50%;width:182px;height:56px;line-height:50px;margin-left:138px;background:url(../images/btn-1.png) no-repeat left top;font-size:24px;color:#fff;text-align:center;}
分享到QQ
分享到微博
微信扫一扫
