jQuery文字上下滑动切换代码.zip资源-CSDN文库

共6个文件

js：2个

css：2个

jpg：1个

版权申诉

javascript

html5

jQuery

65 浏览量 2022-11-22 17:15:43 上传评论收藏 48KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

jQuery文字上下滑动切换代码.zip （6个子文件）

jQuery文字上下滑动切换代码

jiaoben3630

css

reset.css 774B

style.css 737B

index.html 2KB

index.js 917B

jquery-1.8.3.min.js 91KB

jQuery文字上下滑动切换代码.jpg 18KB

<!DOCTYPE html> <html > <head> <meta charset="gb2312"> <title>jQuery文字上下滑动切换代码 - 网页模板</title> <link rel="stylesheet" href="css/reset.css"> <style> body { background: rgb(191, 76, 76); } /* slider ----------------------*/ .slide-wrap { margin: 5% auto 0; width: 50%; } .slide-mask { position: relative; overflow: hidden; height: 130px; } .slide-group { position: absolute; top: 0px; left: 0; width: 100%; } .slide { height: 130px; font: 100 90px/135px "lato"; font-size: 2em; color: #fff; text-align: center; text-transform: uppercase; } /* nav ----------------------*/ .slide-nav { text-align: center; } .slide-nav ul { margin: 0; padding: 0; } .slide-nav li { display: inline-block; width: 10px; height: 10px; background: rgb(175, 56, 56); cursor: pointer; margin-left: .5em; } .slide-nav li.current { background: rgb(144, 39, 39); } </style> </head> <body> <div class="slide-wrap"> <div class="slide-mask"> <ul class="slide-group"> <li class="slide">网页模板</li> <li class="slide">jQuery特效</li> <li class="slide">CSS3特效</li> <li class="slide">HTML5特效</li> <li class="slide">厚朴网络</li> </ul> </div> <div class="slide-nav"> <ul> <li class="bullet"></li> <li class="bullet"></li> <li class="bullet"></li> <li class="bullet"></li> <li class="bullet"></li> </ul> </div> </div> <script src='js/jquery-1.8.3.min.js'></script> <script src="js/index.js"></script> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> <p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p> <p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p> </div> </body> </html>

评论收藏

内容反馈

版权申诉