jQuery实现的图标导航上下滚动切换效果源码.zip资源-CSDN文库

共12个文件

png：9个

jpg：1个

js：1个

版权申诉

jquery

37 浏览量 2022-11-07 23:56:27 上传评论收藏 178KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

jQuery实现的图标导航上下滚动切换效果源码.zip （12个子文件）

132686994891880932

images

show1.png 1KB

chse.png 116KB

show1_hover.png 1KB

show2_hover.png 2KB

show3.png 3KB

show2.png 3KB

show4.png 2KB

show4_hover.png 2KB

cp.jpg 17KB

show3_hover.png 2KB

index.html 13KB

jquery.js 83KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery图标导航上下滚动切换</title> </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;} .film_focus_imgs li dl dd a:hover .hover_s p{width:100%; text-align:center;bottom:40px; line-height:40px; background:none;position:relative; font-size:14px; color:#fff;} </style> <div class="film_focus"> <div class="film_focus_desc"> <ul class="film_focus_nav"> <li class="cur"><b class="zhanl"><p><img src="images/show1_hover.png" />展览展示</p></b><span class="zhanl"><p><img src="images/show1.png" />展览展示</p></span></li> <li><b class="huod"><p><img src="images/show2_hover.png" /></p>活动策划</b><span class="huod"><p><img src="images/show2.png" />活动策划</p></span></li> <li><b><p><img src="images/show3_hover.png" /></p>商业设计</b><span><p><img src="images/show3.png" />商业设计</p></span></li> <li><b><p><img src="images/show4_hover.png" /></p>增值服务</b><span><p><img src="images/show4.png" />增值服务</p></span></li> </ul> </div> <div class="film_focus_imgs_wrap"> <ul class="film_focus_imgs"> <li> <dl> <dd><a href="#"><div class="mouse_s"><img src="images/cp.jpg" /><p>1瑞马公司</p></div><div class="hover_s"><img src="images/chse.png" /><p>1瑞马公司</p></div></a></dd> <dd><a href="#"><div class="mouse_s"><img src="images/cp.jpg" /><p>展览项目</p></div><div class="hover_s"><img src="images/chse.png" /><p>展览项目</p></div></a></dd> <dd><a href="#"><div class="mouse_s"><img src="images/cp.jpg" /><p>管理展台</p></div><div class="hover_s"><img src="images/chse.png" /><p>管理展台</p></div></a></dd> <dd><a href="#"><div class="mouse_s"><img src="images/cp.jpg" /><p>展示精典</p></div><div class="hover_s"><img src="images/chse.png" /><p>展示精典</p></div></a></dd> <dd><a href="#"><div class="mouse_s"><img src="images/cp.jpg" /><p>投标历史</p></div><div class="hover_s"><img src="images/chse.png" /><p>投标历史</p></div></a></dd> <dd><a href="#"><div class="mouse_s"><img src="images/cp.jpg" /><p>展台设计</p></div><div class="hover_s"><img src="images/chse.png" /><p>展台设计</p></div></a></dd> </dl> </li> <li> <dl> <dd><a href="#"><div class="mouse_s"><img src="images/cp.jpg" /><p>2瑞马公司</p></div><div class="hover_s"><img src="images/chse.png" /><p>2瑞马公司</p></div></a></dd> <dd><a href="#"><div class="mouse_s"><img src="images/cp.jpg" /><p>展览项目</p></div><div class="hover_s"><img src="images/chse.png" /><p>展览项目</p></div></a></dd> <dd><a href="#"><div class="mouse_s"><img src="images/cp.jpg" /><p>管理展台</p></div><div class="hover_s"><img src="images/chse.png" /><p>管理展台</p></div></a></dd> <dd><a href="#"><div class="mouse_s"><img src="images/cp.jpg" /><p>展示精典</p></div><div class="hover_s"><img src="images/chse.png" /><p>展示精典</p></div></a></dd> <dd><a href="#"><div class="mouse_s"><img src="images/cp.jpg" /><p>投标历史</p></div><div class="hover_s"><img src="images/chse.png" /><p>投标历史</p></div></a></dd> <dd><a href="#"><div class="mouse_s"><img src="

评论收藏

内容反馈

版权申诉