分类目录归档:前端开发

web前端设计开发及相关资讯。

超简单的 jQuery 返回顶部按钮

simple jquery back to top button

为了增加网站的浏览体验,很多人都喜欢在页面中添加一个快速“返回顶部”的按钮,实现这个按钮的方法有很多,今天介绍一个利用 jQuery 实现返回顶部的超简单的方法。

简单功能

  • 当窗口向下滚动一定距离后,显示顶部按钮
  • 点击按钮返回页面顶部

jQuery 代码

$(document).ready(function(){
    // 页面向下滚动超过300px时按钮显示,否则隐藏
    $(window).scroll(function(){
    if($(this).scrollTop()>300){
    $('.back-to-top').fadeIn(100);
    } else {
    $('.back-to-top').fadeOut(100);
    }
    });
    // 点击按钮,向上动画滚动
    $('.back-to-top').click(function(event){
    event.preventDefault();
    $('html,body').animate({scrollTop:0},500);
    })
});

HTML 与 CSS

HTML 很简单,在页面底部(你想要的地方)添加一个 class="back-to-top"div 容器,里面可以添加你想要显示的文字或图标。

<div class="back-to-top">
    <span>返回顶部</span>
</div><!-- /.back-to-top -->

CSS 样式可以根据你的喜好自己设置,这里提供一个我使用的样式供大家参考。

.back-to-top {
    position: fixed;
    bottom: 3em;
    right: 3em;
    background-color: rgba(46, 46, 46, 0.8);
    text-align: center;
    padding: 10px 12px;
    color: #eee;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    cursor: pointer;
    display: none;
}

.back-to-top:hover {
    background: rgba(0, 221, 255, 0.8);
}

特别提出需要设置 position:fixed,这样按钮会跟随页面滚动。

OK!搞定,是不是很简单?

修复Ubuntu 13.04下ReText工具栏图标丢失

ReText是Linux系统下一个轻量、好用的免费MarkDown编辑器,但是在Ubuntu(13.04)下安装完成后存在一个BUG:工具栏图标无法正常显示,仅能正常显示文本missing toolbar icons 这应该是ReText引用图标主题错误造成的,在Google的帮助下,可以通过修改ReText配置文件来修复这个BUG,具体方法如下:

首先,我们需要找到ReText的配置文件ReText.conf,路径为:

 ~/.config/ReText project/ReText.conf

Note

如果ReText.conf不存在,可以根据上述路径自行创建;

如果不是root,可能因为用户权限的问题,无法找到配置文件,可以通过这个命令打开目录:sudo nautilus ~/.config

找到之后,使用文本编辑器打开ReText.conf,并添加下面几行:

[General]
iconTheme=Humanity

现在再打开ReText试试看问题是不是解决了!

fix missing toolbar icons

为你的网站添加iPhone/iPad主屏幕图标

add-web-icon-to-home-screen

有没有想过将你的网站书签以图标的形式添加到iPhone或iPad的桌面上呢?默认情况下,iOS端的Safari浏览器的“添加至主屏幕”会将网站的截图当作图标添加到桌面上。如何定义这个图标呢?其实很简单, iOS 的网页图标与传统的网页 favicon 相似,只需要在header中添加几行代码就搞定了。

设计图标

首先,我们需要设计一个图标,设计完成后保存为png格式, 命名为 apple-touch-icon.png 或者 apple-touch-icon-precomposed.png。

指定图标路径

在header中添加以下代码:

[php]<link rel="apple-touch-icon" href="图标路径"/>[/php]

不同的iOS设备使用的图标大小不一样,你可以参考Apple说明文档分别自定义各种设备的图标。

图标效果

默认情况下,iOS图标的会自动添加以下效果:

  • 圆角
  • 阴影
  • 高光

圆角和阴影是iOS图标的必有效果,所以我们无需对图片做太多处理,提供符合尺寸的正方形图片即可;但高光效果可以选择的, 如果图标带有 -precomposed 后缀 (如: apple-touch-icon-precomposed.png), 系统就不会为你的图标加上高光效果。

WordPress 3.5正式版存在缓存BUG?

wordpress-elvin

博客升级WordPress 3.5已经有两天了,这两天一直被一个问题折腾着:

每次后台数据修改,包括文章修改、插件启用/停用、主题启用、分类目录修改等,更新之后浏览器(Chrome)总是不能及时的呈现,甚至是后台新发布文章后,首页竟然无法显示新发布文章,显示的仍然还是更新之前的数据。

但是实际上这些操作已经生效了,因为我试着清空浏览器的本地缓存后,之前更新的数据就能够显示了。由此可以说明wordpress数据存在严重的后台“缓存”更新“延迟”

是浏览器的问题吗?NO。除了Chrome外,我又试了几个不同的浏览器,Firefox、Safari、IE10.0都存在这样的问题,应该不是浏览器的问题。

在逐一排除了浏览器、插件、主题的问题之后,我询问了主机提供商是不是主机的问题。很快便得到回复确认是wordpress3.5正式版存在的BUG。

阅读全文

视频

WordPress升级3.5:全新主题 全新UI

 

12日wordpress开发团队发布了wordpress 3.5 ,并且为其命名为“ELVIN”,献给鼓手 Elvin Jones 等。新版本带来了全新的主题、全新的后台管理界面UI,当然最大的改变是带来了全新的多媒体管理功能。上述视频为wordpress 3.5的官方宣传视频,从中我们可以看出新版本的主要变化:

一、全新的多媒体管理功能

media — WordPress

在3.5中媒体库是变化最彻底的一个功能,可以通过鼠标拖拽就能一次上传多张图片,并且图片的属性信息修改起来也更加方便,同时,创建相册相当简洁,通过简单的拖拉图片就可以重新调整相册图片顺序,整理相册。

阅读全文

链接

icon web font:资源下载站

icon web font已经越来越多地被使用在网页开发中,icon web font使用方便、自由,并且不会像图片类图标一样占用较大空间。推荐一个超赞的icon web font资源下载站:fontello.com 。有近1200种图标可供下载,并且可以自选尺寸,一键式打包下载。

下载的压缩包里包含有Demo文件、CSS样式及Font文件。

Fontello.com网站地址:http://fontello.com/
 

九个常用的CSS属性

一、圆角效果

HTML5的优势之一,就是之前必须用图片实现的元素,现在可以用代码来实现。“border-radius”是实现这一功能的一个重要的属性,可以用来直接定义HTML元素的圆角,并且被所有现代浏览器支持。

CSS代码

[css]border-radius: 10px; /* CSS3 Property */
-moz-border-radius: 10px; /* Firefox */
-webkit-border-radius: 10px; /* Chrome/Safari */
-khtml-border-radius: 10px; /* Linux browsers */[/css]

二、阴影效果

通过CSS3的box-shadow属性可以非常方便地实现阴影效果。

CSS代码

[css]#myDiv{
-moz-box-shadow: 20px 10px 7px #ccc;
-webkit-box-shadow: 20px 10px 7px #ccc;
box-shadow: 20px 10px 7px #ccc;
}[/css]

三、@media属性

Media属性用于设置同一样式表在不同屏幕下的样式,可以在属性值中指定应用此样式的介质或媒体。

CSS代码

[css]@media screen and (max-width: 480px){
/* 网页在宽度为480px屏幕上的显示样式 */
}[/css]

也可以使用@media print属性指定打印预览的样式:

[css]@media print
{
p.content { color: #ccc }
}[/css]

阅读全文