以下是 jq右下角按钮焦点图轮播滚动切换特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE HTML>
<html>
<head>
<meta hap-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jq右下角按钮焦点图</title>
<link href="style/css/goble.css" rel="stylesheet" type="text/css" />
</head>
<body>
<style>
/* qqshop focus */
#focus {width:980px; height:355px; overflow:hidden; position:relative;}
#focus ul {height:355px; position:absolute; bottom:0;}
#focus ul li {float:left; width:980px; height:355px; overflow:hidden; position:relative;}
#focus ul li div {position:absolute; overflow:hidden;}
#focus ul li p{ color:#FFF; font-size:12px; height:28px; line-height:28px; position:absolute; bottom:0; left:15px;}
#focus .btnBg {}
#focus .btn {position:absolute; bottom:5px; right:5px; z-index:10;}
#focus .btn span { background:#8C8C8C; width:62px; height:7px; cursor:pointer;display:block; float:left; margin-left:1px; text-indent:-100em; overflow:hidden;}
#focus .btn span.on,#focus .btn span:hover { background:url(style/images/shouye/xinBtnBg.png) -63px 0;}
#focus .preNext {width:45px; height:100px; position:absolute; top:90px; background:url(img/sprite.png) no-repeat 0 0; cursor:pointer; display:none;}
#focus .pre {left:0; display:none;}
#focus .next {right:0; background-position:right top; display:none;}
</style>
<br />
<br />
<div style="width:980px; height:355px; overflow:hidden; margin:40px auto;">
<div id="focus">
<ul>
<li><a href="#/" target="_blank"><img src="images/xinbanner00.jpg" width="980" height="355"></a>
<p> </p>
</li>
<li><a href="#" target="_blank"><img src="images/xinbanner01.jpg" width="980" height="355"></a>
<p> </p>
</li>
<li><a href="#" target="_blank"><img src="images/xinbanner02.jpg" width="980" height="355"></a>
<p></p>
</li>
<li><a href="#/" target="_blank"><img src="images/xinbanner01.jpg" width="980" height="355"></a>
<p></p>
</li>
<li><a href="#/" target="_blank"><img src="images/xinbanner01.jpg" width="980" height="355"></a>
<p></p>
</li>
</ul>
</div>
</div>
<script src="js/jquery.min.js" type="text/javascript"></script>
<!--[if IE 6]>
<script type="text/javascript" src="style/js/DD_belatedPNG_0.0.8a.js"></script>
<script type="text/javascript">DD_belatedPNG.fix('*');</script> <![endif]-->
<script type="text/javascript">
$(function() {
var sWidth = $("#focus").width(); //获取焦点图的宽度（显示面积）
var len = $("#focus ul li").length; //获取焦点图个数
var index = 0;
var picTimer;
//以下代码添加数字按钮和按钮后的半透明条，还有上一页、下一页两个按钮
var btn = "<div class='btnBg'></div><div class='btn'>";
for(var i=0; i < len; i++) {
btn += "<span></span>";
}
btn += "</div><div class='preNext pre'></div><div class='preNext next'></div>";
$("#focus").append(btn);
$("#focus .btnBg").css("opacity",0.5);
//为小按钮添加鼠标滑入事件，以显示相应的内容
$("#focus .btn span").css("opacity",0.4).mouseenter(function() {
index = $("#focus .btn span").index(this);
showPics(index);
}).eq(0).trigger("mouseenter");
//上一页、下一页按钮透明度处理
$("#focus .preNext").css("opacity",0.2).hover(function() {
$(this).stop(true,false).animate({"opacity":"0.5"},300);
},function() {
$(this).stop(true,false).animate({"opacity":"0.2"},300);
});
//上一页按钮
$("#focus .pre").click(function() {
index -= 1;
if(index == -1) {index = len - 1;}
showPics(index);
});
//下一页按钮
$("#focus .next").click(function() {
index += 1;
if(index == len) {index = 0;}
showPics(index);
});
//本例为左右滚动，即所有li元素都是在同一排向左浮动，所以这里需要计算出外围ul元素的宽度
$("#focus ul").css("width",sWidth * (len));
//鼠标滑上焦点图时停止自动播放，滑出时开始自动播放
$("#focus").hover(function() {
clearInterval(picTimer);
},function() {
picTimer = setInterval(function() {
showPics(index);
index++;
if(index == len) {index = 0;}
},4000); //此4000代表自动播放的间隔，单位：毫秒
}).trigger("mouseleave");
//显示图片函数，根据接收的index值显示相应的内容
function showPics(index) { //普通切换
var nowLeft = -index*sWidth; //根据index值计算ul元素的left值
$("#focus ul").stop(true,false).animate({"left":nowLeft},300); //通过animate()调整ul元素滚动到计算出的position
//$("#focus .btn span").removeClass("on").eq(index).addClass("on"); //为当前的按钮切换到选中的效果
$("#focus .btn span").stop(true,false).animate({"opacity":"0.4"},300).eq(index).stop(true,false).animate({"opacity":"1"},300); //为当前的按钮切换到选中的效果
}
});
</script>
</body>
</html>JS代码(DD_belatedPNG_0.0.8a.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�mi Pr�vost 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代码(index.js):
/******************************************************************************* jquery.mb.components Copyright (c) 2001-2010. Matteo Bicocchi (Pupunzi);
Open lab srl,Firenze - Italy email:mbicocchi@open-lab.com site:http://pupunzi.com Licences:MIT,GPL http://www.opensource.org/licenses/mit-license.php http://www.gnu.org/licenses/gpl.html ******************************************************************************/
// t:current time,b:begInnIng value,c:change In value,d:durationjQuery.easing['jswing'] = jQuery.easing['swing'];
jQuery.extend( jQuery.easing,{
def:'easeOutQuad',swing:function (x,t,b,c,d){
//alert(jQuery.easing.default);
return jQuery.easing[jQuery.easing.def](x,t,b,c,d);
}
,easeInQuad:function (x,t,b,c,d){
return c*(t/=d)*t + b;
}
,easeOutQuad:function (x,t,b,c,d){
return -c *(t/=d)*(t-2) + b;
}
,easeInOutQuad:function (x,t,b,c,d){
if ((t/=d/2) < 1) return c/2*t*t + b;
return -c/2 * ((--t)*(t-2) - 1) + b;
}
,easeInCubic:function (x,t,b,c,d){
return c*(t/=d)*t*t + b;
}
,easeOutCubic:function (x,t,b,c,d){
return c*((t=t/d-1)*t*t + 1) + b;
}
,easeInOutCubic:function (x,t,b,c,d){
if ((t/=d/2) < 1) return c/2*t*t*t + b;
return c/2*((t-=2)*t*t + 2) + b;
}
,easeInQuart:function (x,t,b,c,d){
return c*(t/=d)*t*t*t + b;
}
,easeOutQuart:function (x,t,b,c,d){
return -c * ((t=t/d-1)*t*t*t - 1) + b;
}
,easeInOutQuart:function (x,t,b,c,d){
if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
return -c/2 * ((t-=2)*t*t*t - 2) + b;
}
,easeInQuint:function (x,t,b,c,d){
return c*(t/=d)*t*t*t*t + b;
}
,easeOutQuint:function (x,t,b,c,d){
return c*((t=t/d-1)*t*t*t*t + 1) + b;
}
,easeInOutQuint:function (x,t,b,c,d){
if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
return c/2*((t-=2)*t*t*t*t + 2) + b;
}
,easeInSine:function (x,t,b,c,d){
return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
}
,easeOutSine:function (x,t,b,c,d){
return c * Math.sin(t/d * (Math.PI/2)) + b;
}
,easeInOutSine:function (x,t,b,c,d){
return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
}
,easeInExpo:function (x,t,b,c,d){
return (t==0) ? b:c * Math.pow(2,10 * (t/d - 1)) + b;
}
,easeOutExpo:function (x,t,b,c,d){
return (t==d) ? b+c:c * (-Math.pow(2,-10 * t/d) + 1) + b;
}
,easeInOutExpo:function (x,t,b,c,d){
if (t==0) return b;
if (t==d) return b+c;
if ((t/=d/2) < 1) return c/2 * Math.pow(2,10 * (t - 1)) + b;
return c/2 * (-Math.pow(2,-10 * --t) + 2) + b;
}
,easeInCirc:function (x,t,b,c,d){
return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
}
,easeOutCirc:function (x,t,b,c,d){
return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
}
,easeInOutCirc:function (x,t,b,c,d){
if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
}
,easeInElastic:function (x,t,b,c,d){
var s=1.70158;
var p=0;
var a=c;
if (t==0) return b;
if ((t/=d)==1) return b+c;
if (!p) p=d*.3;
if (a < Math.abs(c)){
a=c;
var s=p/4;
}
else var s = p/(2*Math.PI) * Math.asin (c/a);
return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
}
,easeOutElastic:function (x,t,b,c,d){
var s=1.70158;
var p=0;
var a=c;
if (t==0) return b;
if ((t/=d)==1) return b+c;
if (!p) p=d*.3;
if (a < Math.abs(c)){
a=c;
var s=p/4;
}
else var s = p/(2*Math.PI) * Math.asin (c/a);
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
}
,easeInOutElastic:function (x,t,b,c,d){
var s=1.70158;
var p=0;
var a=c;
if (t==0) return b;
if ((t/=d/2)==2) return b+c;
if (!p) p=d*(.3*1.5);
if (a < Math.abs(c)){
a=c;
var s=p/4;
}
else var s = p/(2*Math.PI) * Math.asin (c/a);
if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
}
,easeInBack:function (x,t,b,c,d,s){
if (s == undefined) s = 1.70158;
return c*(t/=d)*t*((s+1)*t - s) + b;
}
,easeOutBack:function (x,t,b,c,d,s){
if (s == undefined) s = 1.70158;
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
}
,easeInOutBack:function (x,t,b,c,d,s){
if (s == undefined) s = 1.70158;
if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
}
,easeInBounce:function (x,t,b,c,d){
return c - jQuery.easing.easeOutBounce (x,d-t,0,c,d) + b;
}
,easeOutBounce:function (x,t,b,c,d){
if ((t/=d) < (1/2.75)){
return c*(7.5625*t*t) + b;
}
else if (t < (2/2.75)){
return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
}
else if (t < (2.5/2.75)){
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
}
else{
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
}
}
,easeInOutBounce:function (x,t,b,c,d){
if (t < d/2) return jQuery.easing.easeInBounce (x,t*2,0,c,d) * .5 + b;
return jQuery.easing.easeOutBounce (x,t*2-d,0,c,d) * .5 + c*.5 + b;
}
}
);
/* * * TERMS OF USE - EASING EQUATIONS * * Open source under the BSD License. * * Copyright © 2001 Robert Penner * All rights reserved. * * Redistribution and use in source and binary forms,with or without modification,* are permitted provided that the following conditions are met:* * Redistributions of source code must retain the above copyright notice,this list of * conditions and the following disclaimer. * Redistributions in binary form must reproduce the above copyright notice,this list * of conditions and the following disclaimer in the documentation and/or other materials * provided with the distribution. * * Neither the name of the author nor the names of contributors may be used to endorse * or promote products derived from this software without specific prior written permission. * * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY * EXPRESS OR IMPLIED WARRANTIES,INCLUDING,BUT NOT LIMITED TO,THE IMPLIED WARRANTIES OF * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE * COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT,INDIRECT,INCIDENTAL,SPECIAL,* EXEMPLARY,OR CONSEQUENTIAL DAMAGES (INCLUDING,BUT NOT LIMITED TO,PROCUREMENT OF SUBSTITUTE * GOODS OR SERVICES;
LOSS OF USE,DATA,OR PROFITS;
OR BUSINESS INTERRUPTION) HOWEVER CAUSED * AND ON ANY THEORY OF LIABILITY,WHETHER IN CONTRACT,STRICT LIABILITY,OR TORT (INCLUDING * NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE,EVEN IF ADVISED * OF THE POSSIBILITY OF SUCH DAMAGE. * */
//下拉菜单延迟插件(function($){
$.fn.hoverDelay = function(options){
var defaults ={
hoverDuring:120,outDuring:120,hoverEvent:function(){
$.noop();
}
,outEvent:function(){
$.noop();
}
}
;
var sets = $.extend(defaults,options ||{
}
);
var hoverTimer,outTimer,that = this;
return $(this).each(function(){
$(this).hover(function(){
clearTimeout(outTimer);
hoverTimer = setTimeout(function(){
sets.hoverEvent.apply(that)}
,sets.hoverDuring);
}
,function(){
clearTimeout(hoverTimer);
outTimer = setTimeout(function(){
sets.outEvent.apply(that)}
,sets.outDuring);
}
);
}
);
}
}
)(jQuery);
/*滚动插件*/
(function($){
$.fn.extend({
slide:function(opt,callback){
//定义变量if(!opt) var opt={
}
;
var timerID;
var btnLeft = $("#"+ opt.left);
//向左按钮var btnRight = $("#"+ opt.right);
//向右按钮var _this=this.find("ul");
liW=opt.li_w//参数：每个li的宽度（包括border,margin,padding,都要算进去）li_size=opt.li_size ? parseInt(opt.li_size,10):parseInt(this.width()/liW,10) //每次滚动的个数，默认为一屏，即父容器宽度speed=opt.speed ? parseInt(opt.speed,10):500;
//滚动速度，数值越大，速度越慢（毫秒）timer=opt.timer //?parseInt(opt.timer,10):3000;
//滚动的时间间隔（毫秒）if(li_size==0){
li_size=1}
;
var leftW=0-li_size*liW;
//向左滚动函数function scrollLeft(){
btnLeft.unbind("click",scrollLeft);
//滑动时先取消点击滑动事件btnRight.unbind("click",scrollRight);
_this.animate({
marginLeft:leftW}
,speed,function(){
//参数"easeOutExpo"不需要可以删掉，需要的话必选先加载"easing.js"文件for(i=1;
i<=li_size;
i++){
_this.find("li:first").appendTo(_this);
}
_this.css({
'margin-left':0}
);
btnLeft.bind("click",scrollLeft);
//滑动结束后绑定按钮的点击事件btnRight.bind("click",scrollRight);
}
);
}
//向右滚动函数function scrollRight(){
btnLeft.unbind("click",scrollLeft);
btnRight.unbind("click",scrollRight);
for(i=1;
i<=li_size;
i++){
_this.find("li:last").prependTo(_this);
}
_this.css({
'margin-left':leftW}
);
_this.animate({
marginLeft:0}
,speed,function(){
btnLeft.bind("click",scrollLeft);
btnRight.bind("click",scrollRight);
}
);
}
//自动播放function autoPlay(){
if(timer)timerID = window.setInterval(scrollLeft,timer);
}
;
//停止自动播放function autoStop(){
if(timer)window.clearInterval(timerID);
}
;
//鼠标事件绑定_this.hover(autoStop,autoPlay).mouseout() //加载完成后自动开始btnLeft.click( scrollLeft ).hover(autoStop,autoPlay);
//向左鼠标事件绑定btnRight.click( scrollRight ).hover(autoStop,autoPlay);
//向右鼠标事件绑定}
}
)}
)(jQuery);
//幻灯片$(function(){
var sWidth = $("#focus").width();
//获取焦点图的宽度（显示面积）var len = $("#focus ul li").length;
//获取焦点图个数var index = 0;
var picTimer;
//以下代码添加数字按钮和按钮后的半透明条，还有上一页、下一页两个按钮var btn = "<div class='btnBg'></div><div class='btn'>";
for(var i=0;
i < len;
i++){
btn += "<span></span>";
}
btn += "</div><div class='preNext pre'></div><div class='preNext next'></div>";
$("#focus").append(btn);
$("#focus .btnBg").css("opacity",0.5);
//为小按钮添加鼠标滑入事件，以显示相应的内容$("#focus .btn span").click(function(){
index = $("#focus .btn span").index(this);
showPics(index);
}
).eq(0).trigger("click");
//上一页、下一页按钮透明度处理$("#focus .preNext").css("opacity",0.2).hover(function(){
$(this).stop(true,false).animate({
"opacity":"0.5"}
,300);
}
,function(){
$(this).stop(true,false).animate({
"opacity":"0.2"}
,300);
}
);
//上一页按钮$("#focus .pre").click(function(){
index -= 1;
if(index == -1){
index = len - 1;
}
showPics(index);
}
);
//下一页按钮$("#focus .next").click(function(){
index += 1;
if(index == len){
index = 0;
}
showPics(index);
}
);
//本例为左右滚动，即所有li元素都是在同一排向左浮动，所以这里需要计算出外围ul元素的宽度$("#focus ul").css("width",sWidth * (len));
//鼠标滑上焦点图时停止自动播放，滑出时开始自动播放$("#focus").hover(function(){
clearInterval(picTimer);
}
,function(){
picTimer = setInterval(function(){
showPics(index);
index++;
if(index == len){
index = 0;
}
}
,10000);
//此4000代表自动播放的间隔，单位：毫秒}
).trigger("mouseleave");
//显示图片函数，根据接收的index值显示相应的内容function showPics(index){
//普通切换var nowLeft = -index*sWidth;
//根据index值计算ul元素的left值$("#focus ul").stop(true,false).animate({
"left":nowLeft}
,300);
//通过animate()调整ul元素滚动到计算出的position//$("#focus .btn span").removeClass("on").eq(index).addClass("on");
//为当前的按钮切换到选中的效果$("#focus .btn span").stop(true,false).removeClass("on").eq(index).stop(true,false).addClass("on");
//为当前的按钮切换到选中的效果}
}
);
//边栏需求$(function(){
$(".tjxq").click(function(){
$(this).animate({
right:'-114px'}
,200,"easeOutExpo",function(){
$(".sform").animate({
right:'0px'}
,300,"easeInOutExpo");
}
);
}
);
$(".scloce").click(function(){
$(".sform").animate({
right:'-275px'}
,200,"easeOutExpo",function(){
$(".tjxq").animate({
right:'0px'}
,200,"easeInOutExpo");
}
);
}
);
}
);
//主导航下拉菜单延迟实例化$(function(){
$("#laug").each(function(e){
var that = $(this);
that.hoverDelay({
hoverEvent:function(){
that.animate({
left:'0px'}
,400,"easeOutExpo");
}
}
);
that.hoverDelay({
outEvent:function(){
that.animate({
left:'-168px'}
,300,"easeInOutExpo");
}
}
);
}
);
}
);
/*控制滚动条滚动插件*/
jQuery.fn.scrollTo = function(speed){
var targetOffset = $(this).offset().top;
$('html,body').stop().animate({
scrollTop:targetOffset}
,speed);
return this;
}
;
$(function(){
var sideTop = $("#sideBox").offset().top;
$(window).scroll(function (){
var offsetTop = sideTop + $(window).scrollTop() +"px";
$("#sideBox").animate({
top:offsetTop}
,{
duration:250,queue:false}
);
}
);
$("#minshow").click(function(){
var target_id = $(this).attr("href");
$(target_id).scrollTo(600);
return false;
}
);
function goTop(){
var nh=$(window).scrollTop();
if(nh >= 200){
$("#goTop").fadeIn();
}
else{
$("#goTop").fadeOut();
}
}
;
$(window).scroll(function(){
goTop();
}
);
$("#goTop").click(function(){
$("body").scrollTo(400);
return false;
}
);
}
);
//导航效果(function($){
$.fn.mainmenuslide = function(o){
o = $.extend({
fx:"linear",speed:500,click:function(){
}
}
,o ||{
}
);
return this.each(function(){
var b = $(this),noop = function(){
}
,$back = $('<li class="back"><div class="left"></div></li>').appendTo(b),$li = $("li",this),curr = $("li.current",this)[0] || $($li[0]).addClass("current")[0];
$li.not(".back").hover(function(){
move(this)}
,noop);
$(this).hover(noop,function(){
move(curr)}
);
$li.click(function(e){
setCurr(this);
return o.click.apply(this,[e,this])}
);
setCurr(curr);
function setCurr(a){
$back.css({
"left":a.offsetLeft + "px","width":a.offsetWidth + "px"}
);
curr = a}
;
function move(a){
$back.each(function(){
$(this).dequeue()}
).animate({
width:a.offsetWidth,left:a.offsetLeft}
,o.speed,o.fx)}
}
)}
}
)(jQuery);
$(function(){
$("#nav ul").mainmenuslide({
fx:"easeOutBack",speed:700,click:function(event,menuItem){
//return false;
}
}
);
}
);
$(".box,.box01,.tbox").hover(function(){
$(this).addClass("wbg");
}
,function(){
$(this).removeClass("wbg");
}
);
CSS代码(goble.css):
/*reset*/
body,p,h1,h2,h3,h4,h5,h6,dd,dl,dt,th,td,ul,li,ol,form,input,select,textarea,button,pre,legend{margin:0;padding:0;}
button,input,select,textarea{font:12px Arial,Helvetica,sans-serif;vertical-align:middle;outline:none;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
table{border-collapse:collapse;border-spacing:0;}
img,fieldset{border:0;}
address,cite,dfn,em,var,i{font-style:normal;}
ul,ol{list-style-type:none;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
a{color:#5E7691;text-decoration:none;}
a:hover,a:active,a:focus{color:#B6002F;}
/*边距*/
.mt6{margin-top:6px;}
.mt8{margin-top:8px;}
.mt10{margin-top:10px;}
.mt12{margin-top:12px;}
.mt20{margin-top:20px;}
.mb8{margin-bottom:8px;}
.mb10{margin-bottom:10px;}
.ml8{margin-left:8px;display:inline;}
.mr8{margin-left:8px;display:inline;}
.pt10{padding-top:10px;}
.pb10{padding-bottom:10px;}
.pl10{padding-left:10px;}
.pr10{padding-right:10px;}
/*字体*/
.f14{font-size:14px;}
.f16{font-size:16px;}
.f18{font-size:18px;}
.b{font-weight:bold;}
/*color*/
.pink{color:#FF007E!important;}
.gary{color:#666666!important;}
.blue{color:#005EB1!important;}
/*浮动*/
.fl{float:left;}
.fr{float:right;}
.clear{clear:both;}
.clearfix:after{clear:both;content:'';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0;}
.clearfix{+display:inline-block;}
* html .clearfix{height:1%;}
CSS代码(style.css):
html{-webkit-text-size-adjust:none;/*解决谷歌小于12px字体*/
}
/*layout*/
body{font-size:12px;font-family:Arial,"宋体",Helvetica,sans-serif;background:url(../images/bodyBg.jpg) center top no-repeat fixed;color:#6F6F6F;position:relative;overflow-x:hidden;padding-top:73px;}
.cbody{width:1000px;margin:0 auto;position:relative;}
#laug ul li a:hover,.severice h2 a:hover,.client h2 a:hover,.friend h2 a:hover,.zxdt h2 a:hover,.zxdt01 h2 a:hover,#footer .fnav a:hover,.header .phone a:hover,.caselist dd a.more:hover{color:#B6002F!important;}
::-moz-selection{background:#cccccc;color:#FFF;}
::selection{background:#cccccc;color:#FFF;}
#hwrap{position:fixed;left:0;top:0;z-index:99;background:url(../images/bodyBg.jpg) center top no-repeat;height:123px;width:100%;_position:absolute;_left:expression(eval(document.documentElement.scrollLeft));_top:expression(eval(document.documentElement.scrollTop));}
#nav{background:url(../images/navBg.png) no-repeat #000000;height:73px;width:100%;}
#nav ul li{float:left;position:relative;z-index:2;}
#nav ul li a{display:inline-block;width:123px;text-align:center;color:#FFF;line-height:73px;}
/*#nav ul li a:hover,#nav ul li a.on{text-decoration:none;background:#B6002F;}
*/
#nav li.back{background:url(../images/hover_main.gif) no-repeat left top;width:9px;height:73px;position:absolute;z-index:1;}
#nav li.back .left{background:url(../images/hover_main.gif) no-repeat top left;height:73px;}
#laug{position:fixed;top:86px;left:-168px;padding:0 2px 1px 0;background:url(../images/yyBg.png) right bottom no-repeat;z-index:99;_position:absolute;_left:expression(eval(document.documentElement.scrollLeft-168));_top:expression(eval(document.documentElement.scrollTop+86));}
#laug ul{background:url(../images/laugBg.gif) repeat-x #FFF;height:33px;border:1px solid #FFF;position:relative;top:-1px;width:285px;}
#laug ul li{float:left;line-height:33px;padding-left:16px;}
#laug ul li a{color:#4A4A4A;}
#laug ul li a.on{text-decoration:line-through;}
#laug ul li span{cursor:pointer;color:#4A4A4A;}
#wrapper{width:982px;margin:15px auto 0 auto;}
.header{height:41px;position:relative;width:980px;margin:0 auto;padding-top:60px;}
.header h1{float:left;padding-right:15px;}
.header h2{float:left;background:url(../images/hline.gif) left center no-repeat;padding-left:15px;font-size:12px;font-weight:normal;color:#7A7A7A;line-height:17px;height:43px;}
.header h2 span{display:inline-block;padding-top:5px;}
.header .phone{position:absolute;top:60px;right:0;color:#7A7A7A;}
.header .phone a{color:#7A7A7A;}
.header .search{background:url(../images/searchBg.png) no-repeat;width:190px;height:20px;position:absolute;right:0;bottom:-14px;}
.header .search .txt{width:120px;height:16px;line-height:16px;padding:2px;background:none;border:none;}
.header .search .btn{width:64px;height:20px;position:absolute;top:0;right:0;background:none;border:none;cursor:pointer;}
/*幻灯片*/
/*#slide{width:980px;padding-top:10px;position:relative;clear:both;}
#slide h2.dot{position:absolute;top:0;left:0;z-index:9;height:7px;overflow:hidden;}
#slide h2.dot a{background:#8C8C8C;width:123px;height:7px;cursor:pointer;display:block;float:left;margin-right:1px;}
#slide h2.dot a.cred{background:url(../images/focusBtnBg.gif) left top no-repeat;}
#ishowframe{width:980px;height:355px;overflow:hidden;position:relative;}
#ishowframe ul li{float:left;}
*/
/*.focus_picB{width:980px;height:355px;position:relative;overflow:hidden;padding-top:10px;}
.at_imgSwitch_c{width:auto;height:100%;overflow:hidden;position:absolute;top:10px;left:0px;z-index:1}
.at_imgSwitch_c li{width:auto;height:100%;overflow:hidden;float:left;margin:0;padding:0}
.at_imgSwitch_p{position:absolute;top:-8px;left:0;z-index:1000;width:980px;}
.at_imgSwitch_p li{background:#8C8C8C;width:123px;height:7px;cursor:pointer;display:block;overflow:hidden;float:right;}
.at_imgSwitch_p li.at_current,.at_imgSwitch_p li:hover{background:url(../images/focusBtnBg.gif) left top no-repeat;}
*/
/*#slides{position:absolute;left:0;z-index:100;margin-top:25px;}
#example{width:980px;height:363px;position:relative;}
.slides_container{width:980px;overflow:hidden;position:relative;display:none;height:355px;background:#F0F0F0;}
.slides_container div.slide{width:980px;height:355px;display:block;}
.pagination{position:absolute;top:-8px;left:0;z-index:1000;}
.pagination li{float:left;display:block;}
.pagination li a{background:#8C8C8C;width:123px;height:7px;cursor:pointer;display:block;float:left;margin-right:1px;text-indent:-100em;overflow:hidden;}
.pagination li.current a,.pagination li a:hover{background:url(../images/focusBtnBg.gif) left top no-repeat;}
*/
#focus{width:980px;height:365px;overflow:hidden;position:relative;}
#focus ul{height:355px;position:absolute;bottom:0;}
#focus ul li{float:left;width:980px;height:355px;overflow:hidden;position:relative;}
#focus ul li div{position:absolute;overflow:hidden;}
#focus .btnBg{display:none;}
#focus .btn{position:absolute;top:0;left:0;z-index:10;}
#focus .btn span{background:#8C8C8C;width:123px;height:7px;cursor:pointer;display:block;float:left;margin-right:1px;text-indent:-100em;overflow:hidden;}
#focus .btn span.on,#focus .btn span:hover{background:url(../images/focusBtnBg.gif) left top no-repeat;}
#focus .preNext{width:45px;height:100px;position:absolute;top:90px;background:url(img/sprite.png) no-repeat 0 0;cursor:pointer;display:none;}
#focus .pre{left:0;}
#focus .next{right:0;background-position:right top;}
.wbg{background:#FFF!important;}
.box{border:1px solid #FFF;background:url(../images/boxHovBg.gif) repeat-x left top #FFF;position:relative;top:-1px;height:196px;}
.about{width:354px;padding:0 2px 1px 0;background:url(../images/yyBg.png) right bottom no-repeat;float:left;}
.about h2{font-size:15px;color:#323232;line-height:22px;padding:15px 15px 0 15px;}
.about h2 span{color:#6C6C6C;font-size:12px;display:block;font-weight:normal;}
.about p{color:#929292;line-height:21px;padding:12px 15px 0 15px;text-indent:2em;}
.zxdt{width:340px;padding:0 2px 1px 0;background:url(../images/yyBg.png) right bottom no-repeat;float:left;margin-left:10px;}
.zxdt h2,.zxdt01 h2{height:46px;line-height:46px;position:relative;border-bottom:1px dotted #CACACA;margin:0 15px;margin-top:3px;}
.zxdt h2 span,.zxdt01 h2 span{display:inline-block;border-bottom:1px solid #CACACA;height:46px;position:absolute;bottom:-1;left:0;color:#323232;font-size:15px;padding:0 2px;}
.zxdt h2 a,.zxdt01 h2 a{position:absolute;top:0;right:0;font-size:11px;font-weight:normal;color:#AFAFAF;}
.zxdt ul{padding:12px 15px 0 18px;}
.zxdt ul li{height:24px;line-height:24px;overflow:hidden;color:#919191;}
.zxdt ul li a{color:#919191;}
.zxdt01{float:left;width:263px;padding:0 2px 1px 0;background:url(../images/yyBg.png) right bottom no-repeat;float:right;}
.zxdt01 p{text-align:center;padding-top:14px;}
.main-show{position:relative;height:0;overflow:hidden;}
.box01{border:1px solid #FFF;background:url(../images/boxHovBg.gif) repeat-x left top #FFF;position:relative;top:-1px;}
.severice,.client,.friend{padding:0 2px 1px 0;background:url(../images/yyBg.png) right bottom no-repeat;margin-top:10px;}
.severice .box01{height:196px;}
.severice .item{float:left;width:300px;}
.severice h2,.client h2,.friend h2{height:46px;line-height:46px;width:940px;margin:0 auto;position:relative;font-size:15px;color:#323232;padding-top:6px;}
.severice h2 a,.client h2 a,.friend h2 a{position:absolute;top:0;right:0;font-size:11px;font-weight:normal;color:#AFAFAF;}
.severice .item{padding:10px 0 0 20px;}
.severice .item dt img{float:left;}
.severice .item dd{width:190px;float:right;}
.severice .item dd h3{line-height:18px;font-size:14px;}
.severice .item dd h3 a{color:#222;font-family:"微软雅黑";}
.severice .item dd h3 span{display:block;color:#B6002F;font-weight:normal;font-size:12px;font-family:Arial,Helvetica,sans-serif;}
.severice .item dd p{line-height:18px;margin-top:5px;}
.client p{color:#929292;line-height:22px;padding:0 15px 20px 12px;word-wrap:break-word;}
.client p a{color:#929292;margin:0 8px;}
.friend p{color:#929292;line-height:22px;padding:0 20px 20px 20px;word-wrap:break-word;}
.friend p a{color:#929292;margin-right:10px;}
#footer{width:980px;margin:20px auto 0 auto;padding-bottom:20px;position:relative;}
#footer .fnav{height:14px;line-height:14px;}
#footer .fnav span{background:url(../images/fnavr.gif) center center no-repeat;display:inline-block;width:16px;height:14px;float:left;}
#footer .fnav a{color:#555555;float:left;display:inline-block;height:14px;}
#footer .copyright{background:url(../images/logo02.png) left center no-repeat;padding-left:85px;line-height:17px;color:#7A7A7A;margin-top:12px;}
#footer #minshow{background:url(../images/ssBg.png) no-repeat;width:133px;height:45px;line-height:45px;text-align:center;color:#4A4A4A;position:absolute;right:-2px;bottom:24px;text-decoration:none;}
#sideBox{position:absolute;top:270px;right:0;}
.tjxq{padding:0 0 2px 0;background:url(../images/yyBg.png) right bottom no-repeat;width:114px;position:absolute;top:0;right:0;}
.tjxq .tbox{border:1px solid #FFF;background:url(../images/boxHovBg.gif) repeat-x left top #FFF;position:relative;padding-bottom:15px;cursor:pointer;}
.tjxq h2{font-size:15px;color:#323232;padding:20px 0 0 25px;}
.tjxq span{color:#949494;line-height:16px;padding-left:25px;display:block;}
.sform{padding:0 0 2px 0;background:url(../images/yyBg.png) right bottom no-repeat;position:absolute;top:0;right:-275px;width:275px;}
.sbox{border:1px solid #FFF;background:url(../images/boxHovBg.gif) repeat-x left top #FFF;position:relative;padding-bottom:10px;}
.sform .scloce{position:absolute;top:-40px;right:8px;}
.sform h2{font-size:15px;color:#323232;padding:20px 0 15px 20px;}
.sform h2 span{display:block;font-size:12px;font-weight:normal;color:#888;}
.sform p{padding:0 0 15px 20px;line-height:19px;color:#888;}
.sform ul{padding-bottom:20px;}
.sform ul li{padding-bottom:7px;}
.sform ul li label{width:57px;text-align:right;display:inline-block;color:#999;}
.sform ul li .stxt{border:1px solid #DFDFDF;width:190px;height:16px;line-height:16px;padding:2px;}
.sform ul li textarea{border:1px solid #DFDFDF;width:190px;height:70px;line-height:16px;padding:2px;vertical-align:top;overflow:auto;}
#goTop{background:url(../images/goTop.png) no-repeat;width:58px;height:58px;overflow:hidden;position:fixed;_position:absolute;left:50%;bottom:99px;margin-left:500px;cursor:pointer;display:none;}
.conpage{padding:0 2px 1px 0;background:url(../images/yyBg.png) right bottom no-repeat;margin-top:20px;}
.conpage .pagebox{border:1px solid #FFF;background:url(../images/njbBg.gif) repeat-x left top #FFF;position:relative;top:-1px;min-height:500px;_height:500px;}
.pd{padding:0 50px 50px 50px;}
.conpage .pagebox .ptit{padding:40px 0 0 0;}
.conpage .pagecon{color:#888888;line-height:22px;padding-top:20px;}
.panner{}
.panner dl{float:left;width:130px;padding-right:15px;}
.panner dl dt{color:#393939;font-size:14px;line-height:35px;}
.panner dl dd{height:22px;line-height:22px;overflow:hidden;}
.sidenews{}
.sidenews li a{color:#888888;}
.sidenews li a:hover{color:#B6002F!important;}
.servelist{color:#888;padding:30px 0 25px 0;}
.servelist dt{float:left;}
.servelist dd{width:705px;float:left;padding-left:20px;}
.servelist dd p{padding:6px 0;}
.servelist dd .pl{line-height:17px;}
.casetit{padding:0 2px 1px 0;background:url(../images/yyBg.png) right bottom no-repeat;margin-top:20px;}
.casetit .casebox{border:1px solid #FFF;background:url(../images/njbBg.gif) repeat-x left top #FFF;position:relative;top:-1px;height:109px;}
.casetit .casebox h2{float:left;padding:32px 0 0 25px;}
.casetit .casebox p{float:left;padding-left:40px;padding-top:35px;line-height:19px;color:#888;}
.caselist{width:982px;overflow:hidden;margin-top:14px;}
.caselist .ovh{width:992px;overflow:hidden;}
.caselist dl{float:left;background:url(../images/showBoxBg02.png) no-repeat;width:239px;height:304px;margin:0 9px 14px 0;overflow:hidden;}
.caselist dl:hover{background:url(../images/showBoxBg01.png) no-repeat;}
.caselist dl dt{position:relative;width:217px;height:131px;overflow:hidden;margin:10px auto 0 10px;}
.caselist dl dt span{position:absolute;top:-131px;left:0;}
.caselist dl dt img{display:block;}
.caselist dd{padding:0 10px;}
.caselist dd h2{font-size:14px;font-weight:normal;color:#595959;line-height:24px;padding:14px 0 5px 0;}
.caselist dd p{color:#888888;line-height:19px;padding-bottom:8px;}
.caselist dd a.more{color:#888888;background:url(../images/addIco.gif) left center no-repeat;padding-left:15px;}
/** * jQuery lightBox plugin * This jQuery plugin was inspired and based on Lightbox 2 by Lokesh Dhakar (http://www.huddletogether.com/projects/lightbox2/) * and adapted to me for use like a plugin from jQuery. * @name jquery-lightbox-0.5.css * @author Leandro Vieira Pinho - http://leandrovieira.com * @version 0.5 * @date April 11,2008 * @category jQuery plugin * @copyright (c) 2008 Leandro Vieira Pinho (leandrovieira.com) * @license CCAttribution-ShareAlike 2.5 Brazil - http://creativecommons.org/licenses/by-sa/2.5/br/deed.en_US * @example Visit http://leandrovieira.com/projects/jquery/lightbox/ for more informations about this jQuery plugin */
#jquery-overlay{position:fixed;_position:absolute;top:0;left:0;z-index:999;width:100%;height:500px;}
#jquery-lightbox{position:absolute;top:0;left:0;width:100%;z-index:1000;text-align:center;line-height:0;}
#jquery-lightbox a img{border:none;}
#lightbox-container-image-box{position:relative;background-color:#fff;width:250px;height:250px;margin:0 auto;}
#lightbox-container-image{padding:10px;}
#lightbox-loading{position:absolute;top:40%;left:0%;height:25%;width:100%;text-align:center;line-height:0;}
#lightbox-nav{position:absolute;top:0;left:0;height:100%;width:100%;z-index:10;}
#lightbox-container-image-box > #lightbox-nav{left:0;}
#lightbox-nav a{outline:none;}
#lightbox-nav-btnPrev,#lightbox-nav-btnNext{width:49%;height:100%;zoom:1;display:block;}
#lightbox-nav-btnPrev{left:0;float:left;}
#lightbox-nav-btnNext{right:0;float:right;}
#lightbox-container-image-data-box{font:10px Verdana,Helvetica,sans-serif;background-color:#fff;margin:0 auto;line-height:1.4em;overflow:auto;width:100%;padding:0 10px 0;}
#lightbox-container-image-data{padding:0 10px;color:#666;}
#lightbox-container-image-data #lightbox-image-details{width:70%;float:left;text-align:left;}
#lightbox-image-details-caption{font-size:12px;font-family:"微软雅黑";line-height:17px;}
#lightbox-image-details-currentNumber{display:block;clear:left;padding-bottom:1.0em;}
#lightbox-secNav-btnClose{width:66px;float:right;padding-bottom:0.7em;}
分享到QQ
分享到微博
微信扫一扫
