阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      插件 jQuery.twinkle 中文API文档

      插件 jQuery.twinkle 中文API文档

      源码 & 下载

      快速开始

      在指定元素处闪烁:

      $(selector).twinkle();
      

      选择效果并添加一些效果选项:

      var options = {
          'effect': 'drop',
          'effectOptions': {
              'color': 'rgba(0,0,255,0.5)',
              'radius': 100
          }
      };
      
      $(selector).twinkle(options);
      

      选项

      Options {
          // position the effect horizontal inside the element
          widthRatio: 0.5
      
          // position the effect vertical inside the element
          heightRatio: 0.5
      
          // effect ID
          effect: 'splash'
      
          // custom effect options
          effectOptions: undefined
      
          // function to be called after effect finished
          callback: undefined
      }
      

      效果

      ‘splash’(画布)

      EffectOptions {
          color: 'rgba(255,0,0,0.5)',
          radius: 300,
          duration: 1000
      }
      

      ‘drop’(画布)

      EffectOptions {
          color: 'rgba(255,0,0,0.5)',
          radius: 300,
          duration: 1000,
          width: 2
      }
      

      ‘drop’(画布)

      EffectOptions {
          color: 'rgba(255,0,0,0.5)',
          radius: 300,
          duration: 1000,
          width: 2,
          count: 3,
          delay: 100
      }
      

      ‘脉冲’(画布)

      EffectOptions {
          color: 'rgba(255,0,0,0.5)',
          radius: 100,
          duration: 3000
      }
      

      ‘orbit’(画布)

      EffectOptions {
          color: 'rgba(255,0,0,0.5)',
          radius: 100,
          duration: 3000,
          satellites: 10,
          satellitesRadius: 10,
          circulations: 1.5
      }
      

      ‘splash-css’(CSS3)

      EffectOptions {
          color: 'rgba(255,0,0,0.5)',
          radius: 300,
          duration: 1000
      }
      

      ‘drop-css’(CSS3)

      EffectOptions {
          color: 'rgba(255,0,0,0.5)',
          radius: 300,
          duration: 1000,
          width: 2
      }
      

      ‘drops -css’(CSS3)

      EffectOptions {
          color: 'rgba(255,0,0,0.5)',
          radius: 300,
          duration: 1000,
          width: 2,
          count: 3,
          delay: 300
      }
      
      目录
      目录