![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
小demo
辞旧2031
这个作者很懒,什么都没留下…
展开
-
4.小羊奔跑
小样奔跑结果图:这是小羊拖拽所使用的;本质就是一直刷新现在的点和上一个点的距离// 鼠标按下的事件// 获取点击的鼠标,距离页面的距离sheepClass.x = ed.pageX;sheepClass.y = ed.pageY;// 在鼠标移动事件里面 // 每两个点相减,得到移动的距离var chax = e.pageX - sheepClass.x ;var chay = e.pageY - sheepClass.y ;sheepClass.x = e.pageX;//原创 2021-08-13 08:33:38 · 118 阅读 · 0 评论 -
3.滚动彩圈
彩圈结果图: <!-- 页面中唯一固定的dom元素,是控制手动和自动的按钮 --> <div class="button" data-id="handle">手动</div> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script> <script src="../js/index.js"></sc原创 2021-08-12 14:21:25 · 78 阅读 · 0 评论 -
2.居中五环
居中五环效果图: <!-- 五环最外层的容器 --> <div class="container"> <!-- 5环;5个div --> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <div原创 2021-08-09 14:41:30 · 55 阅读 · 0 评论 -
1.分页组件
分页组件结果图:结构html代码 <!-- 分页组件存放的最外层容器 --> <div class="pagerContainer"></div> <script src="../js/pager.js"></script> <script> // 获取分页放置的外部容器 var pagerContainer = document.getElementsByClas原创 2021-08-09 10:58:12 · 283 阅读 · 0 评论