某某茶叶有限公司欢迎您!
金沙棋牌在线 > 服务器&运维 > 基于jquery实现页面滚动时顶部导航显示隐藏_jquery_脚本之家

基于jquery实现页面滚动时顶部导航显示隐藏_jquery_脚本之家

时间:2019-11-29 02:56

已经有两年多没登陆csdn账号了,中间做了些旁的事,可是现在却还是回归程序,但改做前端了,虽然很多东西都已忘得差不多了,但还是应该摆正心态,慢慢来,在前端漫游,做一只快乐双鱼。 路是一步一步走出来的,知识是一点一滴积累的,记录是笔财富,来吧,一起学着总结做笔记。 这几天在写后台文章的一些页面,为了能得到更好的交互性,需要做一些效果,js无疑使不二之选,但由于浏览器的兼容性一直差强人意,所以选用jquery框架,通过css样式、dom节点以及自身所带函数就可以实现比较好的用户体验,此案例有三个功能点。分别为: 1.利用jquery自身的toggle()函数实现层的隐藏与显示动画; 2.仿新浪、腾讯微博输入框字符动态递减效果; 3.实现几个导航按钮切换不同的内容,类似tab; 以下为所有代码: 复制代码 代码如下:

效果图:

本文实例讲述了jquery实现页面滚动时顶部导航显示隐藏效果代码。分享给大家供大家参考。具体如下:运行效果截图如下:

用jquery实现两个table的显示与隐藏

代码如下:

引入核心文件

* 栏目 ---全部栏目---
* 标题 剩余40个字
缩略图:
jQuery输入框密码显示隐藏代码@font-face {font-family: "iconfont"; src: url; /* IE9*/ src: url('iconfont.eot?#iefix') format, /* IE6-IE8 */ url format, /* chrome、firefox */ url format, /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('iconfont.svg#iconfont') format; /* iOS 4.1- */}.iconfont { font-family:"iconfont" !important; font-size:16px; font-style:normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale;}.icon-suoyoulianxiren:before { content: "e600"; }.icon-suo:before { content: "e606"; }.icon-wo2:before { content: "e601"; }.icon-sousuo:before { content: "e619"; }.icon-shezhi:before { content: "e602"; }.icon-wo01:before { content: "e603"; }.icon-bofang:before { content: "e622"; }.icon-yanjing:before { content: "e627"; }.icon-bianjimingpianline37:before { content: "e604"; }.icon-wodemingpianline:before { content: "e605"; }.icon-yirenzheng:before { content: "e608"; }.icon-shenqingjieshourenwu:before { content: "e609"; }.icon-jinlingyingcaiwangtubiao53:before { content: "e60a"; }.icon-jinlingyingcaiwangtubiao11:before { content: "e621"; }.icon-qiyerenzheng:before { content: "e60b"; }.icon-dingwei:before { content: "e60c"; }.icon-xiala:before { content: "e61a"; }.icon-shangla:before { content: "e61b"; }.icon-shoujirenzheng:before { content: "e60d"; }.icon-yanjingkai:before { content: "e624"; }.icon-filter:before { content: "e61c"; }.icon-shoucang:before { content: "e607"; }.icon-shoucang1:before { content: "e61d"; }.icon-youjiantou:before { content: "e61e"; }.icon-yonghukong:before { content: "e620"; }.icon-fanhui:before { content: "e618"; }.icon-auth:before { content: "e60e"; }.icon-shanchu:before { content: "e623"; }.icon-xiangji:before { content: "e626"; }.icon-xueli111:before { content: "e611"; }.icon-gongzuoshijian:before { content: "e612"; }.icon-gongzuojingyandl:before { content: "e613"; }.icon-fujin1:before { content: "e614"; }.icon-fujin2:before { content: "e615"; }.icon-xiaoxi1:before { content: "e60f"; }.icon-xiaoxi2:before { content: "e610"; }.icon-shouye1:before { content: "e616"; }.icon-shouye2:before { content: "e617"; }.icon-dianhua1:before { content: "e61f"; } * { padding: 0; margin: 0; }body { background: #f2f2f2; font-family:"微软雅黑"; min-width: 320px; max-width: 640px; margin: 0 auto; }ul, li { list-style: none; }i, em { font-style: normal; }img { border: none; margin: 0; padding: 0; }a { text-decoration: none; color: #333; }a:focus { outline: none; }.clear { clear: both }.clear_wl:after { content: "."; height: 0; visibility: hidden; display: block; clear: both; }.fl { float: left }.fr { float: right }.text_c { text-align: center; }/*主色调*/ .bule_color { color: #00b4c9; }/*辅助色*/.hs_color { color: #FE9F07; }.green_color { color: #85c860; }.c333 { color: #333; }.c666 { color: #666; }.c999 { color: #999; }.f10 { font-size: 0.5rem; }.f11 { font-size: 0.55rem; }.f12 { font-size: 0.6rem; }.f14 { font-size: 0.7rem; }.f16 { font-size: 0.8rem; }.f18 { font-size: 0.9rem; }.all_wap { width: 15.5rem; margin-left: 0.5rem; }.all_center_box { width: 15rem; margin: 0 auto; }.footheight { height: 2.4rem; }.mb5 { margin-bottom: 0.25rem; }/*三种头部样式111111111*/.heard_top { width: 100%; background: #00b4c9; color: #fff; position: relative; z-index: 2; height: 2.2rem; line-height: 2.2rem; }.heard_top .top_table { width: 15rem; margin: 0 auto; }.heard_top .top_table td { width: 50%; font-size: 0.6rem; }.heard_top .top_table td .dw_a_but { display: block; height: 2.2rem; color: #fff; width: 30%; }.heard_top .top_table td .map_dw { color: #fff; font-size: 0.7rem; }.heard_top .top_texte { position: absolute; z-index: 22; top: 0; left: 50%; text-align: center; width: 9.5rem; margin-left: -4.75rem; font-size: 0.8rem; }/**/.heard_top .top_texte .xieh_title_list{ width:7rem; margin:0 auto; border:1px solid #e6f8fa; border-radius:0.25rem; height:1.4rem; line-height:1.4rem; text-align:center; overflow:auto; margin-top:0.4rem;}.heard_top .top_texte .xieh_title_list li{ width:50%; float:left; }.heard_top .top_texte .xieh_title_list li a{ display:block;color:#e6f8fa; font-size:0.7rem;}.heard_top .top_texte .xieh_title_list li.on a{ background:#e6f8fa; color:#00b4c9;}/*1像素*/.scale { position: relative; }.scale:after { content: ""; position: absolute; bottom: 0px; left: 0px; right: 0px; border-bottom: 1px solid #ddd; -webkit-transform: scaleY; -webkit-transform-origin: 0 0; }/*底部*/.ky_footer { width: 100%; background: #f8f8f8; position: fixed; z-index: 999; bottom: 0; left: 0; overflow: hidden; /* border: 1px solid #cfcfcf;*/ }.ky_footer ul { width: 100%; height: auto; overflow: hidden; }.ky_footer ul li { float: left; width: 25%; padding: 0.2rem 0 }.ky_footer ul li a { font-size: 0.55rem; text-align: center; width: 100%; display: block; color: #949494; }.ky_footer ul li a i { font-size: 1.1rem; color: #949494; width: 100%; display: block; text-align: center; overflow: hidden; }.ky_footer ul li.selected i, .ky_footer ul li.selected a { color: #00b4c9 }a, button, input { -webkit-tap-highlight-color: rgba; }/* 1.去除android a/button/input标签被点击时产生的边框 2.去除ios a标签被点击时产生的半透明灰色背景 */.ky_footer .scale:after { content: ""; position: absolute; top: 0px; left: 0px; right: 0px; border-bottom: 1px solid #ddd; -webkit-transform: scaleY; -webkit-transform-origin: 0 0; }/*列表通用*/.wntj_list li { /*border-bottom:0.5px solid #e3e3e3;*/ font-size: 0.6rem; padding: 0.25rem 0.5rem 0.5rem 0; }.wntj_list li:last-child { border-bottom: none; }.wntj_list li h4 { overflow: hidden; height: auto; font-size: 0.7rem; margin-bottom: 0.25rem; font-weight: 400; }.wntj_list li p { height: auto; overflow: hidden; color: #333; margin-bottom: 0.25rem; }.wntj_list li .gsfl_tb { height: auto; }.wntj_list li .gsfl_tb span { font-size: 0.5rem; border: 1px solid #3D99FF; border-radius: 3px; color: #3D99FF; padding: 0 0.25rem; margin-right: 0.25rem; }/*图片模糊*/.blur_mh { filter: url; /* FireFox, Chrome, Opera */ -webkit-filter: blur; /* Chrome, Opera */ -moz-filter: blur; -ms-filter: blur; filter: blur; filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false); /* IE6~IE9 */}/*清空input内容*/.clear_input { display: none; position: absolute; width:0.8rem; height: 0.8rem; border-radius:50%; margin: 0.6rem 0 0 0.75rem; outline: none; background:#CCC ; font-size:0.6rem; color:#fff; text-align:center; }.ClearInput::-ms-clear { display: none; }.ClearInput:valid + .clear_input { display: inline; } body { background: #FFF; }/*表单样式*/.input_text { height: 2rem; border: none; text-align: right; color: #999; font-size: 0.7rem; }.placeholder { color: #999; text-align: right; }/*登陆注册*/.login_reg { margin-top: 1rem; }.login_reg li { background: #FFF; border: 1px solid #ddd; margin-bottom: 0.5rem; overflow: hidden; height: 2rem; }.login_reg li i { color: #999; font-size: 0.8rem; padding-left: 0.2rem; padding-right: 0.25rem; }.login_reg li .input_text_user { height: 2rem; border: none; text-align: left; color: #999; width: 11.5rem; font-size: 0.7rem; }.login_reg li .input_text_password { height: 2rem; border: none; text-align: left; color: #999; width: 11rem; font-size: 0.7rem; }.login_reg li .placeholder { color: #999; text-align: left; }.login_reg li .eyes_box { display: inline-block; width: 1.5rem; text-align: right; }.login_reg li .wenz { padding-left: 0.25rem; font-size: 0.7rem; color: #333; }.login_reg li .w180 { width: 9rem; margin-left: 1rem; }.login_reg .denglu_but { height: 2rem; line-height: 2rem; width: 15rem; display: block; font-size: 0.8rem; background: #00B4C9; color: #fff; border-radius: 0.25rem; text-align: center; margin: 1rem auto 0.25rem auto; } .input_text_user::-webkit-input-placeholder, .input_text_password::-webkit-input-placeholder {color:#999;}.input_text_user::-moz-placeholder, .input_text_password::-moz-placeholder {color:#999;}      x         登录  忘记密码   $ {//查看密码$.click{ if.attr{//明文 $.attr; $.html.parent.children; $.children; $.children.val.children; return; } if.attr{//密文 $.attr; $.html.parent.children; $.children; $.children.val.children; return; } });}); 

构建html,margint这个div中为了出现滚动条而建,并无实际作用。

自定义属性

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!

这是顶部导航条

首页头条推荐 首页焦点图推荐 视频首页每日热点 视频首页头条推荐 视频首页焦点图 首页图片推荐
栏目首页推荐 视频栏目精彩推荐 网站顶部推荐

写入CSS

TAG标签

.top-title {background:#e74c3c;color:white;font-size:24px;padding:5px;text-align:center;position: fixed;left:0;top:0;width:100%;transition: top .5s;}.hiddened{top: -90px;}.showed{top:0;z-index: 9999;}