jquery图标导航控制滑动门上下滚动切换

2019-09-11 郑州网站建设  

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

<html xmlns="">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>jquery图标导航控制滑动门上下滚动切换</title>

<meta name="keywords" content="jquery特效,滑动门,滑动选项卡,滚动切换,图标选项卡" />

<meta name="description" content="jquery图标导航控制滑动门上下滚动切换js特效代码。" />

</head>

 

<body>

 

<style type="text/css">

*{margin:0;padding:0;list-style-type:none;}

a, img{border:0;}

body{font:12px/180% "微软雅黑", Arial, Helvetica, sans-serif;}

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td, font {padding:0;margin: 0;font-family:"微软雅黑", Arial, Helvetica, sans-serif; font-size:12px;}

table {border-collapse:collapse;border-spacing:0;}

fieldset, img {border:0;vertical-align:top;}

h1, h2, h3, h4, h5, h6 {font-weight:normal;font-size:100%;}

ol, ul, li, dl, dt, dd {list-style:none;}

input, button, textarea, checkbox, select, radio, form {vertical-align:top;}

a{color:#333; text-decoration:none;outline:none; }

a:link,a:visited{ text-decoration:none;}

a:hover{ text-decoration:none;}

a:focus { -moz-outline-style: none; }

area{blr:expression(this.onFocus=this.blur()); } /* 图片热点去掉点击链接时的虚线外框 */

a:focus{-moz-outline-style: none; /* FF去掉点击链接时的虚线外框 */}

p{ line-height:24px;text-align:justify; color:#333;}

i, em{font-style:normal;}

.l{float:left;}

.r{float:right;}

img{border: medium none;}

.clear {font-size:0;line-height:0;clear:both;overflow:hidden;zoom:1;}

.blank {height:10px;font-size:0;line-height:0;clear:both;overflow:hidden;}

.blank2 {height:20px;font-size:0;line-height:0;clear:both;overflow:hidden;}

body{ background:#f8f8f8;}

/*样式格式化 END*/

 

 

/* film_focus */

.film_focus{width:1200px;overflow:hidden;position:relative;margin:20px auto; height:432px; border-top:solid 4px #aacf53;}

.film_focus .film_focus_imgs_wrap{background:url(images/load.gif) no-repeat center center;width:1003px; float:right; overflow:hidden;height:430px;}

.film_focus ul.film_focus_imgs{height:auto;position:absolute;right:0;overflow:hidden;width:1003px;}

.film_focus ul.film_focus_imgs li{overflow:hidden; height:430px;width:1003px;height:auto; bottom:0; margin:5px 0;}

.film_focus ul.film_focus_imgs li img{height:205px;width:324px;}

.film_focus ul.film_focus_nav{width:193px;position:absolute;left:0;top:0;z-index:100;}

.film_focus ul.film_focus_nav li{width:170px;height:107px;left:0px;padding:0px 10px;word-break:break-all;color:#aacf53;font-size:22px;overflow:hidden;line-height:105px; background:#fff; border-left:solid 1px #d7d7d7; border-right:solid 2px #aacf53; border-bottom:solid 1px #d7d7d7;}

.film_focus ul.film_focus_nav li.cur{width:170px;left:0px;padding:0px 10px;word-break:break-all;color:#fff;overflow:hidden;line-height:105px; background:#aacf53; cursor:pointer; border-left:solid 1px #aacf53; border-right:solid 2px #aacf53;border-bottom:solid 1px #aacf53;}

.film_focus ul.film_focus_nav li b{display:none;height:105px;width:170px;float:left;}

.film_focus ul.film_focus_nav li span img{ float:left; margin:35px 10px 0 10px;}

.film_focus ul.film_focus_nav li b p img{ float:left; margin:35px 10px 0 10px;}

.film_focus ul.film_focus_nav li.cur b{ font-weight:100;}

 

.film_focus ul.film_focus_nav li span.zhanl img{ float:left; margin:42px 10px 0 10px;}

.film_focus ul.film_focus_nav li b p{ line-height:105px; font-size:22px; color:#fff;}

.film_focus ul.film_focus_nav li b.zhanl p img{ float:left; margin:42px 10px 0 10px;}

.film_focus ul.film_focus_nav li p{ line-height:105px; color:#aacf53; font-size:22px;}

 

.film_focus ul.film_focus_nav li span.huod img{ float:left; margin:25px 10px 0 10px;}

.film_focus ul.film_focus_nav li b.huod p img{ float:left; margin:25px 10px 0 10px;}

 

.film_focus ul.film_focus_nav li.cur b{display:block;vertical-align: middle;display: table-cell;height:105px;width:170px;float:left;}

.film_focus ul.film_focus_nav li.cur span{display:none;}

 

.film_focus ul.film_focus_nav li b p{ font-size:22px;}

 

.film_focus_imgs li dl dd{float:left;width:324px; height:205px; margin:0px 0 10px 10px; }

.film_focus_imgs li dl dd a{ width:324px; height:205px; display:block;}

.film_focus_imgs li dl dd a .mouse_s{width:324px; height:205px;}

.film_focus_imgs li dl dd a .mouse_s p{width:100%;bottom:40px; position:relative; line-height:40px; background:#d2d2d2; color:#333; font-size:14px; text-align:center;}

.film_focus_imgs li dl dd a .hover_s{width:324px; height:205px; position:relative;top:-990px;}

.film_focus_imgs li dl dd a .hover_s p{ background:#d2d2d2; color:#333; font-size:14px; text-align:center;}

.film_focus_imgs li dl dd a:hover .hover_s{ display:block; height:205px;top:-205px;}


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/seo/1932.html转载请标明出处,谢谢合作!
标签:
  • HTML
  • Doctype
  • !
  • jQuery
  • л
  • public