爱意两存

[置顶]阿童木渐隐渐现返回顶部效果

at15cm | 设计 | 2012.12.26

您在本站浏览的时候，当您往下查看网页内容，右侧下部会出现一张阿童木的图片，点击后，会返回页面顶部。实现效果其实非常的简单。

这里用到了jQuery技术来实现此渐隐渐显的返回顶部效果。

我们只需要定义一段CSS样式和两段JS代码即可实现此效果。

让人不得不爱的22个UI进度条设计

at15cm | 设计 | 2013.12.10

当你进入页面加载时而小小的的等待中，美丽的界面设计是否能给你带来一瞬间的惊叹，让你再也不觉得等待是漫长的。精致的细节，往往是最能考验设计师的技术，但同时也是最能打动人心的。今天我们就来看看下面的22个让人不得不爱的UI进度条设计。希望大家能够喜欢，一起来享受这一瞬间的美丽吧！

Stone Progress Bar

Marshmallow Loader Bar

阅读全文

JS判断移动端访问设备并解析对应CSS

at15cm | 设计 | 2013.11.27

JS判断不同web访问环境，主要针对移动设备，提供相对应的解析方案。

直接看 Mobile_demo

// 判断是否为移动端运行环境
// wukong.name 20130716
if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))){
if(window.location.href.indexOf("?mobile")<0){
try{
if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)){
// 判断访问环境是 Android|webOS|iPhone|iPod|BlackBerry 则加载以下样式
setActiveStyleSheet("style_mobile_a.css");
}
else if(/iPad/i.test(navigator.userAgent)){
// 判断访问环境是 iPad 则加载以下样式
setActiveStyleSheet("style_mobile_iPad.css");
}
else{
// 判断访问环境是 其他移动设备 则加载以下样式
setActiveStyleSheet("style_mobile_other.css");
}
}
catch(e){}
}
}
else{
// 如果以上都不是，则加载以下样式
setActiveStyleSheet("style_mobile_no.css");
}
// 判断完毕后加载样式
function setActiveStyleSheet(filename){document.write("＜link href="+filename+" rel=stylesheet＞");}