效果预览

「网页上：」 「小程序中：」 在微信小程序中使用时，将div标签改成view即可。

小程序中封装

如下，在小程序中可封装成组件（方便使用）

1、先在「components」目录下新建一个目录存放该组件。

2、右键上一步新建的目录，选择「新建Component」我这里命名为catSwinging，会在目录下自动生成4个文件。

3、在你要使用该组件的「页面json文件」的「usingComponents」标签内注册组件，或者在「app.json」文件全局注册该组件，这样所有页面都能直接使用。

{
  "usingComponents": {
    "cat-swinging": "../../components/cat-swinging/catSwinging"
  }
}

4、使用封装好的组件：在页面中通过「cat-swinging」标签(或者你在json中自定义的名称)即可。

<view class="cat" bindtap="clickMyCat">
  <cat-swinging/>
</view>

.cat{
  z-index: 99999;
}

在公众号「遇见0和1」窗口回复「猫咪小挂件」即可获取到该完整源码，若分享链接失效或有其他问题可直接进群反馈获取。