通过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 相关文章推荐
常用js字符串判断方法整理
Oct 18 Javascript
javascript操作数组详解
Dec 17 Javascript
JavaScript让网页出现渐隐渐显背景颜色的方法
Apr 21 Javascript
jquery实现鼠标拖拽滑动效果来选择数字的方法
May 04 Javascript
JS实现网页顶部向下滑出的全国城市切换导航效果
Aug 22 Javascript
轻松学习jQuery插件EasyUI EasyUI表单验证
Dec 01 Javascript
jquery实现简单的瀑布流布局
Dec 11 Javascript
在Vue中使用axios请求拦截的实现方法
Oct 25 Javascript
在vue中使用setInterval的方法示例
Apr 16 Javascript
优雅的使用javascript递归画一棵结构树示例代码
Sep 22 Javascript
vue.js实现左边导航切换右边内容
Oct 21 Javascript
在vue项目实现一个ctrl+f的搜索功能
Feb 28 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
一个好用的分页函数
2006/11/16 PHP
excellent!――ASCII Art(由目标图象生成ascii)
2007/02/20 PHP
说明的比较细的php 正则学习实例
2008/07/30 PHP
php对数组排序代码分享
2014/02/24 PHP
使用XHProf查找PHP性能瓶颈的实例
2017/12/13 PHP
Jquery 快速构建可拖曳的购物车DragDrop
2009/11/30 Javascript
jquery 多级下拉菜单核心代码
2010/05/21 Javascript
js实现带按钮的上下滚动效果
2015/05/12 Javascript
基于Jquery+div+css实现弹出登录窗口(代码超简单)
2015/10/27 Javascript
超详细的javascript数组方法汇总
2015/11/21 Javascript
JS遍历数组及打印数组实例分析
2016/01/21 Javascript
一道常被人轻视的web前端常见面试题(JS)
2016/02/15 Javascript
Node.js中JavaScript操作MySQL的常用方法整理
2016/03/01 Javascript
浅谈JavaScript中的this指针和引用知识
2016/08/05 Javascript
详解用原生JavaScript实现jQuery的某些简单功能
2016/12/19 Javascript
解决vue 打包发布去#和页面空白的问题
2018/09/04 Javascript
axios如何利用promise无痛刷新token的实现方法
2019/08/27 Javascript
[59:42]Secret vs Alliacne 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
python定时检查启动某个exe程序适合检测exe是否挂了
2013/01/21 Python
Python实现抓取网页并且解析的实例
2014/09/20 Python
Python中使用Beautiful Soup库的超详细教程
2015/04/30 Python
进一步探究Python的装饰器的运用
2015/05/05 Python
python万年历实现代码 含运行结果
2017/05/20 Python
Python3实现获取图片文字里中文的方法分析
2018/12/13 Python
使用python 打开文件并做匹配处理的实例
2019/01/02 Python
python实现在遍历列表时,直接对dict元素增加字段的方法
2019/01/15 Python
对pyqt5之menu和action的使用详解
2019/06/20 Python
selenium2.0中常用的python函数汇总
2019/08/05 Python
Python3常见函数range()用法详解
2019/12/30 Python
Pytorch之parameters的使用
2019/12/31 Python
python判断一个变量是否已经设置的方法
2020/08/13 Python
意大利中国电子产品购物网站:Geekmall.com
2019/09/30 全球购物
关于Assembly命名空间的三个面试题
2015/07/23 面试题
承租经营合作者协议书
2014/10/01 职场文书
python实现简单区块链结构
2021/04/25 Python
python基于机器学习预测股票交易信号
2021/05/25 Python