jquery角色选择交互效果代码
代码语言：html
所属分类：布局界面
代码描述：jquery角色选择交互效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
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 --*/
#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('//repo.bfw.wiki/bfwrepo/images/huodong/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('//repo.bfw.wiki/bfwrepo/images/huodong/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;
}
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0