位置: 编程技术 - 正文

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中选择器有哪些)

  • 增值税发票认证平台进不去什么原因
  • 会计凭证的数字书写示例图
  • 保理公司发放贷款
  • 如何理解合并报表中少数股东损益的抵消
  • 无形资产一般包括专利权
  • 开了农民工资金专户必须使用吗
  • 小微企业亏损还用缴残保金吗
  • 固定资产融资租出计入什么科目
  • 调整账户和被调整账户的关系
  • 开具了红字发票信息表的税额需要转出吗
  • 库存商品过期报废需要什么附件
  • 无形资产换出
  • 材料未验收入库属于哪个科目
  • 小规模纳税人查账征收所得税税率
  • 非独立核算的分公司企业所得税怎么申报
  • 营改增后房地产开发税费一览表
  • 股权交易要不要缴纳印花税?
  • 海关完税价格表
  • 非独立核算的门市部增值税
  • 一次还本付息摊余成本计算公式
  • 预交增值税扣税绑不了三方
  • 生产企业出租设备如何开票
  • 未缴纳出资的股东未到期能否追加为被执行人
  • 在王者荣耀中怎么找个妹子
  • 外购的礼品送客户怎么做分录小规模
  • 房地产开发资质查询
  • php 数字转中文
  • php基础教程
  • 所有者权益变动表范本
  • csinject.exe是什么程序的进程 csinject进程是安全的吗
  • 应交增值税视频讲解
  • 公允价值变动损益在利润表哪里
  • 特定业务计算的应纳税所得额是指
  • 微信支付开发需要什么条件
  • 一般纳税人开普票税率是3%还是13%
  • 公司款能转到个人卡上吗
  • 发票金额大于付款金额怎么做分录
  • pycharm cant find main
  • asp连接sqlserver数据库的三种方式是什么?
  • 公司纳税信用等级B级是什么意思
  • 微店企业店铺和个人店铺的区别
  • 贴现法付息的实际利息
  • sql游标用法
  • mysql编程一般步骤
  • 企业所得税退税会计分录
  • 起征点和免征额都是税收优惠形式
  • 代扣代缴境外增值税怎么申报
  • 公司购买垃圾箱会计分录
  • 接待客人后的感受和过程
  • 购入研发设备可以全额抵扣吗
  • 结转利润分配的二级明细账户
  • 公司是生产企业现在要开出租赁的发票可以开吗
  • 出差费计入工资总额吗
  • 负数发票要给税务局吗
  • 购买天然气进项税额
  • mysql数据库操作题
  • win10的数据使用量是什么
  • linux共享
  • Mac怎么快速显示桌面
  • centos配置yum
  • win8系统怎么设置
  • /etc/rc.d/rc与/etc/rc.d/init.d的关系介绍
  • win7纯净版系统安装教程
  • w10系统屏幕一直在闪
  • ext.grid.panel
  • scrollview怎么用
  • opengl入门教程
  • css div 不换行
  • ecmascript6 官方文档
  • AssetBundle.Unload(false)的作用
  • js框选
  • android开发的难点
  • jquery示例
  • jQuery+ajax简单实现文件上传的方法
  • 我国历年财政支出总额
  • 电子税务局校验码
  • 湖北省纳税大户
  • 工信厅有什么实权
  • 航天信息的金税盘开票要怎么调格式
  • 开票系统税控盘在哪里
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设