基于视口大小动态移动DOM元素 jQuery Transporter

  • 源码大小:8.71KB
  • 所需积分:1积分
  • 源码编号:19JP-3102
  • 浏览次数:517次
  • 最后更新:2023年05月06日
  • 所属栏目:其他
我要下载
加入收藏
本站默认解压密码:19jp.com 或 19jp_com

简介

Transporter是一个非常简单的jQuery插件,它可以根据特定的视口大小将DOM元素从一个位置移动到另一个位置。

它可以用于根据屏幕大小重新组织元素,确保最相关和最重要的内容始终可见,并且用户可以在不同的设备上轻松访问。

如何使用它:

1.下载transporter jQuery插件并将其导入到文档中。

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/transporter-min.js"></script>

2.将move-me添加到需要移动的元素中,在数据中断属性,然后使用数据移动名称属性如下:

<div class="element-one"></div>

<section class="move-me" data-break="768" data-move-name="element-one">
  <h2>Move To Element ONE When the Screen Size Is Smaller Than 768px</h2>
</section>

预览截图