以下是 jquery圆盘抽奖特效代码 的示例演示效果:
部分效果截图1:
部分效果截图2:
HTML代码(index.html):
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery圆盘抽奖特效代码</title>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/common.css" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jqueryui.js"></script>
<link rel="stylesheet" type="text/css" href="css/jqueryui/jqueryui.css" />
<style>
body {
background:url('img/turnplate/bg_01.jpg') top center no-repeat #fff;
font:Arial,Helvetica,sans-serif;
}
#header {
width:960px;
margin:0 auto;
position:relative;
}
#turnplatewrapper {
height:592px;
width:592px;
background:url('img/turnplate/plate_06.png') top left no-repeat;
/*_background:url('img/turnplate/plate_06_8.png') top left no-repeat;*/
left:200px;
top:20px;
position:absolute;
-moz-user-select:none;
user-select:none;
}
#turnplate {
height:592px;
width:592px;
background:url('img/turnplate/plate_05.png') top left no-repeat;
/*_background:url('img/turnplate/plate_05_8.png') top left no-repeat;*/
}
#turnplate #awards {
position:absolute;
width:100%;
height:100%;
background:url('img/turnplate/plate_03.png') top left no-repeat;
/*_background:url('img/turnplate/plate_03_8.png') top left no-repeat;*/
}
#platebtn {
position:absolute;
top:218px;
left:218px;
background:url('img/turnplate/plate_04.png') top left no-repeat;
/*_background:url('img/turnplate/plate_04_8.png') top left no-repeat;*/
height:155px;
width:155px;
cursor:pointer;
}
#platebtn.hover {
background-position:0 -155px
}
#turnplate #platebtn.click {
background-position:0 -310px
}
#gift {
width:398px;
height:89px;
background:url('img/turnplate/plate_gift_01.png') top left no-repeat;
/*_background:url('img/turnplate/plate_gift_01_8.png') top left no-repeat;*/
position:absolute;
left:90px;
top:720px;
}
#msg {
position:absolute;
display:none;
top:130px;
left:195px;
border-radius:5px;
color:#333;
border:3px solid #FED33f;
box-shadow:2px 2px 2px rgba(0,0,0,0.6);
background:#fffcf2;
width:200px;
padding:10px;
text-align:center;
}
#content {
width:960px;
margin:0 auto;
}
#init {
position:absolute;
top:50%;
left:50%;
width:100px;
height:30px;
border-radius:5px;
color:#333;
border:3px solid #FED33f;
box-shadow:2px 2px 2px rgba(0,0,0,0.6);
background:#fffcf2;
width:250px;
padding:10px;
margin-top:-30px;
margin-left:-138px;
text-align:center;
opacity:0.9;
filter:alpha(opacity=90);
}
#login {
margin-left:20px;
}
#login .tips {
margin-left:50px;
font-size:12px;
margin-bottom:-5px;
}
#login .tips a {
color:#039;
font-size:16px;
text-decoration:underline;
}
#login .tips a:hover {
}
#login .msg {
color:red;
}
#login label {
height:30px;
line-height:30px;
font-size:16px;
}
#login .ipt {
background:#fff;
border:1px solid #ccc;
height:28px;
line-height:28px;
margin-bottom:10px;
box-shadow:0 1px 0 #fff;
border-radius:2px;
width:200px;
}
#login .ipt:focus {
box-shadow:0 0 3px rgba(86,180,289,0.3);
border:1px solid #56b4ef;
}
#lotteryMsg {
}
#lotteryMsg .msg {
font-size:16px;
color:red;
font-weight:bold;
text-align:center;
font-size:26px;
color:#ba0f54;
line-height:1;
margin-bottom:10px;
}
#lotteryMsg .tips {
text-align:center;
font-size:14px;
}
#lotteryMsg .sp {
border-top:1px solid #c3c3c3;
border-bottom:0 none transparent;
border-right:0 none transparent;
border-left:0 none transparent;
overflow:hidden;
height:0;
margin:10px 0;
}
#lotteryMsg a {
color:#138cbe;
}
#lotteryMsg a:hover {
color:#039;
}
#lotteryMsg .content {
border:1px solid #ccc;
border-radius:5px;
padding:10px;
background:#fff;
line-height:1.5;
}
#top-menu-wrapper {
height:51px;
background:url('img/turnplate/bg_02.png') top center repeat-x;
margin-bottom:-51px;
}
#top-menu {
width:960px;
margin:0 auto;
}
#top-menu a, #top-menu span {
line-height:50px;
display:inline-block;
font-size:16px;
color:#fff;
text-decoration:1px 1px 2px rgba(0, 0, 0, 0.3);
}
#top-menu .user {
padding-left:30px;
display:inline-block;
height:50px;
color:#fff;
background:url('img/turnplate/bg_03.png') 0 16px no-repeat;
}
</style>
<style>
/*jquery ui 定制 */
body .ui-dialog {
padding:0px;
background:#ebeae3;
box-shadow:2px 2px 5px rgba(0,0,0,0.5);
}
body .ui-dialog .ui-dialog-titlebar {
height:23px;
padding:0;
margin:0;
background:none;
border:0 none transparent;
}
body .ui-dialog .ui-dialog-titlebar .ui-dialog-title {
display:none;
}
body .ui-widget-content {
border:4px solid #F7D102;
}
body .ui-dialog .ui-dialog-titlebar-close {
background:#f6d20d;
right:0;
margin-top:-12px;
}
body .ui-dialog .ui-dialog-buttonpane {
border:0 none transparent;
}
body .ui-dialog .ui-button-text {
padding:0.8em 1em;
}
body .ui-widget-overlay {
background:url('img/turnplate/bg_04.png');
_filter:alpha(opacity=60);
}
.mv5 {
margin-left:5px;
margin-right:5px;
}
</style>
</head>
<div id="top-menu-wrapper" class="dn bgfix">
<div id="top-menu">
<div class="l"><a class="user bgfix" href="#"> </a> <span>（今天还有</span><span class="lottery-times">0</span><span>次抽奖机会）</span></div><a class="logout r" href="#">退出</a>
</div>
</div>
<div id="header">
<div id="turnplatewrapper" onselectstart="return false;" class="bgfix">
<div id="turnplate" class="bgfix">
<div id="awards" class="bgfix">
</div>
<div id="platebtn" class="bgfix">
</div>
<p id="msg">
</p>
<p id="init" class="dn">
初始化中，请稍后<span></span>
</p>
</div>
</div>
<div id="gift" class="bgfix">
</div>
</div>
<div id="content">
</div>
<div id="lotteryMsg" class="dn">
<p class="msg"></p>
<p class="tips">中奖空间已自动添加到您的快盘帐号中，<a href="#" target="_blank">点击查看</a>。</p>
<hr class="sp" />
<p class="mv5" style="margin-bottom:5px">发送以下内容到新浪微博，还可额外获得5M永久空间哦！</p>
<div class="content mv5">
“幸运大转盘，快盘送空间” <span class="option"></span>每日大转盘摇奖，轻松扩容，惊喜不断，抢100G永久空间点击->#/ 同步网盘领军产品，4500万用户的选择，值得信赖。
</div>
</div>
<!--新登录注册弹框-->
<div id="new-login" class="dn">
</div>
<body>
<!--
<script src="js/DD_belatedPNG_0.0.8a-min.js"></script>
<script>
DD_belatedPNG.fix('.bgfix');
</script>
-->
<!---->
<script>
//新登录
$('#new-login').dialog({
modal: true,
width:400,
heigth:220,
resizable: false,
autoOpen: false,
title: '请先登录'
});
</script>
<script>
var isLogin = false;
</script>
<script>
var turnplate = {
turnplateBox : $('#turnplate'),
turnplateBtn : $('#platebtn'),
lightDom : $('#turnplatewrapper'),
freshLotteryUrl : 'http://huodong.kuaipan.cn/ajaxTurnplate/freshLottery/',
msgBox : $('#msg'),
lotteryUrl : 'http://huodong.kuaipan.cn/ajaxTurnplate/lottery/',
height : '592', //帧高度
lightSwitch : 0, //闪灯切换开关. 0 和 1间切换
minResistance : 5, //基本阻力
Cx : 0.01, //阻力系数 阻力公式： totalResistance = minResistance + curSpeed * Cx;
accSpeed : 15, //加速度
accFrameLen : 40, //加速度持续帧数
maxSpeed : 250, //最大速度
minSpeed : 20, //最小速度
frameLen : 10, //帧总数
totalFrame : 0, //累计帧数,每切换一帧次数加1
curFrame : 0, //当前帧
curSpeed : 20, //上帧的速度
lotteryTime : 0, //抽奖次数
lotteryIndex : 6, //奖品index
errorIndex : 6, //异常时的奖品指针
initBoxEle : $('#turnplate #init'),
progressEle : $('#turnplate #init span'),
initProgressContent : '~~~^_^~~~', //初始化进度条的内容
initFreshInterval : 500, //进度条刷新间隔
virtualDistance : 10000, //虚拟路程,固定值，速度越快，切换到下帧的时间越快: 切换到下帧的时间 = virtualDistance/curSpeed
isStop : false, //抽奖锁,为true时，才允许下一轮抽奖
timer2 : undefined, //计时器
initTime : undefined,
showMsgTime : 2000, //消息显示时间
lotteryChannel: '',
channelList: {
'login': '每日登录',
'consume': '购买空间'
},
lotteryType : {
'5M' : 0,
'80M' : 1,
'1G' : 2,
'200M' : 3,
'100M' : 4,
'20M' : 5,
'empty' : 6,
'10G' : 7,
'50M' : 8,
'1T' : 9
},
lotteryList : [
'5M 永久空间',
'80M 永久空间',
'1G 永久空间',
'200M 永久空间',
'100M 永久空间',
'20M 永久空间',
'继续攒人品',
'10G 永久空间',
'50M 永久空间',
'1T 永久空间',
],
lotteryDes : [
'手气一般般，幸运指数半颗星！',
'手气不错呢，幸运指数3颗星！',
'手气无敌了，幸运指数4颗星！',
'手气很好呢，幸运指数3颗星！',
'手气很好呢，幸运指数3颗星！',
'手气还凑合，幸运指数1颗星！',
'手气太差了，幸运指数0颗星！',
'手气太好了，幸运指数5颗星！',
'手气还可以，幸运指数2颗星！',
'手气爆棚了，幸运指数5颗星！'
],
//初始化
init : function() {
this.initAnimate()
this.freshLottery();
this.turnplateBtn.click($.proxy(function(){
this.click();
},this));
},
//初始化动画
initAnimate : function() {
this.initBoxEle.show();
clearTimeout(this.initTimer);
var curLength = this.progressEle.text().length,
totalLength = this.initProgressContent.length;
if (curLength < totalLength) {
this.progressEle.text(this.initProgressContent.slice(0, curLength + 1));
}else{
this.progressEle.text('');
}
this.initTimer = setTimeout($.proxy(this.initAnimate, this), this.initFreshInterval);
},
//停止初始化动画
stopInitAnimate : function() {
clearTimeout(this.initTimer);
this.initBoxEle.hide();
},
freshLotteryTime : function() {
$('#top-menu').find('.lottery-times').html(this.lotteryTime);
},
//更新抽奖次数
freshLottery : function() {
this.stopInitAnimate();
this.setBtnHover();
this.isStop = true;
this.lotteryTime = 1;
this.freshLotteryTime();
},
//设置按钮三态
setBtnHover : function() {
//按钮三态
$('#platebtn').hover(function(){
$(this).addClass('hover');
},function() {
$(this).removeClass('hover click');
}).mousedown(function(){
$(this).addClass('click');
}).mouseup(function(){
$(this).removeClass('click');
});
},
//获取奖品
lottery : function() {
this.lotteryIndex = undefined;
this.lotteryTime--;
this.freshLotteryTime();
this.totalFrame = 0;
this.curSpeed = this.minSpeed;
this.turnAround();
this.lotteryIndex = typeof this.lotteryType[2] !== 'undefined' ? this.lotteryType[2] : this.errorIndex;
this.lotteryChannel = typeof this.channelList[1] !== 'undefined' ? this.channelList[1] : '';
},
//点击抽奖
click : function() {
//加锁时
if(this.isStop == false) {
this.showMsg('现在还不能抽奖哦');
return;
}
this.lottery();
},
//更新当前速度
freshSpeed : function() {
var totalResistance = this.minResistance + this.curSpeed * this.Cx;
var accSpeed = this.accSpeed;
var curSpeed = this.curSpeed;
if(this.totalFrame >= this.accFrameLen) {
accSpeed = 0;
}
curSpeed = curSpeed - totalResistance + accSpeed;
if(curSpeed < this.minSpeed){
curSpeed = this.minSpeed;
}else if(curSpeed > this.maxSpeed){
curSpeed = this.maxSpeed;
}
this.curSpeed = curSpeed;
},
//闪灯,切换到下一张时调用
switchLight : function() {
this.lightSwitch = this.lightSwitch === 0 ? 1 : 0;
var lightHeight = -this.lightSwitch * this.height;
this.lightDom.css('backgroundPosition','0 ' + lightHeight.toString() + 'px');
},
//旋转,trunAround,changeNext循环调用
turnAround : function() {
//加锁
this.isStop = false;
var intervalTime = parseInt(this.virtualDistance/this.curSpeed);
this.timer = window.setTimeout('turnplate.changeNext()', intervalTime);
},
//弹出奖品
showAwards : function(){
$('#lotteryMsg').dialog('open');
},
//显示提示信息
showMsg : function(msg, isFresh) {
isFresh = typeof isFresh == 'undefined' ? false : true;
if(typeof msg != 'string'){
msg = '今天已经抽过奖了，明天再来吧';
}
var msgBox = this.msgBox;
var display = msgBox.css('display');
msgBox.html(msg);
window.clearTimeout(this.timer2);
msgBox.stop(true,true).show();
var fadeOut = $.proxy(function() {
this.msgBox.fadeOut('slow');
}, this);
this.timer2 = window.setTimeout(fadeOut, this.showMsgTime);
},
//切换到下帧
changeNext : function() {
//判断是否应该停止
if(this.lotteryIndex !== undefined && this.curFrame == this.lotteryIndex && this.curSpeed <= this.minSpeed+10 && this.totalFrame > this.accFrameLen) {
this.isStop = true;
this.showAwards();
return;
}
var nextFrame = this.curFrame+1 < this.frameLen ? this.curFrame+1 : 0;
var bgTop = - nextFrame * this.height;
this.turnplateBox.css('backgroundPosition','0 ' + bgTop.toString() + 'px');
this.switchLight();
this.curFrame = nextFrame;
this.totalFrame ++;
this.freshSpeed();
this.turnAround();
}
}
</script>
<script>
//登录插件
(function($){
$.fn.login = function(options){
settings = {
loginUrl: 'account/login/',
msgEle: $(this).find('.msg'),
loginIdEle: $(this).find('#loginId'),
passwordEle: $(this).find('#password')
};
var ERROR_MSG = {
'inputCorrectEmail': '请输入正确的用户名',
'inputPassword': '请填写登录密码',
'passwordLength': '密码应在6-32位字符内',
'noreg': '此账号未注册',
'checkemailcode_2':'此账号未注册',
'checkemailcode_':'服务器繁忙，请稍后再试',
'accountNotMatch': '账号密码不匹配',
'serverdown': '服务器维护中',
'clientUserBaned': '您的账号被限制登录',
'accUserInvalid': '正在对该账号进行绑定处理，暂无法登陆',
'userLocked': '帐号锁定中，暂时无法登录',
'inviladId': '帐号不存在'
}
function submit() {
var loginId = $.trim(settings.loginIdEle.val()),
password = $.trim(settings.passwordEle.val());
if(loginId == '') {
showMsg('登录名不能为空');
return;
}
if(password == '') {
showMsg('密码不能为空');
return;
}
$.post(settings.loginUrl, {'loginId': loginId, 'password': password}, function(data){
if(data.status == 'ok') {
location.reload();
} else {
if(typeof ERROR_MSG[data.status] == 'string') {
showMsg(ERROR_MSG[data.status]);
} else {
showMsg('服务器维护中');
}
}
}, 'json');
}
function showMsg(msg) {
settings.msgEle.html(msg);
}
if(typeof options == 'string'){
switch(options) {
case 'submit':
submit();
break;
default:
}
}
return $(this);
}
})(jQuery);
$('#lotteryMsg').dialog({
modal: true,
width: 500,
height: 350,
resizable: false,
title: '获奖信息',
autoOpen: false,
open: function(){
var showMsg = '您抽中了： ' + turnplate.lotteryList[turnplate.lotteryIndex] /*+ ' (来自:' + turnplate.lotteryChannel + ')'*/;
var options = '今天抽中了' + turnplate.lotteryList[turnplate.lotteryIndex] + '，' + turnplate.lotteryDes[turnplate.lotteryIndex];
$('#lotteryMsg').find('.msg').html(showMsg);
$('#lotteryMsg').find('.option').html(options);
},
buttons: [{
text:'发微博领5M空间',
click: function() {
var options = '今天抽中了' + turnplate.lotteryList[turnplate.lotteryIndex] + '，' + turnplate.lotteryDes[turnplate.lotteryIndex];
var jumpUrl = "#";
window.open(jumpUrl, "top", "width=1024,height=750,menubar=0,scrollbars=1, resizable=1,status=1,titlebar=0,toolbar=0,location=1");
$(this).dialog('close');
}
}]
});
$('#login').dialog({
modal: true,
width: 350,
resizable: false,
title: '请先登录',
autoOpen: false,
open: function(){
//监听回车事件
$('#login').bind('keydown', function(e){
if(e.which == '13'){
$('#login').login('submit');
}
});
},
close: function(){
//取消监听
$('#login').unbind('keydown');
$('#login #password').val('');
},
buttons:[{
text: '登录',
click: function(){
$('#login').login('submit');
}
}]
});
turnplate.init();
</script>
</body>
</html>JS代码(DD_belatedPNG_0.0.8a-min.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**/
var DD_belatedPNG={
ns:"DD_belatedPNG",imgSize:{
}
,delay:10,nodesFixed:0,createVmlNameSpace:function(){
if(document.namespaces&&!document.namespaces[this.ns]){
document.namespaces.add(this.ns,"urn:schemas-microsoft-com:vml")}
}
,createVmlStyleSheet:function(){
var b,a;
b=document.createElement("style");
b.setAttribute("media","screen");
document.documentElement.firstChild.insertBefore(b,document.documentElement.firstChild.firstChild);
if(b.styleSheet){
b=b.styleSheet;
b.addRule(this.ns+"\\:*","{
behavior:url(#default#VML)}
");
b.addRule(this.ns+"\\:shape","position:absolute;
");
b.addRule("img."+this.ns+"_sizeFinder","behavior:none;
border:none;
position:absolute;
z-index:-1;
top:-10000px;
visibility:hidden;
");
this.screenStyleSheet=b;
a=document.createElement("style");
a.setAttribute("media","print");
document.documentElement.firstChild.insertBefore(a,document.documentElement.firstChild.firstChild);
a=a.styleSheet;
a.addRule(this.ns+"\\:*","{
display:none !important;
}
");
a.addRule("img."+this.ns+"_sizeFinder","{
display:none !important;
}
")}
}
,readPropertyChange:function(){
var b,c,a;
b=event.srcElement;
if(!b.vmlInitiated){
return}
if(event.propertyName.search("background")!=-1||event.propertyName.search("border")!=-1){
DD_belatedPNG.applyVML(b)}
if(event.propertyName=="style.display"){
c=(b.currentStyle.display=="none")?"none":"block";
for(a in b.vml){
if(b.vml.hasOwnProperty(a)){
b.vml[a].shape.style.display=c}
}
}
if(event.propertyName.search("filter")!=-1){
DD_belatedPNG.vmlOpacity(b)}
}
,vmlOpacity:function(b){
if(b.currentStyle.filter.search("lpha")!=-1){
var a=b.currentStyle.filter;
a=parseInt(a.substring(a.lastIndexOf("=")+1,a.lastIndexOf(")")),10)/100;
b.vml.color.shape.style.filter=b.currentStyle.filter;
b.vml.image.fill.opacity=a}
}
,handlePseudoHover:function(a){
setTimeout(function(){
DD_belatedPNG.applyVML(a)}
,1)}
,fix:function(a){
if(this.screenStyleSheet){
var c,b;
c=a.split(",");
for(b=0;
b<c.length;
b++){
this.screenStyleSheet.addRule(c[b],"behavior:expression(DD_belatedPNG.fixPng(this))")}
}
}
,applyVML:function(a){
a.runtimeStyle.cssText="";
this.vmlFill(a);
this.vmlOffsets(a);
this.vmlOpacity(a);
if(a.isImg){
this.copyImageBorders(a)}
}
,attachHandlers:function(i){
var d,c,g,e,b,f;
d=this;
c={
resize:"vmlOffsets",move:"vmlOffsets"}
;
if(i.nodeName=="A"){
e={
mouseleave:"handlePseudoHover",mouseenter:"handlePseudoHover",focus:"handlePseudoHover",blur:"handlePseudoHover"}
;
for(b in e){
if(e.hasOwnProperty(b)){
c[b]=e[b]}
}
}
for(f in c){
if(c.hasOwnProperty(f)){
g=function(){
d[c[f]](i)}
;
i.attachEvent("on"+f,g)}
}
i.attachEvent("onpropertychange",this.readPropertyChange)}
,giveLayout:function(a){
a.style.zoom=1;
if(a.currentStyle.position=="static"){
a.style.position="relative"}
}
,copyImageBorders:function(b){
var c,a;
c={
borderStyle:true,borderWidth:true,borderColor:true}
;
for(a in c){
if(c.hasOwnProperty(a)){
b.vml.color.shape.style[a]=b.currentStyle[a]}
}
}
,vmlFill:function(e){
if(!e.currentStyle){
return}
else{
var d,f,g,b,a,c;
d=e.currentStyle}
for(b in e.vml){
if(e.vml.hasOwnProperty(b)){
e.vml[b].shape.style.zIndex=d.zIndex}
}
e.runtimeStyle.backgroundColor="";
e.runtimeStyle.backgroundImage="";
f=true;
if(d.backgroundImage!="none"||e.isImg){
if(!e.isImg){
e.vmlBg=d.backgroundImage;
e.vmlBg=e.vmlBg.substr(5,e.vmlBg.lastIndexOf('")')-5)}
else{
e.vmlBg=e.src}
g=this;
if(!g.imgSize[e.vmlBg]){
a=document.createElement("img");
g.imgSize[e.vmlBg]=a;
a.className=g.ns+"_sizeFinder";
a.runtimeStyle.cssText="behavior:none;
position:absolute;
left:-10000px;
top:-10000px;
border:none;
margin:0;
padding:0;
";
c=function(){
this.width=this.offsetWidth;
this.height=this.offsetHeight;
g.vmlOffsets(e)}
;
a.attachEvent("onload",c);
a.src=e.vmlBg;
a.removeAttribute("width");
a.removeAttribute("height");
document.body.insertBefore(a,document.body.firstChild)}
e.vml.image.fill.src=e.vmlBg;
f=false}
e.vml.image.fill.on=!f;
e.vml.image.fill.color="none";
e.vml.color.shape.style.backgroundColor=d.backgroundColor;
e.runtimeStyle.backgroundImage="none";
e.runtimeStyle.backgroundColor="transparent"}
,vmlOffsets:function(d){
var h,n,a,e,g,m,f,l,j,i,k;
h=d.currentStyle;
n={
W:d.clientWidth+1,H:d.clientHeight+1,w:this.imgSize[d.vmlBg].width,h:this.imgSize[d.vmlBg].height,L:d.offsetLeft,T:d.offsetTop,bLW:d.clientLeft,bTW:d.clientTop}
;
a=(n.L+n.bLW==1)?1:0;
e=function(b,p,q,c,s,u){
b.coordsize=c+","+s;
b.coordorigin=u+","+u;
b.path="m0,0l"+c+",0l"+c+","+s+"l0,"+s+" xe";
b.style.width=c+"px";
b.style.height=s+"px";
b.style.left=p+"px";
b.style.top=q+"px"}
;
e(d.vml.color.shape,(n.L+(d.isImg?0:n.bLW)),(n.T+(d.isImg?0:n.bTW)),(n.W-1),(n.H-1),0);
e(d.vml.image.shape,(n.L+n.bLW),(n.T+n.bTW),(n.W),(n.H),1);
g={
X:0,Y:0}
;
if(d.isImg){
g.X=parseInt(h.paddingLeft,10)+1;
g.Y=parseInt(h.paddingTop,10)+1}
else{
for(j in g){
if(g.hasOwnProperty(j)){
this.figurePercentage(g,n,j,h["backgroundPosition"+j])}
}
}
d.vml.image.fill.position=(g.X/n.W)+","+(g.Y/n.H);
m=h.backgroundRepeat;
f={
T:1,R:n.W+a,B:n.H,L:1+a}
;
l={
X:{
b1:"L",b2:"R",d:"W"}
,Y:{
b1:"T",b2:"B",d:"H"}
}
;
if(m!="repeat"||d.isImg){
i={
T:(g.Y),R:(g.X+n.w),B:(g.Y+n.h),L:(g.X)}
;
if(m.search("repeat-")!=-1){
k=m.split("repeat-")[1].toUpperCase();
i[l[k].b1]=1;
i[l[k].b2]=n[l[k].d]}
if(i.B>n.H){
i.B=n.H}
d.vml.image.shape.style.clip="rect("+i.T+"px "+(i.R+a)+"px "+i.B+"px "+(i.L+a)+"px)"}
else{
d.vml.image.shape.style.clip="rect("+f.T+"px "+f.R+"px "+f.B+"px "+f.L+"px)"}
}
,figurePercentage:function(d,c,f,a){
var b,e;
e=true;
b=(f=="X");
switch(a){
case"left":case"top":d[f]=0;
break;
case"center":d[f]=0.5;
break;
case"right":case"bottom":d[f]=1;
break;
default:if(a.search("%")!=-1){
d[f]=parseInt(a,10)/100}
else{
e=false}
}
d[f]=Math.ceil(e?((c[b?"W":"H"]*d[f])-(c[b?"w":"h"]*d[f])):parseInt(a,10));
if(d[f]%2===0){
d[f]++}
return d[f]}
,fixPng:function(c){
c.style.behavior="none";
var g,b,f,a,d;
if(c.nodeName=="BODY"||c.nodeName=="TD"||c.nodeName=="TR"){
return}
c.isImg=false;
if(c.nodeName=="IMG"){
if(c.src.toLowerCase().search(/\.png$/)!=-1){
c.isImg=true;
c.style.visibility="hidden"}
else{
return}
}
else{
if(c.currentStyle.backgroundImage.toLowerCase().search(".png")==-1){
return}
}
g=DD_belatedPNG;
c.vml={
color:{
}
,image:{
}
}
;
b={
shape:{
}
,fill:{
}
}
;
for(a in c.vml){
if(c.vml.hasOwnProperty(a)){
for(d in b){
if(b.hasOwnProperty(d)){
f=g.ns+":"+d;
c.vml[a][d]=document.createElement(f)}
}
c.vml[a].shape.stroked=false;
c.vml[a].shape.appendChild(c.vml[a].fill);
c.parentNode.insertBefore(c.vml[a].shape,c)}
}
c.vml.image.shape.fillcolor="none";
c.vml.image.fill.type="tile";
c.vml.color.fill.on=false;
g.attachHandlers(c);
g.giveLayout(c);
g.giveLayout(c.offsetParent);
c.vmlInitiated=true;
g.applyVML(c)}
}
;
try{
document.execCommand("BackgroundImageCache",false,true)}
catch(r){
}
DD_belatedPNG.createVmlNameSpace();
DD_belatedPNG.createVmlStyleSheet();
DD_belatedPNG.fix('.account-l,.account-r,.btn,.account-bar,.btn-dlk-fe,.account-bm,.btn-login,.btn-regsiter,.btn-next-step,.btn-finished,.btn-modify,.account-splite,.download-kp-green,.erro-info,.ico-tips,.account-wrapper,.zone-bm-bg,.zone-wrapper,.outlink-top,.outlink-btn,.outlink-nav li,.outlink-bg-t,.outlink-bg-b,.outlink-features,.outlink-wrapper,.checkin,.wrapper,.backup');
CSS代码(common.css):
@charset "utf-8";/*常用样式*/
body,h1,h2,h3,ul,p,form,input,dl,dt,dd,header,section,article,nav{margin:0;}
body{font:12px/24px Tahoma,'Microsoft Yahei','Simsun';}
header,section,article,nav{display:block;}
img{border:0 none;}
a{text-decoration:none;color:#444}
a:focus{outline:none;}
.underline,.hoverlink:hover{text-decoration:underline;}
.underline:hover{text-decoration:none;}
ul,ol,form,dt,dd,dl,header,section,article,nav{padding:0;}
ul{list-style:none;}
table{border-collapse:collapse;width:100%;border:0 none;border-spacing:0;}
em{font-style:normal;}
strong{font-weight:bold;}
.dn{display:none;}
.db{display:block;}
.dib{display:inline-block;}
.l,.fl-li li{float:left;}
.fl-li li{margin-right:5px;}
.r{float:right;}
.b{font-weight:bold;}
.n{font-weight:normal;}
.ti{text-indent:-9999px;overflow:hidden;}
.ti28{text-indent:28px;}
.tl{text-align:left;}
.tc{text-align:center;}
.tr{text-align:right;}
.f0{font-size:0;line-height:0;}
.f12{font-size:12px;}
.f14,input,select{font-size:14px;}
.f16{font-size:16px;}
.f18{font-size:18px;}
.f22{font-size:22px;}
.f32{font-size:32px;}
.fm{font-family:microsoft yahei;}
.lh32{line-height:32px;}
.lh20{line-height:20px;}
.lh18{line-height:18px;}
.red{color:#ff4340;}
.white{color:#fff;}
.green{color:#029a47;}
.blue{color:#278ff5;}
.orange{color:#e45c27;}
.gray{color:#666;}
.lgray{color:#b2b2b2;}
/*light-gray*/
.black{color:#000;}
.bd0{border:0 none !important;}
.mb0{margin-bottom:0 !important;}
.mb5{margin-bottom:5px;}
.mb10{margin-bottom:10px;}
.mb20{margin-bottom:20px;}
.mb30{margin-bottom:30px;}
.mb40{margin-bottom:40px;}
.mtf5{margin-top:-5px;}
.mt5{margin-top:5px;}
.mt10{margin-top:10px;}
.mt30{margin-top:30px;}
.ml5{margin-left:5px;}
.ml20{margin-left:20px;}
.mr3{margin-right:3px;}
.mr10{margin-right:10px;}
.mr15{margin-right:15px;}
.mr20{margin-right:20px;}
.p5{padding:5px;}
.p10{padding:10px;}
.plr5{padding-left:5px;padding-right:5px;}
.pl0{padding-left:0 !important;}
.p20{padding:20px;}
.pl10{padding-left:10px;}
.pl15{padding-left:15px;}
.pl100{padding-left:100px;}
.pt20{padding-top:20px;}
.pt30{padding-top:30px;}
.mid{margin-left:auto;margin-right:auto;}
.w960{width:960px;}
.rel{position:relative;}
.abs,.abs-tr,.abs-br,.abs-lt{position:absolute;}
.clearfix:after{content:"\200B";display:block;height:0;visibility:hidden;clear:both;font-size:0px;}
分享到QQ
分享到微博
微信扫一扫
