• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >jquery > 通过JQuery实现win8一样酷炫的动态磁贴效果(示例代码)

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

作者: 字体:[增加 减小] 来源:互联网 时间:2017-08-16

通过本文主要向大家介绍了JQuery,win8,磁贴效果等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

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

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

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

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

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • 基于jQuery对象和DOM对象和字符串之间的转化实例
  • jquery+css实现简单的图片轮播效果
  • 使用jQuery实现鼠标点击左右按钮滑动切换
  • jQuery实现上传图片前预览效果功能
  • jQuery初级教程之网站品牌列表效果
  • 基于jquery实现多选下拉列表
  • jQuery接受后台传递的List的实例详解
  • 详解jquery选择器的原理
  • jQuery上传插件webupload使用方法
  • 关于jquery form表单序列化的注意事项详解

相关文章

  • 2017-08-16使用Jquery实现点击文字后变成文本框且可修改
  • 2017-08-16jquery+ajax请求且带返回值的代码
  • 2017-08-16jquery动画2.元素坐标动画效果(创建一个图片走廊)
  • 2017-08-16jQuery tagsinput在h5邮件客户端中应用详解
  • 2017-08-16基于JQuery实现CheckBox全选全不选
  • 2017-08-16jQuery实现jQuery-form.js实现异步上传文件
  • 2017-08-16jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例
  • 2017-08-16解决jquery中美元符号命名冲突问题
  • 2017-08-16jquery中ajax学习笔记一
  • 2017-08-16JQuery.validate在ie8下不支持的快速解决方法

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • jQuery鼠标经过方形图片切换成圆边效果代码分享
    • 30个经典的jQuery代码开发技巧
    • JQuery对checkbox操作 (循环获取)
    • JQuery显示隐藏DIV的方法及代码实例
    • jQuery的实现原理的模拟代码 -5 Ajax
    • 基于jquery用于查询操作的实现代码
    • jQuery中事件对象e的事件冒泡用法示例介绍
    • Js与Jq 获取页面元素值的方法和差异对比
    • jquery实现图片按比例缩放示例
    • jQuery结合CSS制作动态的下拉菜单

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有