通过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 相关文章推荐
javascript整除实现代码
Nov 23 Javascript
jquery实现网站超链接和图片提示效果
Mar 21 Javascript
javascript如何判断输入的url是否正确
Apr 11 Javascript
jquery+ajax实现跨域请求的方法
Jan 20 Javascript
使用js实现的简单拖拽效果
Mar 18 Javascript
javascript相关事件的几个概念
May 21 Javascript
jquery插件uploadify多图上传功能实现代码
Aug 12 Javascript
jQuery 实现鼠标画框并对框内数据选中的实例代码
Aug 29 jQuery
微信小程序实现action-sheet弹出底部菜单功能【附源码下载】
Dec 09 Javascript
angular 服务的单例模式(依赖注入模式下)详解
Oct 22 Javascript
JS数组中对象去重操作示例
Jun 04 Javascript
JS Html转义和反转义(html编码和解码)的实现与使用方法总结
Mar 10 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
PHP5 安装方法
2007/01/15 PHP
php环境无法上传文件的解决方法
2014/04/30 PHP
php读取csv数据保存到数组的方法
2015/01/03 PHP
PHPStrom中实用的功能和快捷键大全
2015/09/23 PHP
10个超级有用的PHP代码片段果断收藏
2015/09/23 PHP
laravel解决迁移文件一次删除创建字段报错的问题
2019/10/24 PHP
javascript定义函数的方法
2010/12/06 Javascript
jquery三个关闭弹出层的小示例
2013/11/05 Javascript
js中typeof的用法汇总
2013/12/12 Javascript
cocos2dx骨骼动画Armature源码剖析(一)
2015/09/08 Javascript
基于JS实现的笛卡尔乘积之商品发布
2016/05/13 Javascript
Ajax与服务器(JSON)通信实例代码
2016/11/05 Javascript
基于jQuery封装的分页组件
2017/06/26 jQuery
vue 实现 tomato timer(蕃茄钟)实例讲解
2017/07/24 Javascript
React教程之封装一个Portal可复用组件的方法
2018/01/02 Javascript
vue-cli 脚手架基于Nightwatch的端到端测试环境的过程
2018/09/30 Javascript
微信小程序实现时间预约功能
2018/11/27 Javascript
vue项目中使用fetch的实现方法
2019/04/25 Javascript
vue中实现图片压缩 file文件的方法
2020/05/28 Javascript
Nuxt pages下不同的页面对应layout下的页面布局操作
2020/11/05 Javascript
python如何实现一个刷网页小程序
2018/11/27 Python
python实现电子产品商店
2019/02/26 Python
Python 安装第三方库 pip install 安装慢安装不上的解决办法
2019/06/18 Python
浅谈利用缓存来优化HTML5 Canvas程序的性能
2015/05/12 HTML / CSS
StubHub墨西哥:购买和出售您的门票
2016/09/17 全球购物
日本小田急百货官网:Odakyu
2018/07/19 全球购物
一套VC试题
2015/01/23 面试题
Linux文件操作命令都有哪些
2015/02/27 面试题
如何用Python输出一个Fibonacci数列
2016/08/28 面试题
金属材料工程个人求职的自我评价
2013/12/04 职场文书
高中毕业生的个人自我评价
2014/02/21 职场文书
机械电子工程专业自荐书
2014/06/10 职场文书
争先创优演讲稿
2014/09/15 职场文书
机关保密工作承诺书
2015/05/04 职场文书
2016年员工政治思想表现评语
2015/12/02 职场文书
2019预备党员转正申请书模板2篇!
2019/08/07 职场文书