位置: 编程技术 - 正文

jQuery+HTML5+CSS3制作支持响应式布局时间轴插件(jqueryw3c)

编辑:rootadmin

推荐整理分享jQuery+HTML5+CSS3制作支持响应式布局时间轴插件(jqueryw3c),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:jquery h5,jqueryw3c,jquery dom,jquery.html,html5 jquery,jquery h5,jquery h5,html5 jquery,内容如对您有帮助,希望把文章链接给更多的朋友!

jQuery时间轴插件效果图预览

(图一)

(图二)

附注说明:

图一是浏览器宽度像素大于px下的展示效果,图二是在浏览器宽度像素小于px下的展现效果。使用的是CSS3的Media Query(媒体查询)实现的效果。 另外页面中圆形、圆角和三角同样使用了CSS3的特殊样式。这些基础的样式和效果在本文中不会赘述,不了解的童鞋可以上网搜索学习一下,很简单。 页面上每个时间节点的展示内容提供了三种展示样式,多张图片的展示风格、单张图片的展示风格和无图片的展示风格。这些可以根据自己的需求自己更改。

分析页面布局思路

jQuery+HTML5+CSS3制作支持响应式布局时间轴插件(jqueryw3c)

页面的布局其实主要就是将外层的容器使用相对定位,容器内的元素使用绝对定位即可。具体的分析请看下图

依照图片上的分析就可以达到时间轴插件的布局展示效果。

布局好了之后,我们就可以添加我们需要展现的内容了。为了页面不那么单调,可以使用JQuery的animate函数添加一些效果,比如可以让左侧的节点从页面左侧滑入页面,右侧节点从页面右侧滑入页面。代码简单,稍后贴出。

加入滚动触发事件机制,动态加载时间节点

在时间节点较多的情况下,一般情况下比如一个公司的发展历程和重大记事都不太可能只有三、五条信息吧,随着时间的推移,值得记录的大事件就会越多。如果一次就要让全部的信息展示在页面上可能会影响页面的展示效率,用户的体验也不会很好。所以,可以利用触发滚动事件机制,每次加载固定的条数。这跟实现分页效果是一样的。只不过我们的触发条件是滚动触发。

注意事项:1. 首次加载固定条数时,假设每次加载5条记录,如果首次加载5条后,没有出现滚动条,应该再次调用查询方法,继续加载,直到出现滚动条(否则首次加载5条后,没有出现滚动条,以后就无法触发滚动事件了,自然也就无法继续查询之后的记录了)。2. 触发滚动事件,不能够只要滚动就触发,否则程序一直在触发加载记录方法,页面可能会无法由于频繁发送请求无法响应。解决方法,可以在滚动条滚动到页面底部的时候再触发加载记录方法。具体的判定请看代码

CSS代码

JQuery代码

总结一下: 1. 本文偏重在时间轴的布局设置分析,主要是通过外层容器的相对定位和内层元素的绝对定位实现布局效果。 2. 触发滚动事件机制,达到类似分页的加载效果。在触发滚动事件是要保证逻辑的严谨性。

比较久之前写的Demo了,Jquery插件写的不是很好,和CSS样式混杂在一起,也没有将其单独提取出来。不过作为分享学习使用还是可以的。正式开发的时候,不要像我这么写JS。最后,依旧是感谢阅读。

标签: jqueryw3c

本文链接地址:https://www.jiuchutong.com/biancheng/384158.html 转载请保留说明!

上一篇:jQuery制作圣诞主题页面 更像是爱情影集(圣诞树代码html)

下一篇:jQuery实现的选择商品飞入文本框动画效果完整实例(jquery中选择器有哪些)

  • 滴滴电子普通发票怎么抵扣
  • 如何写财务制度
  • 股权转让实缴和认缴的区别
  • 小规模企业能否抵扣
  • 修缮服务开票项目一览表
  • 印花税购销合同计税金额怎么算
  • 税控盘抵减税额填在主表哪里
  • 商业银行的下列哪些行为违反了法律规定?给存款大户
  • 分期手术
  • 销项负数发票用勾选吗
  • 银行的期初数据怎么进行账务处理?
  • 收到微信公众号退款怎么做账
  • 奖金部分
  • 如何网上认证发票流程
  • 接受实物投资的增值税会计核算方法
  • 小型微利企业所得税优惠政策2023超过100万
  • 营业外支出用什么账户
  • 今年调整上年收入的政策
  • 出纳备用金收支登记表怎么做
  • 其他应收款计提坏账比例
  • 精英主板设置u盘启动
  • 如何修改windows11开机密码
  • 连接另外一个设备
  • 捐赠支出税前扣除票据
  • 冲销货款应怎么记账
  • 无形资产的增值税怎么算
  • php 7 8
  • vue2editor
  • 代收代付的垃圾清运费没发票能入账吗
  • 现行小规模纳税人增值税税率
  • win11好用吗知乎
  • 银行公户转账需要带什么
  • thinkphp批量修改
  • PHP:imagegrabscreen()的用法_GD库图像处理函数
  • 若依框架权限控制
  • 史密斯理工学院
  • reactjs路由跳转
  • 私人医院需要缴纳哪些税费
  • css选择器nth
  • Js模板字符串添加点击事件
  • css3栅格布局
  • service运行命令
  • php charat
  • yii框架教程
  • 置顶文章
  • 工会会费收取
  • c 语言 static
  • 进项税转出的会计分录
  • 织梦如何添加浮动广告
  • 公司的货款直接转给股东个人了,该怎么转到公司
  • 房租押金可以要回来吗
  • 基本社会保险制度范围
  • 固定资产后续支出计入的科目
  • 取得下列资产时应按公允价值计量
  • 不交社保如何在网上投诉
  • 销售佣金的三大特点是什么?
  • 企业经营规模小的原因
  • 数据库句柄是什么意思
  • win7系统桌面图标不见了右键无反应
  • centos添加用户到组
  • centos开启telnet服务
  • centos7 home
  • 虚拟机vmware下载教程
  • win7桌面计算机
  • windows8怎么设置
  • linux系统中安装jar包没有
  • windows显示缩略图
  • win7共享打印机提示0x000709
  • dos批处理高级教程合编.pdf
  • 那些年的我们什么意思
  • jquery常见的选择器
  • NGUI的depth和Z轴的关系
  • unity ugu
  • Python虚拟环境创建
  • jQuery simpleModal插件的使用介绍
  • android清理软件评测
  • js验证正整数
  • js重要知识点
  • python语言例子
  • 广东省国税局长是谁
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设