小编cVe*_*gel的帖子

jQuery - 检查元素是否进入视图,淡化那些元素

当我知道要指定哪个元素时,我找到了这个问题的答案,但我正在寻找的方法是检查'滚动'是否有任何具有特定类的元素进入视图,并修改它们(例如,改变不透明度 - 只有那些进入视野的人).我知道代码可能看起来与此类似,但我无法使其工作:

jQuery(window).on("scroll", function() {
var difference = jQuery(window).offset().top + jQuery(window).height()/2;
if (difference > jQuery(".makeVisible").offset().top) {
     jQuery(this).animate({opacity: 1.0}, 500);

}
});
Run Code Online (Sandbox Code Playgroud)

非常感谢你.注意:存在变量差异,因为我希望元素在到达屏幕中间时变得可见.

html javascript css jquery scroll

5
推荐指数
1
解决办法
3385
查看次数

如何告诉 ion-slides 显示什么幻灯片 (slideTo)

我有一个包含ion-slides元素的模式。在主页中,我有(click)使用滑块打开模态的图像的缩略图。我需要让滑块slideTo选择缩略图的索引,但还没有让它工作。

我已经完成将正确的索引传递给模态并验证它记录到控制台。在ionic 4 docs 中,我们被定向到swiper docs,在那里可以看到该slideTo方法存在,但是当滑块由 ionic 初始化时,我不知道如何使用它。我按照教程让模态和滑块运行,除了在右侧幻灯片上打开滑块外,一切都很好。我尝试了很多方法来遵循 swiper 文档。此外,滑块的缩略图数组和图像数组是相同的,因此索引匹配。

这里是模态/滑块的 ts 文件:

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { NavParams, ModalController } from '@ionic/angular';

@Component({
  selector: 'app-zoom-modal',
  templateUrl: './zoom-modal.component.html',
  styleUrls: ['./zoom-modal.component.scss'],
})
export class ZoomModalComponent implements OnInit {

  images: any;
  index: number;
  img: any;

  @ViewChild('slider', { static: false })slider: ElementRef;

  sliderOpts = {
    zoom: {
      maxRatio: 3,
    },
    slideTo: this.index // …
Run Code Online (Sandbox Code Playgroud)

javascript swiper ionic-framework ion-slides angular

1
推荐指数
1
解决办法
4336
查看次数

标签 统计

javascript ×2

angular ×1

css ×1

html ×1

ion-slides ×1

ionic-framework ×1

jquery ×1

scroll ×1

swiper ×1