|
|
@@ -12,29 +12,63 @@ import 'https://cdn.staticfile.org/bootstrap/5.1.3/js/bootstrap.min.js';
|
|
|
* @description 如果元素滚动至距离底部150px以上，添加css动效
|
|
|
*/
|
|
|
window.showAnimate = function (ele, className) {
|
|
|
- //可视区高度
|
|
|
- var winHeight = window.innerHeight
|
|
|
- //页面被卷去的高度
|
|
|
- var winsSrollTop = document.body.scrollTop
|
|
|
- //监听页面滚动
|
|
|
- window.onscroll = function (event) {
|
|
|
- let eleTop = $(ele).offset().top;
|
|
|
- if(eleTop<(winHeight+winsSrollTop)){
|
|
|
- console.log(1)
|
|
|
+ //先隐藏元素
|
|
|
+ $(ele).css({
|
|
|
+ 'visibility': 'hidden'
|
|
|
+ })
|
|
|
+ /**
|
|
|
+ *
|
|
|
+ * @description 得到元素的坐标信息
|
|
|
+ */
|
|
|
+ function GetRect (element) {
|
|
|
+ let rect = element.getBoundingClientRect() // 距离视窗的距离
|
|
|
+ let top = document.documentElement.clientTop ? document.documentElement.clientTop : 0 // html元素对象的上边框的宽度
|
|
|
+ let left = document.documentElement.clientLeft ? document.documentElement.clientLeft : 0
|
|
|
+ return {
|
|
|
+ top: rect.top - top,
|
|
|
+ bottom: rect.bottom - top,
|
|
|
+ left: rect.left - left,
|
|
|
+ right: rect.right - left
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ let $box = $(ele)[0]
|
|
|
+ let divH = $box.offsetHeight // div高度
|
|
|
+ let windowH = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight // 浏览器高度兼容写法
|
|
|
+ window.onscroll = function () {
|
|
|
+ let obj = GetRect($box)
|
|
|
+ if (obj.top >= windowH) { // 在视口之下
|
|
|
+ }
|
|
|
+ if (obj.top < windowH && obj.bottom >= windowH) { // 正在出现
|
|
|
+ }
|
|
|
+ if (obj.top > 0 && obj.top < windowH && obj.bottom > 0 && obj.bottom < windowH) { // 正在视口中
|
|
|
+ //添加动效
|
|
|
+ if(!$(ele).hasClass(className)){
|
|
|
+ $(ele).css({
|
|
|
+ 'visibility': 'unset'
|
|
|
+ })
|
|
|
+ $(ele).addClass(className);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (obj.top <= 0 && obj.bottom <= divH && obj.bottom > 0) { // 正在离开视口
|
|
|
+ }
|
|
|
+ if (obj.bottom <= 0) { // 已经离开视口
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-let swiper = new Swiper('#swiper1', {
|
|
|
- pagination: {
|
|
|
- el: '.swiper-pagination',
|
|
|
- },
|
|
|
- loop: true, //循环
|
|
|
- observer: true, //修改swiper自己或子元素时，自动初始化swiper
|
|
|
- observeParents: true, //修改swiper的父元素时，自动初始化swiper
|
|
|
- speed: 500,
|
|
|
- autoplay: {
|
|
|
- disableOnInteraction: false, //触碰后自动轮播也不会停止
|
|
|
- delay: 3000,
|
|
|
- },
|
|
|
-})
|
|
|
+/**
|
|
|
+ * @description 元素滚动至父容器的中间
|
|
|
+ * @param ele 可以传元素的"event"或者"选择器名称"
|
|
|
+ * @fatherEle 滚动父容器的元素
|
|
|
+ */
|
|
|
+window.eleToCenter = function (e,fatherEle){
|
|
|
+ let item = typeof e == 'object'?$(e.target):(e);
|
|
|
+ let container = $(fatherEle);
|
|
|
+ let itemOffset = item.offset();
|
|
|
+ let itemOffsetLeft = itemOffset.left + container.scrollLeft();
|
|
|
+ let centerLeft = ( container.width() - item.width()) / 2 + item.width()*0.5;
|
|
|
+ container.animate({
|
|
|
+ scrollLeft: itemOffsetLeft - centerLeft
|
|
|
+ },300)
|
|
|
+}
|
