更新了下页面底部

文章目录[隐藏] WPJAM TOC

好久没更新啦,都快没有存在感了~期末考试还有两科求不挂2333 OS和DB (-。-;)

很久以前,在还没有加上那个“滑动导航”时,我在页面底部加了个返回顶部,可是只有精确点击文字才有效果2333,今天起晚了没去自习,打开网页看到了很不爽,改改改 = =

原来的代码:

感觉写的好傻啊(-。-;)
去掉p标签,用a标签(行内标签)然后样式设为block,这样就和p一样的效果了。为了看起来像个按钮,加上padding 1%,就不止一行的行高啦,整个a标签范围都可以点击,不需要精确地点这四个字= =。再添加了背景颜色为主题色。去掉了center标签,使用text-align居中文字,再加粗下文字。然后变成了这样:

不过好像还是好丑2333

返回顶部按钮
返回顶部按钮

后来加上了页面右边的‘返回顶部-查看评论-滚到底部’的东西,原来在哪里扒的代码已经忘了(-。-;),这个‘滑动导航’有好几种版本,我当时抄的是不太好的版本,下拉页面时这个导航条会一直滚动= = 后来看其他的版本有改了一下样式,固定(position:fixed)了它。

注:
animate用法:
animate() 方法执行 CSS 属性集的自定义动画。
该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的,这样就可以创建动画效果。
语法1:$(selector).animate(styles,speed,easing,callback)
语法2:$(selector).animate(styles,options)
style:必须,规定产生动画效果的 CSS 样式和值。其他:可选。
see:http://www.w3school.com.cn/jquery/effect_animate.asp

offset() 方法返回或设置匹配元素相对于文档的偏移(位置)。
http://www.w3school.com.cn/jquery/css_offset.asp

为了调整在各种分辨率下的位置,当时也真是耐心o(^▽^)o一点一点地拉动Chrome的边框大小= =:

刚刚发现还有一个问题,我想当悬浮在向上位置能自动(慢速)滚动向上,移开时停止滚动,点击时像现在一样(快速),刚刚只是简单地把click改为了hover,然后我想去吃饭了发现效果不对就改回来了。。求指教帮忙实现 [/可爱]

哦对了,还有一个小修改,就是那个©2011-2014,2015都大半年了还是显示2014,索性一劳永逸,使用the_time(format)函数
format为字符串,Y表示年份,m表示带前导0月份,d带前导0日期。the_time(‘Y-m-d’);就是当期日期
see: http://www.jb51.net/cms/39149.html


期末考试期间也来更新文章真是…不说了我要去吃饭然后去预习操作系统、数据库、 [/流泪]


“更新了下页面底部”的14个回复

Loading...
  1. 我来交作业,添加实现鼠标悬停页面缓慢上滚的代码段(已测可行)。替换你原代码为以下代码:
    jQuery(document).ready(function() {
    /* 咸菜一点米追加的代码段开始 */
    var xcy_me =0 ;
    //jQuery Script 的.hover方法
    $(‘#shang’).hover(function() {
    if(!xcy_me) {
    xcy_me= setInterval(function() {
    $(document).scrollTop($(document).scrollTop() -4) ;
    }, 44) ;
    }
    }, function() {
    if(xcy_me) {
    clearInterval(xcy_me) ;
    xcy_me =0 ;
    }
    } ) ;
    /* 咸菜一点米追加的代码段结束 */
    $(‘#shang’).click(function() {
    $(‘html,body’).animate({ scrollTop: ‘0px’ }, 1000) ;
    } ) ;
    $(‘#comt’).click(function() {
    $(‘html,body’).animate({ scrollTop: $(‘#comments’).offset().top -45 }, 1300) ;
    } ) ;
    $(‘#xia’).click(function() {
    $(‘html,body’).animate({ scrollTop: $(‘.site-info’).offset().top }, 1000) ;
    } ) ;
    } ) ;

发表评论

电子邮件地址不会被公开。 必填项已用*标注