位置: 编程技术 - 正文

jQuery实现切换页面过渡动画效果(jquery点击切换div)

编辑:rootadmin

推荐整理分享jQuery实现切换页面过渡动画效果(jquery点击切换div),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:jquery点击切换样式,jquery 切换,jquery实现页面切换,jquery页面跳转的方法,jquery实现页面切换,jquery写一个简单的tab切换,jquery点击切换div,jquery实现页面切换,内容如对您有帮助,希望把文章链接给更多的朋友!

直接为大家介绍制作过程,希望大家可以喜欢。

HTML结构

该页面切换特效的HTML结构使用一个<main>元素来作为页面的包裹元素,div.cd-cover-layer用于制作页面切换时的遮罩层,div.cd-loading-bar是进行ajax加载时的loading进度条。

CSS样式

该页面切换特效中使用body::before和body::after伪元素在页面切换过程中创建两个遮罩层来遮住页面内容。它们的定位是固定定位,高度等于vh,宽度为%。默认情况下,使用CSS transform属性将它们隐藏起来(translateY(-%)/translateY(%))。当用户切换页面的时候,这些元素被移动回视口当中(通过在<body>元素上添加.page-is-changing class)。下面的图片演示了这个过程:

jQuery实现切换页面过渡动画效果(jquery点击切换div)

页面切换特效

页面切换时,页面内容的淡入淡出效果是通过改变div.cd-cover-layer的透明度实现的。它覆盖了.cd-main-content元素,并具有相同的背景色,然后在<body>被添加.page-is-changing class的时候,将透明度从0修改为1。Loading进度条使用.cd-loading-bar::before伪元素来制作。默认它被缩小(scaleX(0))和transform-origin: left center。当页面切换开始时它被使用scaleX(1)放大会原来的尺寸。

特效中平滑的过渡效果使用CSS Transitions来实现。每一个动画元素都被添加了不同的transition-delay,以实现不同的元素动画顺序。 JAVASCRIPT

该页面切换特效中在链接上使用data-type="page-transition"属性,用于触发页面切换事件。当插件检测到用户点击事件,changePage()方法将被执行。

这个方法会触发页面切换动画,并通过loadNewContent()方法加载新内容。

当新的内容被加载后,会替代原来<main>元素中的内容。.page-is-changing class被从body中移除,新加载的内容会被添加到window.history中(使用pushState()方法)。

为了在用户点击浏览器的回退按钮时触发相同的页面切换动画效果,插件中监听popstate事件,并在它触发时执行changePage()函数。

jQuery实现瀑布流布局详解(PC和移动端) 瀑布流布局已成为当今非常普遍的图片展示方式,无论是PC还是手机等移动设备上。这种布局图片的样式大概分为三种:等高等宽、等宽不等高、等高不

jQuery实现的仿百度分页足迹效果代码 本文实例讲述了jQuery实现的仿百度分页足迹效果代码。分享给大家供大家参考,具体如下:这是一个类似于百度的分页足迹效果,基于jquery,原理就是

jQuery实现的个性化返回底部与返回顶部特效代码 本文实例讲述了jQuery实现的个性化返回底部与返回顶部特效代码。分享给大家供大家参考,具体如下:运用了所学习的jQuery特性,制作了这款效果,该

标签: jquery点击切换div

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

上一篇:jquery validate demo 基础

下一篇:jQuery实现瀑布流布局详解(PC和移动端)(jquery 瀑布流)

  • 如何在天猫平台抢茅台
  • 可以出口的商品
  • 工商年报中的资金数额怎么填
  • 提高资产利用率,增加销售收入
  • 水电费专用发票税率
  • 工程结算扣罚款怎么开票
  • 期末未缴税额为负数怎么办
  • 合伙企业借款利息收入个税
  • 以前年度损益调整影响本年利润
  • 开办期间的财务会计制度
  • 房东收到房租转让费会计处理
  • 个税系统如何升级到最新版本
  • 小规模纳税人减征额怎么计算
  • 股东投资属于什么会计要素
  • 每天现金日记账登记完以后应怎么对账
  • 房屋租赁需要交增值税吗
  • 矿泉水资源税计税依据
  • 住宿费专用发票税率是多少
  • 招标代理专家费由谁支付
  • 总公司调到子公司
  • 企业汇算清缴补税原因
  • 计提与不计提短贷的区别
  • 已过认证周期什么意思
  • 特许权使用费个税计算公式
  • 地税评为d级纳税人是指
  • 无形资产摊销表模板
  • 公司工会发给职工的福利
  • 事业单位存货包括
  • 应付账款少说明什么
  • 审计调账后企业怎么处理
  • 打印的行程单可以删除吗
  • 固定资产一次计入成本费用
  • 个体工商户网上报税流程
  • 土地增值税含房产吗
  • 商品损耗怎么做会计分录
  • 银行回单箱费会扣吗
  • 购进产品样品怎么做分录
  • 外汇账户怎么开
  • 进项大于销项会计分录
  • 惠普2600打印机故障排除
  • 研发费用的会计和税法的不同
  • 以公允价值计量是什么意思
  • mapbox wms
  • 如何在你的电脑上截图
  • 如何确定合伙企业的利润
  • 劳务公司已开票,可款项未收到,税票多久有效
  • vscode插件vuter
  • 宝塔主机分销系统设计
  • mybatis的
  • windows11/windows10专业清理的系统工具Duplicate Cleaner5.0.13中文破解免费下载
  • 结余资金包括结转资金吗?
  • 借款单属于外来单据吗
  • 对于投资者而言购买债券型理财产品面临的最大风险来自
  • 居民和非居民企业的区别是什么
  • 收到政府的资本公积可以投入子公司吗
  • 销售租赁服务税率
  • 应收账款收不回来的情况说明
  • 主营业务利润率反映了企业的什么能力
  • 单位租用员工个人的车可以不收租吗
  • 进项跟销项金额一样是否可行
  • mysql数据备份的方式
  • docker 自启动
  • ubuntu右上角没有键盘
  • linux系统变卡慢了
  • win10按prtsc没反应
  • win10开机后没声音
  • 置顶朋友圈怎么设置
  • unity着色器在哪
  • bat批处理命令教程
  • nodejs调用c++函数
  • 噩梦原版
  • unity 游戏保存
  • python生成pyc
  • 燃气号如何查询
  • 物业公司收取物业费要交税吗
  • 河南税务局发票查询系统
  • 税务局人事工作总结(税务局工作人员年度工作总结报告)
  • 律师费不给了会怎么办
  • 地税可以跨区交吗
  • 财税65号第一条
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设