通过JQuery实现win8一样酷炫的动态磁贴效果(示例代码)


Posted in Javascript onJuly 13, 2013

我个人表示非常喜欢微软新一代的产品,先不管它产品的成熟与否,但是它带来的是全新的产品。所谓全新,是指在用户体验上,苹果这些年的成功使得所有产品都在模仿它的界面,包括安卓在内,不知道大家的感觉如何,反正我是对这些圆角矩形产生了审美疲劳(苹果以及安卓的粉丝勿喷,这里仅仅是从界面上评价,事实上从整体上来说,微软还是有差距的),当年wp的推出让我眼前一亮,马上喜欢上了Metro风格的产品,直至今天wp8以及win8开始越来越成熟。

写的不好,欢迎各位看官指正批评,不欢迎无故猛喷。大神请绕道。

废话少说,进入正题。基本思想是:定义一个外层div,固定高度(例如本例中的180px)并设置属性overflow:hidden(隐藏超出边框的部分),然后在这个div里面定义一个内层div,并设置属性position:relative(采用相对布局)。在这个内层div里面,我们定义一张图片,注意要设置它的高度跟外层div高度一样(如本例中的180px),再定义一个div放文字,该div的高度也和外层div高度一样(如本例中的180px,如果你给了一个padding,则高度相应减小,以达到整个div是180px的高度)。布局代码如下所示
html:

<div id="outside">
    <div id="inside">
        <img width="180px" height="180px" src="http://xxxxxxxxx图片地址" />
        <div id="text">
            <span>通过JQuery实现win8一样酷炫的动态磁贴效果</span>
            <p>林宇</p>
            <p>我个人表示非常喜欢微软新一代的产品……</p>
        </div>
    </div>
</div>

css:
#outside
{
    height:180px;
    overflow:hidden;
}
#inside
{
    position:relative;
}
#text
{
    width:160px;
    height:160px;
    background:#0000ff;
    padding:10px;
    color:#fff;
}

剩下来的就是JQuery的事情了。首先先理解一下这个“动态磁贴”的动作:一开始显示一张图片,然后向上滑动显示文字,停留一会,再向下滑动显示图片,如此循环。我们先定义一个函数:
function go(id, d1, px1, val1, d2, px2, val2) {
    $(id).delay(d1);
    $(id).animate({ bottom: px1 }, val1, function () {
        $(id).delay(d2);
        $(id).animate({ bottom: px2 }, val2);
    });
}

这里有7个参数,id是内层div也就是要滑动的div的id,d1是内层div滑上去以后停留的时间,px1是内层div要向上滑动的相对位置,默认当前位置为0px,val1是内层div的完成向上滑动动作所需要的时间,d2是向下滑动div后停留的时间,px2是向下滑动的相对位置,这里依然是以原来的位置为0px,val2是完成向下滑动所需的时间。

然后我们在页面加载完成的时候设置一个定时器,来执行我们定义的go函数:

$(function () {
    timer1 = setInterval(function () {
        go("#inside", 1500, "180px", 1200, 1000, "0px", 2000);
    }, 3000);
});

这里的参数可以根据需要进行修改,这里我们让定时器每3秒执行一次go函数。
源码基本都贴出来了,有需要源文件的童鞋可以猛击这里下载
Javascript 相关文章推荐
关于捕获用户何时点击window.onbeforeunload的取消事件
Mar 06 Javascript
node.js chat程序如何实现Ajax long-polling长链接刷新模式
Mar 13 Javascript
浅析offsetLeft,Left,clientLeft之间的区别
Nov 30 Javascript
jquery分页插件jquery.pagination.js使用方法解析
Apr 01 Javascript
JS封装的选项卡TAB切换效果示例
Sep 20 Javascript
原生node.js案例--前后台交互
Feb 20 Javascript
EasyUI Datebox 日期验证之开始日期小于结束时间
May 19 Javascript
js中less常用的方法小结
Aug 09 Javascript
jQuery实现用户信息表格的添加和删除功能
Sep 12 jQuery
JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】
Feb 06 Javascript
vue控制多行文字展开收起的实现示例
Oct 11 Javascript
微信小程序开发打开另一个小程序的实现方法
May 17 Javascript
浅析ajax请求json数据并用js解析(示例分析)
Jul 13 #Javascript
网页前端优化之滚动延时加载图片示例
Jul 13 #Javascript
JavaScript获取FCK编辑器信息的具体方法
Jul 12 #Javascript
javascript 实现 秒杀,团购 倒计时展示的记录 分享
Jul 12 #Javascript
jquery实现微博文字输入框 输入时显示输入字数 效果实现
Jul 12 #Javascript
jquery 滚动条事件简单实例
Jul 12 #Javascript
简约JS日历控件 实例代码
Jul 12 #Javascript
You might like
在同一窗体中使用PHP来处理多个提交任务
2006/10/09 PHP
php 启动时报错的简单解决方法
2014/01/27 PHP
修改ThinkPHP缓存为Memcache的方法
2014/06/25 PHP
smarty模板引擎使用内建函数foreach循环取出所有数组值的方法
2015/01/22 PHP
Zend Framework教程之MVC框架的Controller用法分析
2016/03/07 PHP
ThinkPHP框架获取最后一次执行SQL语句及变量调试简单操作示例
2018/06/13 PHP
php解决crontab定时任务不能写入文件问题的方法分析
2019/09/16 PHP
JavaScript实现页面滚动图片加载(仿lazyload效果)
2011/07/22 Javascript
JavaScript的事件绑定(方便不支持js的时候)
2013/10/01 Javascript
javascript创建createXmlHttpRequest对象示例代码
2014/02/10 Javascript
jquery 实现input输入什么div图层显示什么
2014/06/15 Javascript
JavaScript中使用Math.PI圆周率属性的方法
2015/06/14 Javascript
JQuery给select添加/删除节点的实现代码
2016/04/26 Javascript
js实现简单的碰壁反弹效果
2016/08/30 Javascript
微信小程序 canvas API详解及实例代码
2016/10/08 Javascript
基于vue2.0+vuex的日期选择组件功能实现
2017/03/13 Javascript
JavaScript验证知识整理
2017/03/24 Javascript
JavaScript 巧学巧用
2017/05/23 Javascript
JS表单提交验证、input(type=number) 去三角 刷新验证码
2017/06/21 Javascript
利用yarn代替npm管理前端项目模块依赖的方法详解
2017/09/04 Javascript
AngularJS中重新加载当前路由页面的方法
2018/03/09 Javascript
微信小程序之onLaunch与onload异步问题详解
2019/03/28 Javascript
[02:01]BBC DOTA2国际邀请赛每日综述:八强胜者组鏖战,中国队喜忧参半
2014/07/19 DOTA
[10:21]2018DOTA2国际邀请赛寻真——Winstrike
2018/08/11 DOTA
python基础教程项目四之新闻聚合
2018/04/02 Python
flask框架jinja2模板与模板继承实例分析
2019/08/01 Python
Flask和pyecharts实现动态数据可视化
2020/02/26 Python
python+selenium+Chrome options参数的使用
2020/03/18 Python
python属于跨平台语言码
2020/06/09 Python
CSS3实现各种图形的示例代码
2016/10/19 HTML / CSS
HTML5+CSS3网页加载进度条的实现,下载进度条的代码实例
2016/12/30 HTML / CSS
瑞典多品牌连锁店:Johnells
2021/01/13 全球购物
诚信承诺书范文
2014/03/27 职场文书
在职证明书模板
2015/06/15 职场文书
投诉信格式范文
2015/07/02 职场文书
MySQL快速插入一亿测试数据
2021/06/23 MySQL