通过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 相关文章推荐
jQuery的一些特性和用法整理小结
Jan 13 Javascript
Jquery实战_读书笔记2 选择器
Jan 22 Javascript
javascript动态添加样式(行内式/嵌入式/外链式等规则)
Jun 24 Javascript
js传参数受特殊字符影响错误的解决方法
Oct 21 Javascript
Ionic快速安装教程
Jun 03 Javascript
原生JS实现首页进度加载动画
Sep 14 Javascript
JavaScript交换两个变量值的七种解决方案
Dec 01 Javascript
node.js入门教程之querystring模块的使用方法
Feb 27 Javascript
js实现随机点名系统(实例讲解)
Oct 18 Javascript
详解React-Router中Url参数改变页面不刷新的解决办法
May 08 Javascript
JS构造一个html文本内容成文件流形式发送到后台
Jul 31 Javascript
Vue3.0中的monorepo管理模式的实现
Oct 14 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
phpmyadmin3 安装配置图解教程
2012/03/29 PHP
thinkPHP删除前弹出确认框的简单实现方法
2016/05/16 PHP
php 三大特点:封装,继承,多态
2017/02/19 PHP
PHP高精确度运算BC函数库实例详解
2017/08/15 PHP
PHP实现找出链表中环的入口节点
2018/01/16 PHP
php高性能日志系统 seaslog 的安装与使用方法分析
2020/02/29 PHP
PHP实现chrome表单请求数据转换为接口使用的json数据
2021/03/04 PHP
用js实现预览待上传的本地图片
2007/03/15 Javascript
JQuery 插件模板 制作jquery插件的朋友可以参考下
2010/03/17 Javascript
javascript instanceof 内部机制探析
2010/10/15 Javascript
基于JavaScript实现 获取鼠标点击位置坐标的方法
2013/04/12 Javascript
Jquery中给animation加更多的运作效果实例
2013/09/05 Javascript
javascript操作referer详细解析
2014/03/10 Javascript
js或jquery实现页面打印可局部打印
2014/03/27 Javascript
jQuery实现的简单排序功能示例【冒泡排序】
2017/01/13 Javascript
Node.js 使用流实现读写同步边读边写功能
2017/09/11 Javascript
vue2中引用及使用 better-scroll的方法详解
2018/11/15 Javascript
使用express获取微信小程序二维码小记
2019/05/21 Javascript
解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题
2019/11/14 Javascript
python 字典(dict)遍历的四种方法性能测试报告
2014/06/25 Python
Python图像处理之gif动态图的解析与合成操作详解
2018/12/30 Python
解决安装pycharm后不能执行python脚本的问题
2019/01/19 Python
Python二叉树的镜像转换实现方法示例
2019/03/06 Python
python数据预处理方式 :数据降维
2020/02/24 Python
Anaconda+Pycharm环境下的PyTorch配置方法
2020/03/13 Python
BeautifulSoup中find和find_all的使用详解
2020/12/07 Python
Under Armour安德玛法国官网:美国高端运动科技品牌
2018/06/29 全球购物
建筑文秘专业个人求职信范文
2013/12/28 职场文书
料理师求职信
2014/01/30 职场文书
国际语言毕业生求职信
2014/07/08 职场文书
县人大领导班子四风对照检查材料思想汇报
2014/10/09 职场文书
党支部2014年度工作总结
2014/12/04 职场文书
2014年英语教研组工作总结
2014/12/06 职场文书
2014年学校财务工作总结
2014/12/06 职场文书
大学毕业生自我鉴定范文
2019/06/21 职场文书
Python list去重且保持原顺序不变的方法
2021/04/03 Python