以下是 AnG无双科技首页jQuery滑动滚动特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="css/layout_220082c.css" />
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<meta name="viewport" content="width=device-width" />
<title>AnG无双科技首页jQuery特效</title>
<link rel="stylesheet" type="text/css" href="css/home_2c89410.css" />
</head>
<body>
<div>
<div class="ag-content-customer-wrap">
<div class="ag-content-customer">
<div class="ag-content-customer-ele">
<div class="ag-content-customer-ele-shadow"></div>
<span>传统企业主</span>
<img src="images/ag-customer-tradition_ad3bf6f.png" data-hover="77" data-normal="85" />
</div>
<div class="ag-content-customer-ele">
<div class="ag-content-customer-ele-shadow"></div>
<span>淘宝掌柜</span>
<img src="images/ag-customer-taobao_a9d7af6.png" style="left:65px;" data-hover="57" data-normal="65" />
</div>
<div class="ag-content-customer-ele">
<div class="ag-content-customer-ele-shadow"></div>
<span>中小企业主</span>
<img src="images/ag-customer-small_35b8744.png" style="left:96px;" data-hover="88" data-normal="96" />
</div>
<div class="ag-content-customer-ele">
<div class="ag-content-customer-ele-shadow"></div>
<span>大品牌客户</span>
<img src="images/ag-customer-brand_9ca1bac.png" style="left:83px;" data-hover="75" data-normal="83" />
</div>
<div class="ag-content-customer-ele">
<div class="ag-content-customer-ele-shadow"></div>
<span>搜索引擎广告主</span>
<img src="images/ag-customer-search_83f9a60.png" style="left:56px;" data-hover="48" data-normal="56" />
</div>
<div class="ag-content-customer-ele">
<div class="ag-content-customer-ele-shadow"></div>
<span>网站主</span>
<img src="images/ag-customer-web_d2729dd.png" style="left:83px;" data-hover="75" data-normal="83" />
</div>
<div class="ag-content-customer-ele-detail">
<ul>
<li class="acced-li-1"></li>
<li class="acced-li-2"></li>
<li class="acced-li-3"></li>
<li class="acced-li-4"></li>
<li class="acced-li-5"></li>
<li class="acced-li-6"></li>
</ul>
<div class="ag-content-customer-ele-detail-display">
<div class="ag-content-customer-ele-detail-display-left">
<img src="images/ag-customer-tradition_ad3bf6f.png" />
</div>
<div class="ag-content-customer-ele-detail-display-right">
<span style="top:30px; right:0px;"><img src="images/ag-customer-tradition-txt_d2077c8.png" /></span>
<a href="/products/weixin" class="agwyx" style="top:190px; left:262px;">AG微营销</a>
</div>
</div>
<div class="ag-content-customer-ele-detail-display">
<div class="ag-content-customer-ele-detail-display-left">
<img src="images/ag-customer-taobao_a9d7af6.png" />
</div>
<div class="ag-content-customer-ele-detail-display-right">
<span style="top:30px; right:0px;"><img src="images/ag-customer-taobao-txt_2d1d5db.png" /></span>
<a href="/products/dsp" class="agwm" style="top:190px; left:262px;">AG网盟</a>
</div>
</div>
<div class="ag-content-customer-ele-detail-display">
<div class="ag-content-customer-ele-detail-display-left">
<img src="images/ag-customer-small_35b8744.png" />
</div>
<div class="ag-content-customer-ele-detail-display-right">
<span style="top:27px; left:0px; text-align:right;"><img src="images/ag-customer-small-txt-1_c935044.png" /></span>
<span class="point" style="top:88px; right:158px;">></span>
<a href="/products/dsp" class="agwm" style="top:40px; right:0px;">AG网盟</a>
<span style="top:235px; left:50px; text-align:right;"><img src="images/ag-customer-small-txt-2_b08da8b.png" /></span>
<span class="point" style="top:262px; right:158px;">></span>
<a href="/products/reporting-analytics" class="aggg" style="top:210px; right:0px;">AG广告效果分析平台</a>
</div>
</div>
<div class="ag-content-customer-ele-detail-display">
<div class="ag-content-customer-ele-detail-display-left">
<img src="images/ag-customer-brand_9ca1bac.png" />
</div>
<div class="ag-content-customer-ele-detail-display-right">
<span style="top:46px; left:10px; text-align:right;"><img src="images/ag-customer-brand-txt-1_ad914ee.png" /></span>
<span class="point" style="top:88px; right:158px;">></span>
<a href="/products/enterprise" class="agxt" style="top:40px; right:0px;">AG广告系统旗舰版</a>
<span style="top:220px; left:-18px; text-align:right;"><img src="images/ag-customer-brand-txt-2_b3dd522.png" /></span>
<span class="point" style="top:262px; right:158px;">></span>
<a href="/products/dsp" class="agwm" style="top:210px; right:0px;">AG网盟</a>
</div>
</div>
<div class="ag-content-customer-ele-detail-display">
<div class="ag-content-customer-ele-detail-display-left">
<img src="images/ag-customer-search_83f9a60.png" />
</div>
<div class="ag-content-customer-ele-detail-display-right">
<span style="top:30px; right:20px;"><img src="images/ag-customer-search-txt_592f82b.png" /></span>
<a href="/products/smb" class="jjzs" style="top:190px; left:92px;">AG竞价助手</a>
<a href="http://13141618.taobao.com" class="tgrb" style="top:190px; left:262px;">推广日报</a>
<a href="/products/ag360editor" class="ag360" style="top:190px; left:432px;">AG360营销助手</a>
</div>
</div>
<div class="ag-content-customer-ele-detail-display">
<div class="ag-content-customer-ele-detail-display-left">
<img src="images/ag-customer-web_d2729dd.png" />
</div>
<div class="ag-content-customer-ele-detail-display-right">
<span style="top:60px; right:60px;"><img src="images/ag-customer-web-txt_c205aff.png" /></span>
<a href="/products/reporting-analytics" class="aggg" style="top:190px; left:262px;">AG广告效果分析平台</a>
</div>
</div>
<div class="ag-content-customer-ele-detail-return"><span><</span>重选角色</div>
</div>
</div>
</div>
<script type="text/javascript">
var ctrlBar = false;
var float_timer = null;
var float_max_X;
var float_max_Y;
var float_ctrl_X = true;
var float_ctrl_Y = true;
$(function () {
float_max_X = $(window).width();
float_max_Y = $(window).height();
});
function showVideoImage() {
if ($('.vjs-poster').css('display') == 'none') {
$('.vjs-poster').addClass('index').show();
} else {
setTimeout('showVideoImage()', 50);
}
}
function startMove() {
var obj = $('#floatAdv');
var limit_X = float_max_X - obj.width();
var limit_Y = float_max_Y - obj.height();
float_timer = setInterval(function () {
var _x = parseInt(obj.css('left'));
var _y = parseInt(obj.css('top'));
if (_x >= limit_X) {
float_ctrl_X = false;
}
if (_x <= 0) {
float_ctrl_X = true;
}
if (_y >= limit_Y) {
float_ctrl_Y = false;
}
if (_y <= 0) {
float_ctrl_Y = true;
}
if (float_ctrl_X) {
_x += 1;
} else {
_x -= 1;
}
if (float_ctrl_Y) {
_y += 1;
} else {
_y -= 1;
}
obj.css({
'left': _x + 'px',
'top': _y + 'px'
});
}, 10);
}
function endMove() {
clearInterval(float_timer);
}
$(document).ready(function () {
$('.ag-header ul li:eq(0)').addClass('current-page');
showVideoImage();
$('#floatAdv').mouseenter(function () {
endMove();
});
$('#floatAdv').mouseleave(function () {
startMove();
});
$('#floatAdv span').click(function (e) {
endMove();
$('#floatAdv').attr('href', 'javascript:;').removeAttr('target').hide();
});
$(".ag-content-customer-ele").bind("mouseenter mouseleave", function (e) {
var w = $(this).width();
var h = $(this).height();
var x = (e.pageX - this.offsetLeft - (w / 2)) * (w > h ? (h / w) : 1);
var y = (e.pageY - this.offsetTop - (h / 2)) * (h > w ? (w / h) : 1);
var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;
if (e.type == 'mouseenter') {
// 0:up - 1:right - 2:down - 3:left
if(direction == 0) {
$(this).find('div').css({
'top' : '-470px',
'left' : '0px'
});
$(this).find('div').animate({ 'top': 0 }, { queue: false, duration: 300 });
} else if(direction == 2) {
$(this).find('div').css({
'top' : '470px',
'left' : '0px'
});
$(this).find('div').animate({ 'top': 0 }, { queue: false, duration: 300 });
} else if(direction == 1) {
$(this).find('div').css({
'top' : '0px',
'left' : '167px'
});
$(this).find('div').animate({ 'left': 0 }, { queue: false, duration: 300 });
} else if(direction == 3) {
$(this).find('div').css({
'top' : '0px',
'left' : '-167px'
});
$(this).find('div').animate({ 'left': 0 }, { queue: false, duration: 300 });
}
$(this).find('span').css('color', '#fff');
$(this).find('img').animate({ 'left': $(this).find('img').attr('data-hover') }, { queue: false, duration: 200 });
}else{
if(direction == 0) {
$(this).find('div').animate({ 'top': -470 }, { queue: false, duration: 300 });
} else if(direction == 2) {
$(this).find('div').animate({ 'top': 470 }, { queue: false, duration: 300 });
} else if(direction == 1) {
$(this).find('div').animate({ 'left': 167 }, { queue: false, duration: 300 });
} else if(direction == 3) {
$(this).find('div').animate({ 'left': -167 }, { queue: false, duration: 300 });
}
$(this).find('span').css('color', '#262626');
$(this).find('img').animate({ 'left': $(this).find('img').attr('data-normal') }, { queue: false, duration: 200 });
}
});
$(".ag-content-customer-ele").bind('click', function (e) {
var navIndex = $(e.target).parent().index();
$('.ag-content-customer-ele-detail ul li').removeClass('current');
$('.ag-content-customer-ele-detail ul li').eq(navIndex).addClass('current');
$('.ag-content-customer-wrap').css('background-color', '#469acb');
$('.ag-content-customer-ele').animate({ 'width': 0 }, 500);
$('.ag-content-customer-ele-detail').animate({ 'width': 1002 }, {
duration: 500,
complete: function () {
$('.ag-content-customer-ele-detail ul li').eq(navIndex).click();
}
});
});
$('.ag-content-customer-ele-detail-return').bind('click', function (e) {
$('.ag-content-customer-wrap').css('background-color', '#f1f1f1');
$('.ag-content-customer-ele-detail').css('overflow', 'hidden');
$('.ag-content-customer-ele').animate({ 'width': 167 }, 500);
$('.ag-content-customer-ele-detail').animate({ 'width': 0 }, 500);
$('.ag-content-customer-ele-detail-display').hide();
});
$('.ag-content-customer-ele-detail ul li').bind('click', function () {
$('.ag-content-customer-ele-detail ul li').removeClass('current');
$(this).addClass('current');
$('.ag-content-customer-ele-detail').css('overflow', 'visible');
var disIndex = $(this).index();
$('.ag-content-customer-ele-detail-display').hide();
$('.ag-content-customer-ele-detail-display').eq(disIndex).show();
// IE
if ("ActiveXObject" in window) {
$('.ag-content-customer-ele-detail-display-left').css({
'left': '0px',
'opacity':'1'
});
$('.ag-content-customer-ele-detail-display-right').css({
'right': '-120px',
'opacity': '1'
});
$('.ag-content-customer-ele-detail-display-left').eq(disIndex).animate({ 'left': 120 }, { duration: 1000, easing: 'easeOutQuint' });
$('.ag-content-customer-ele-detail-display-right').eq(disIndex).animate({ 'right': 0 }, { duration: 1000, easing: 'easeOutQuint' });
}
});
$('body').on('click', '.vjs-big-play-button', function () {
$(this).hide();
ctrlBar = true;
$('.vjs-control-bar').removeClass('vjs-fade-out').addClass('vjs-fade-in');
});
$('.ag-content-app-wytgg-right').click(function () {
if (!$('#ag-app-video').hasClass('vjs-playing')) {
$('.vjs-big-play-button').css('display', 'none');
ctrlBar = true;
$('.vjs-control-bar').removeClass('vjs-fade-out').addClass('vjs-fade-in');
}
});
// IE7
if (window.navigator.userAgent.indexOf('MSIE 7.0') >= 0) {
$('#ag-app-video').css({
'width': '570px',
'height': '380px',
'position': 'relative'
});
$('#ag-app-video').find('div.vjs-poster').css({
'width': '570px',
'height': '380px',
'position': 'absolute',
'top': '0px'
});
$('.vjs-big-play-button').css({
'width': '100px',
'height': '100px',
'position': 'absolute',
'top': '140px',
'left': '235px'
});
$('.ag-content-app-wytgg-right').css('overflow', 'hidden');
} else {
$('.ag-content-app-wytgg-right').hover(
function () {
if (ctrlBar) {
$('.vjs-control-bar').removeClass('vjs-fade-out').addClass('vjs-fade-in');
}
},
function () {
$('.vjs-control-bar').removeClass('vjs-fade-in').addClass('vjs-fade-out');
}
);
}
});
</script>
</div>
</body>
</html>
CSS代码(home_2c89410.css):
#secondary-navbar-wrapper{display:none;}
#features{padding:0px;}
#feature-slider{width:100%;overflow:hidden;position:relative;}
#slide-container{white-space:nowrap;position:relative;left:-200%;}
.slide{width:100%;vertical-align:top;height:565px;text-align:left;display:inline-block;}
.slider-text{width:500px;margin-left:10%;padding-top:50px;white-space:normal;color:#013b72;}
.slider-header{font-size:38px;padding-bottom:20px;}
.slider-header-2{font-size:16px;padding-bottom:23px;}
.slider-text img{padding-bottom:17px;}
.slider-description{font-size:16px;padding-bottom:45px;line-height:35px;}
#image-slider{position:relative;margin-top:-160px;width:100%;height:160px;background-color:rgba(153,153,153,0.35);text-align:center;}
.before-slider,.before-image,.after-slider,.after-image{position:absolute;top:51%;width:20%;height:1px;background-color:white;}
.before-slider{margin-left:-20%;/* Same as width */
}
.after-image{width:5%;}
.before-image{width:5%;margin-left:-5%;/* Same as width */
}
.slider-image{cursor:pointer;width:10%;vertical-align:middle;max-width:70px;max-height:70px;}
#last-image{padding-right:0px;}
.image-container{display:inline;line-height:160px;padding-right:8%;}
#experience{background-color:#FFA200;width:100%;}
#experience > img{padding-top:40px;margin-left:10%;float:left;width:40%;max-width:500px;max-height:321px;}
#experience-text-container{float:right;color:#fff;padding:100px 10% 0 0;}
#experience-text-description{margin-top:20px;}
.subWeibo{font-size:15px;}
.head-font{font-size:38px;}
.ul-weibo li{padding:3px;font-size:15px;}
.weibohover:hover{cursor:pointer;text-decoration:underline;}
#android:hover{cursor:pointer;}
/*-- 2014.8.19 New --*/
.ag-content-customer-wrap{width:100%;height:470px;background:#f1f1f1;transition:background-color .5s;-moz-transition:background-color .5s;-webkit-transition:background-color .5s;-o-transition:background-color .5s;}
.ag-content-customer{width:1003px;margin:0 auto;}
.ag-content-customer-ele{width:167px;height:470px;float:left;margin:0px;padding:0px;font-size:18px;position:relative;overflow:hidden;}
.ag-content-customer-ele:hover{cursor:pointer;}
.ag-content-customer-ele .ag-content-customer-ele-shadow{width:167px;height:470px;background:#469acb;position:absolute;top:-470px;left:0px;}
.ag-content-customer-ele span{display:block;width:18px;position:absolute;top:170px;left:20px;transition:color .3s;-moz-transition:color .3s;-webkit-transition:color .3s;-o-transition:color .3s;}
.ag-content-customer-ele img{display:block;width:300px;height:400px;position:absolute;top:52px;left:85px;}
.ag-content-customer-ele-detail{width:0px;height:470px;position:relative;float:left;background:#469acb;overflow:hidden;}
.ag-content-customer-ele-detail ul{width:70px;float:left;margin-top:10px;}
.ag-content-customer-ele-detail ul li{width:70px;height:48px;line-height:24px;font-size:16px;color:#333;margin-bottom:6px;padding:11px 0;cursor:pointer;background-image:url('../images/ag-customer-icon_ac6e25a.png');background-repeat:no-repeat;/* transition:background-position-y .2s;-moz-transition:background-position-y .2s;-webkit-transition:background-position-y .2s;-o-transition:background-position-y .2s;*/
}
.ag-content-customer-ele-detail ul li.acced-li-1{background-position:0px top;}
.ag-content-customer-ele-detail ul li.acced-li-1:hover,.ag-content-customer-ele-detail ul li.acced-li-1.current{background-position:0px bottom;}
.ag-content-customer-ele-detail ul li.acced-li-2{background-position:-70px top;}
.ag-content-customer-ele-detail ul li.acced-li-2:hover,.ag-content-customer-ele-detail ul li.acced-li-2.current{background-position:-70px bottom;}
.ag-content-customer-ele-detail ul li.acced-li-3{background-position:-140px top;}
.ag-content-customer-ele-detail ul li.acced-li-3:hover,.ag-content-customer-ele-detail ul li.acced-li-3.current{background-position:-140px bottom;}
.ag-content-customer-ele-detail ul li.acced-li-4{background-position:-210px top;}
.ag-content-customer-ele-detail ul li.acced-li-4:hover,.ag-content-customer-ele-detail ul li.acced-li-4.current{background-position:-210px bottom;}
.ag-content-customer-ele-detail ul li.acced-li-5{background-position:-280px top;}
.ag-content-customer-ele-detail ul li.acced-li-5:hover,.ag-content-customer-ele-detail ul li.acced-li-5.current{background-position:-280px bottom;}
.ag-content-customer-ele-detail ul li.acced-li-6{background-position:-350px top;}
.ag-content-customer-ele-detail ul li.acced-li-6:hover,.ag-content-customer-ele-detail ul li.acced-li-6.current{background-position:-350px bottom;}
@-webkit-keyframes mymove{0%{left:0px;opacity:0;}
100%{left:120px;opacity:1;}
}
@-moz-keyframes mymove{0%{left:0px;opacity:0;}
100%{left:120px;opacity:1;}
}
@-o-keyframes mymove{0%{left:0px;opacity:0;}
100%{left:120px;opacity:1;}
}
@-webkit-keyframes remove{0%{right:-120px;opacity:0;}
100%{right:0px;opacity:1;}
}
@-moz-keyframes remove{0%{right:-120px;opacity:0;}
100%{right:0px;opacity:1;}
}
@-o-keyframes remove{0%{right:-120px;opacity:0;}
100%{right:0px;opacity:1;}
}
.ag-content-customer-ele-detail-display{display:none;width:932px;height:470px;float:left;position:relative;}
.ag-content-customer-ele-detail-display-left{width:300px;height:400px;position:absolute;top:55px;left:0px;opacity:0;animation:mymove 1s both;-moz-animation:mymove 1s both;-webkit-animation:mymove 1s both;-o-animation:mymove 1s both;}
.ag-content-customer-ele-detail-display-right{width:580px;height:420px;position:absolute;top:50px;right:-120px;opacity:0;filter:alpha(opacity=0);animation:remove 1.5s both;-moz-animation:remove 1.5s both;-webkit-animation:remove 1.5s both;-o-animation:remove 1.5s both;}
.ag-content-customer-ele-detail-display-right span{display:block;line-height:40px;font-family:Arial;font-size:30px;color:#fff;text-align:center;position:absolute;}
.ag-content-customer-ele-detail-display-right span.point{font-family:'SimSun';}
.ag-content-customer-ele-detail-display-right a{display:block;width:134px;height:140px;text-align:left;text-indent:-9999px;background-image:url('../images/ag-link-icon_87d8dbf.png');background-repeat:no-repeat;cursor:pointer;position:absolute;overflow:hidden;}
.ag-content-customer-ele-detail-display-right a.agwyx:link{background-position:0px 0px;}
.ag-content-customer-ele-detail-display-right a.agwyx:hover{background-position:-134px 0px;}
.ag-content-customer-ele-detail-display-right a.agwyx:active{background-position:-268px 0px;}
.ag-content-customer-ele-detail-display-right a.agwm:link{background-position:0px -140px;}
.ag-content-customer-ele-detail-display-right a.agwm:hover{background-position:-134px -140px;}
.ag-content-customer-ele-detail-display-right a.agwm:active{background-position:-268px -140px;}
.ag-content-customer-ele-detail-display-right a.aggg:link{background-position:0px -280px;}
.ag-content-customer-ele-detail-display-right a.aggg:hover{background-position:-134px -280px;}
.ag-content-customer-ele-detail-display-right a.aggg:active{background-position:-268px -280px;}
.ag-content-customer-ele-detail-display-right a.agxt:link{background-position:0px -420px;}
.ag-content-customer-ele-detail-display-right a.agxt:hover{background-position:-134px -420px;}
.ag-content-customer-ele-detail-display-right a.agxt:active{background-position:-268px -420px;}
.ag-content-customer-ele-detail-display-right a.jjzs:link{background-position:0px -560px;}
.ag-content-customer-ele-detail-display-right a.jjzs:hover{background-position:-134px -560px;}
.ag-content-customer-ele-detail-display-right a.jjzs:active{background-position:-268px -560px;}
.ag-content-customer-ele-detail-display-right a.tgrb:link{background-position:0px -700px;}
.ag-content-customer-ele-detail-display-right a.tgrb:hover{background-position:-134px -700px;}
.ag-content-customer-ele-detail-display-right a.tgrb:active{background-position:-268px -700px;}
.ag-content-customer-ele-detail-display-right a.ag360:link{background-position:0px -840px;}
.ag-content-customer-ele-detail-display-right a.ag360:hover{background-position:-134px -840px;}
.ag-content-customer-ele-detail-display-right a.ag360:active{background-position:-268px -840px;}
.ag-content-customer-ele-detail-return{width:90px;height:40px;line-height:40px;font-size:15px;color:#fff;text-align:center;position:absolute;bottom:5px;left:50%;margin-left:-45px;cursor:pointer;}
.ag-content-customer-ele-detail-return span{float:left;font-family:"SimSun";font-size:30px;}
.ag-content-customer-prompt{width:100%;height:52px;background:#f1f1f1;text-align:center;}
.ag-content-app-wytgg-wrap{width:100%;background:#fff;position:relative;}
.ag-content-app-wytgg{width:1002px;height:590px;margin:0 auto;position:relative;}
.ag-content-app-wytgg-left{width:300px;height:400px;position:absolute;top:100px;left:0px;}
.ag-content-app-wytgg-left > img{display:block;float:left;margin-bottom:75px;}
.ag-content-app-wytgg-left a{display:block;width:129px;height:47px;background-image:url('../images/ag-download-ios-1_04d4257.png');background-repeat:no-repeat;background-position:0px;position:absolute;}
.ag-content-app-wytgg-left a:hover{background-image:url('../images/ag-download-ios-1_04d4257.png');background-repeat:no-repeat;background-position:-129px;}
.ag-content-app-wytgg-left a:active{background-image:url('../images/ag-download-ios-1_04d4257.png');background-repeat:no-repeat;background-position:-258px;}
.ag-content-app-wytgg-left a.iosLink{top:343px;left:-2px;}
.ag-content-app-wytgg-left a.androidLink{top:343px;left:155px;background-image:url('../images/ag-download-android-1_aeb8851.png');}
.ag-content-app-wytgg-right{width:570px;height:380px;position:absolute;top:95px;right:0px;border:8px solid #787878;border-radius:8px;}
.ag-content-app-tgrb-wrap{width:100%;background:#f1f1f1;border-top:1px solid #d4d4d4;position:relative;}
.ag-content-app-tgrb{width:1002px;height:590px;margin:0 auto;position:relative;}
.ag-content-app-tgrb-left{width:463px;height:431px;position:absolute;top:80px;left:0px;}
.ag-content-app-tgrb-right{width:308px;height:230px;position:absolute;top:120px;right:0px;}
/*modify by chonggao with date 2015/02/05 for new image description*/
.ag-content-app-tgrb-right > img{position:relative;right:180px;}
.ag-content-app-tgrb-right a{display:block;width:129px;height:47px;background:url('../images/ag-tgrb-btn-1_3b967d3.png') no-repeat;margin:24px 0 0 207px;}
.ag-content-app-tgrb-right a:link{background-position:0px 0px;}
.ag-content-app-tgrb-right a:hover{background-position:-129px 0px;}
.ag-content-app-tgrb-right a:active{background-position:-258px 0px;}
.ag-content-partners-parnter-wrap{width:100%;background:#fff;position:relative;}
.ag-content-partners-parnter{width:1002px;margin:0 auto;padding:30px 0 42px 0;position:relative;text-align:center;}
.ag-content-partners-parnter img{margin-top:24px;}
.ag-content-partners-customer-wrap{width:100%;background:#707070;position:relative;}
.ag-content-partners-customer{width:1002px;margin:0 auto;padding:20px 0 42px 0;position:relative;text-align:center;}
.ag-content-partners-customer img{margin-top:30px;}
/*-- 2014/12/25 --*/
#floatAdv{display:none;width:283px;height:57px;position:fixed;top:0px;left:0px;z-index:999999999;}
#floatAdv img{width:283px;height:57px;}
#floatAdv span{display:none;border:1px solid #d2d2d2;background-color:#f2f2f2;font-size:12px;position:absolute;top:0px;right:0px;cursor:pointer;}
#floatAdv:hover span{display:block;}
CSS代码(layout_220082c.css):
/* Document:layout.css Created on:2013.06.24 Author:Jessica Kung*/
body,html,#container{height:100%;}
#container{height:auto !important;}
body > #container{height:auto;min-height:100%;}
body,html{font-family:"Microsoft YaHei","微软雅黑",Candara,Tahoma,SimSun !important;font-size:16px;background:#fff;margin:0;padding:0;width:100%;height:100%;text-align:left;color:#1a1a1a;font-weight:400;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;zoom:1}
#header{position:fixed;top:0;width:100%;height:80px;*height:81px;vertical-align:middle;background:#fff;z-index:9000;}
#main-navbar-list a:hover{color:#00adef;}
#secondary-navbar a:hover{color:#F1E400;}
img{border:0;}
#logo{margin-left:10%;font-size:46px;margin-top:17px;float:left;}
#logo a{color:#fff;}
#logo a:hover{color:#cfcfcf;}
#login-register-wrapper{float:right;margin-right:10%;font-size:12px;color:#7a8181;}
#login-register a{color:#bbb;}
#small-menu{display:none;}
#main-navbar-wrapper,#secondary-navbar-wrapper{width:100%;}
#main-navbar-wrapper{height:80px;*height:0px;}
#secondary-navbar-wrapper{background:#00adef;height:46px;}
#main-navbar,#secondary-navbar{position:absolute;float:right;margin-right:10%;right:0;}
#main-navbar{display:block;height:44px;line-height:44px;bottom:0px;}
#secondary-navbar{bottom:-34px;}
#secondary-about,#secondary-products{display:none;}
#header.stuck{position:fixed;top:0;}
ul{padding:0;margin:0;}
#header li,#header li{display:inline-block;*display:inline;zoom:1;font-size:16px;margin:0;padding:0;}
/*#header li.first a,#header li.first{padding-left:0px;}
*/
#header li.last a,#header li.last{padding-right:0px;}
#main-navbar-list li a{display:block;text-decoration:none;color:#1a1a1a;padding:0 18px;}
#secondary-navbar li a{display:block;text-decoration:none;color:#fff;padding:0 18px;}
#main-navbar-list li a.navbar-active{color:#fff;background:#00adef;}
#secondary-navbar li a.navbar-active{color:#F1E400;}
#content-wrapper{padding-top:80px;padding-bottom:30px;min-height:92%;}
.ad{background-repeat:no-repeat;background-size:cover;background-position:center center!important;overflow:hidden!important;width:100%!important;margin:0;padding:0;height:438px;}
.ad-text-container{margin:100px 0 0 10%;vertical-align:middle;}
.description-text{padding-bottom:60px;}
.panel-no-bottom{padding:60px 10% 0 10%;}
.panel{padding:60px 10%;}
button{background-color:#00adef;font-family:"Microsoft YaHei","微软雅黑",Candara,Tahoma,SimSun !important;color:#fff;border:none;vertical-align:middle;text-align:center;font-size:26px;padding:14px 40px;*padding:7px 40px 8px 40px;*overflow:visible;transition:all 0.4s ease-in-out;}
button:hover{background-color:#008acb;cursor:pointer;transition:all 0.4s ease-in-out;}
.blue-button{background-color:#00adef;}
.gray-button{background-color:#c7c7c7;}
.gray-button:hover{background-color:#999;}
.orange-button{background-color:#ffa200;}
.orange-button:hover{background-color:#d88900;}
.header1{font-size:58px;padding-bottom:10px;}
.header2{font-size:44px;}
.header3{font-size:22px;}
.header4{font-size:16px;}
.description-text{font-size:16px;margin-left:5px;}
h1,h2,h3,h4{text-align:left;margin:0;font-weight:400;}
h1{font-size:58px;}
h2{font-size:30px;}
h3{font-size:20px;}
h4{font-size:16px;}
a{text-decoration:none;color:#469acb;}
a:hover{color:#1a1a1a;cursor:pointer;}
*:focus{outline:0;}
form{margin:0;}
textarea{font-size:16px;padding:14px;border:#cfcfcf 1px solid;resize:none;}
textarea:focus{border:1px solid #000;}
input{height:34px;border:#cfcfcf 1px solid;padding-left:4%;padding-right:8%;font-size:16px;font-family:"Microsoft YaHei","微软雅黑",Candara,Tahoma,SimSun !important;}
input:focus{border:1px solid #000;}
input[type="submit"]::-moz-focus-inner{border:0;}
::-webkit-input-placeholder{font-family:"Microsoft YaHei","微软雅黑",Candara,Tahoma,SimSun !important;font-weight:100;color:#999;}
::-moz-placeholder{font-family:"Microsoft YaHei","微软雅黑",Candara,Tahoma,SimSun !important;font-weight:100;color:#999;}
/* firefox 19+ */
:-ms-input-placeholder{font-family:"Microsoft YaHei","微软雅黑",Candara,Tahoma,SimSun !important;font-weight:100;color:#999;}
/* ie */
input:-moz-placeholder{font-family:"Microsoft YaHei","微软雅黑",Candara,Tahoma,SimSun !important;font-weight:100;color:#999;}
img.center{display:block;margin-left:auto;margin-right:auto;}
#footer-wrapper{width:100%;clear:both;position:relative;z-index:10;/*height:380px;*/
margin-top:-30px;text-align:center;background:#f9f9f9;}
#footer-header{height:70px;line-height:70px;font-size:24px;text-align:center;color:#fff;background-color:#92949b;}
#footer-header >div a{color:#fff;text-decoration:none;font-size:24px;}
#footer-header div{margin-left:85px;display:inline-block;}
.footer-phone{margin-left:-5px !important;}
#footer-header img{position:relative;top:7px;}
#footer-content{padding:2% 9.5% 0;}
.footer-list{display:inline-block;margin-left:8%;text-align:left;color:#6a737b;}
.footer-list dt{color:#6a737b;font-size:14px;line-height:25px;}
.footer-list dt >a{color:#6a737b;}
.footer-list >h4{color:#333;}
#footer-bottom{color:#6a737b;font-size:12px;padding:10px 0 25px 0;/*text-align:right;background-color:#f5f5f5;position:relative;right:3px;*/
}
.imgWrap{width:1001px;margin:0 auto;position:relative;}
.imgWrap img{display:block;}
/*-- 2014.8.19 New --*/
ul,li{list-style-type:none;}
img{border:none;}
body{overflow-x:hidden;}
#ag-header-wrap{width:100%;height:60px;background:#f4f4f4;border-bottom:1px solid #c6c6c6;}
.ag-header{width:1002px;height:60px;position:relative;margin:0 auto;font-family:'Microsoft YaHei';}
.ag-header a.ag-header-homeLink{display:block;width:100px;height:60px;float:left;}
.ag-header ul{float:left;}
.ag-header ul li{height:60px;float:left;margin-left:20px;position:relative;}
.ag-header ul li:hover .ag-header-nav{display:block;}
.ag-header ul li:hover a{color:#469acb;}
.ag-header ul li > a{display:block;height:60px;line-height:64px;font-size:16px;color:#333;text-align:left;}
.ag-header ul li.current-page > a{color:#469acb;}
.ag-header ul li .ag-header-nav{display:none;background:#f4f4f4;border:1px solid #c6c6c6;border-top:none;border-radius:0 0 8px 8px;padding-bottom:5px;position:absolute;left:-10px;z-index:99999;}
.ag-header ul li .ag-header-nav a{display:block;height:34px;line-height:24px;color:#333;text-align:left;padding:0 10px;white-space:nowrap;}
.ag-header ul li .ag-header-nav a:hover{color:#469acb;}
.ag-header .ag-header-login{height:32px;float:right;padding:14px 0;}
.ag-header .ag-header-login a{display:block;width:auto;height:32px;float:left;margin-left:10px;}
/* modify by chonggao for header with date 2015/02/05 */
.ag-header .ag-header-login a.ag-header-login-btn{height:23px;line-height:23px;font-size:14px;color:#fff;text-align:center;margin-top:5px;padding:0 15px;border-radius:12px;background:#469acb;}
.ag-header .ag-header-login a img{width:28px;height:28px;display:block;float:left;position:relative;z-index:1;top:3px;}
.ag-header .ag-header-login a span{width:1px;height:23px;line-height:22px;font-size:14px;color:#fff;text-align:left;text-indent:10px;float:left;margin:5px 0 0 -7px;background:#707070;border-radius:0 12px 12px 0;white-space:nowrap;overflow:hidden;}
/*modify end*/
#ag-container{width:100%;margin:0px;background:#f1f1f1;font-family:'Microsoft YaHei';color:#262626;}
.ag-container-wrap{width:1002px;height:auto;position:relative;margin:0 auto;font-family:'Microsoft YaHei';}
#ag-footer{width:100%;clear:both;padding:0px;font-family:'Microsoft YaHei';position:relative;background:#f5f5f5;border-top:74px solid #ccd0d9;}
.ag-footer-top{width:1002px;height:48px;position:absolute;top:-74px;left:50%;margin-left:-500px;padding:13px 0;}
.ag-footer-top a{display:block;height:48px;line-height:48px;float:left;margin:0px;padding-left:54px;font-size:28px;color:#000;text-align:left;white-space:nowrap;background-image:url('http://static.agrant.cn/static/images/ag-icon_bc1916c.png');background-repeat:no-repeat;background-position:left;}
.ag-footer-top a.ag-footer-top-phone{width:180px;background-position:left 0px;cursor:default;}
.ag-footer-top a.ag-footer-top-mail{width:284px;margin-left:130px;background-position:left -48px;}
.ag-footer-top a.ag-footer-top-msg{width:116px;margin-left:130px;background-position:left -96px;}
.ag-footer-middle{width:810px;margin:0 auto;padding:30px 0 20px 192px;position:relative;background-image:url('http://static.agrant.cn/static/images/ag-logo-footer_8407831.png');background-repeat:no-repeat;background-position:left 30px;overflow:hidden;}
.ag-footer-middle ul{display:block;float:left;margin-left:100px;position:relative;}
.ag-footer-middle ul li{height:24px;line-height:24px;font-size:12px;color:#556173;}
.ag-footer-middle ul li:first-child{font-size:16px;margin-bottom:10px;}
.ag-footer-middle ul li a{font-size:12px;color:#556173;}
.ag-footer-middle ul li a:hover{color:#469acb;text-decoration:underline;}
.ag-footer-bottom{width:1002px;height:20px;line-height:20px;margin:0 auto;padding-bottom:15px;font-size:12px;color:#999;text-align:right;}
.ag-content-title{width:100%;height:115px;background:#f1f1f1;border-top:1px solid #d4d4d4;border-bottom:1px solid #d4d4d4;position:relative;text-align:center;}
.ag-content-title img.point{position:absolute;bottom:-25px;left:50%;margin-left:-15px;z-index:1;}
.temp-return{padding:0 10% 30px 10%;}
.temp-help{background-color:white !important;color:gray!important;border:1px solid gray;}
.temp-help:hover{border:1px solid #ffae22 !important;color:#ffae22 !important;}
/*-- 2014.8.19 New --*/
分享到QQ
分享到微博
微信扫一扫
