通过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与asp.net(c#)互相调用方法
Dec 13 Javascript
10个实用的脚本代码工具
May 04 Javascript
javascript表单验证大全
Aug 12 Javascript
在JavaScript中如何解决用execCommand(
Oct 19 Javascript
XMLHttpRequest Level 2 使用指南
Aug 26 Javascript
值得分享的bootstrap table实例
Sep 22 Javascript
Vue 固定头 固定列 点击表头可排序的表格组件
Nov 25 Javascript
JavaScript中从setTimeout与setInterval到AJAX异步
Feb 13 Javascript
JavaScript Drum Kit 指南(纯 JS 模拟敲鼓效果)
Jul 23 Javascript
JavaScript简单实现动态改变HTML内容的方法示例
Dec 25 Javascript
tsconfig.json配置详解
May 17 Javascript
javascript拖曳互换div的位置实现示例
Jun 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
来自phpguru得Php Cache类源码
2010/04/15 PHP
PHP中strtotime函数使用方法详解
2011/11/27 PHP
解析PHP函数array_flip()在重复数组元素删除中的作用
2013/06/27 PHP
php实现微信发红包
2015/12/05 PHP
PHP操作MongoDB实现增删改查功能【附php7操作MongoDB方法】
2018/04/24 PHP
一个js导致的jquery失效问题的解决方法
2013/11/27 Javascript
angularjs实现与服务器交互分享
2014/06/24 Javascript
一个JavaScript获取元素当前高度的实例
2014/10/29 Javascript
使用mouse事件实现简单的鼠标经过特效
2015/01/30 Javascript
同步异步动态引入js文件的几种方法总结
2016/09/23 Javascript
jQuery视差滚动效果网页实现方法经验总结
2016/09/29 Javascript
web前端开发upload上传头像js示例代码
2016/10/22 Javascript
Angular搜索场景中使用rxjs的操作符处理思路
2018/05/30 Javascript
LayerClose弹窗关闭刷新方法
2018/08/17 Javascript
JS实现的检验身份证格式并输出出生日期,年龄,性别,出生地示例
2019/05/17 Javascript
Node.js HTTP服务器中的文件、图片上传的方法
2019/09/23 Javascript
jQuery实现点击滚动到指定元素上的方法分析
2020/03/19 jQuery
Python中的with语句与上下文管理器学习总结
2016/06/28 Python
Python爬虫之模拟知乎登录的方法教程
2017/05/25 Python
Python 用Redis简单实现分布式爬虫的方法
2017/11/23 Python
对python 各种删除文件失败的处理方式分享
2018/04/24 Python
Python3.5迭代器与生成器用法实例分析
2019/04/30 Python
python自动化UI工具发送QQ消息的实例
2019/08/27 Python
python实现暗通道去雾算法的示例
2020/09/27 Python
OpenCV实现机器人对物体进行移动跟随的方法实例
2020/11/09 Python
详解HTML5中垂直上下居中的解决方案
2017/12/20 HTML / CSS
详解HTML5中的manifest缓存使用
2015/09/09 HTML / CSS
中国专业的综合网上购物商城:京东
2016/08/02 全球购物
澳大利亚领先的孕妇服装品牌:Mamaway
2018/08/14 全球购物
党员创先争优活动总结
2014/05/04 职场文书
企业文化演讲稿
2014/05/20 职场文书
运动会演讲稿300字
2014/08/25 职场文书
纪念九一八事变演讲稿:勿忘国耻
2014/09/14 职场文书
党员转正意见怎么写
2015/06/03 职场文书
MySQL完整性约束的定义与实例教程
2021/05/30 MySQL
Python Matplotlib绘制等高线图与渐变色扇形图
2022/04/14 Python