调整脚本大小的网页

Question

I am currently using a Shooting Star script I found online to randomize shooting stars across the webpage. 我目前正在使用我在网上找到的“流星”脚本来随机分配整个页面上的流星。 Whenever a shooting star goes out of the visible webpage, scroll bars appear and re-size the entire page for a moment. 每当一颗流星离开可见的网页时，就会出现滚动条并调整整个页面的大小。 This happens quite frequently. 这种情况经常发生。 Is there a way I can just have the shooting star delete itself once it hits the edge of the webpage, or maybe have it so that the webpage isn't affected by the shooting stars? 有什么方法可以让流星在其触及网页边缘时将自身删除，或者可以使流星不会受到流星的影响？ Here's the website where I got the script from: http://codepen.io/manufosela/pen/Gymih Here's the code: 这是我从中获取脚本的网站： http : //codepen.io/manufosela/pen/Gymih这是代码：

<html>
  <head>
    <title>Shooting star Example</title>
    <meta charset="utf-8">
    <meta name="author" content="@manufosela">
  </head>

  <body class="stars">
    <h1>SHOOTING STARS...</h1>
    <div id="ShootingStarParams"></div>
    <script type="text/javascript" src="http://codeorigin.jquery.com/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="ShootingStarClass.js"></script>
    <script type="text/javascript">
      $( document ).ready( function(){
        var shootingStarObj = new ShootingStar( "body" );
            shootingStarObj.launch();
      });
    </script>
  </body>
</html>

body { color:#FFF; height:600px; width:99%; height:95%; color:#FFF; }
      .stars {
        z-index: 0; position: absolute; /* width: 420em; height: 70em; */
        background-image: url( http://www.14denoviembre.es/img/hori.png ), url( http://www.14denoviembre.es/img/stars_5.png ); background-repeat: repeat-x,repeat-x repeat-y;
        transform:translate3D(0em, 0em, 0); animation: stars 21s ease; transform-style: preserve-3d;
      }

(function(){
      /**
        author: @manufosela
        2013/08/27    copyleft 2013

        ShootingStar class Main Methods:
          launch: launch shooting stars every N seconds received by param. 10 seconds by default.
          launchStar: launch a shooting star. Received options object by param with:
             - dir (direction between 0 and 1)
             - life (between 100 and 400)
             - beamSize (between 400 and 700)
             - velocity (between 2 and 10)
      **/

      ShootingStar = function( id ) {
        this.n = 0;
        this.m = 0;
        this.defaultOptions = { velocity:8, starSize:10, life:300, beamSize:400, dir:-1 };
        this.options = {};
        id = ( typeof id != "undefined" )?id:"";
        this.capa = ( $( id ).lenght > 0 )?"body":id;
        this.wW = $( this.capa ).innerWidth();
        this.hW = $( this.capa ).innerHeight();
      };

      ShootingStar.prototype.addBeamPart = function( x, y ) {
        this.n++;
        var name = this.getRandom( 100, 1 );
        $( "#star"+name ).remove();
        $( this.capa ).append( "<div id='star"+name+"'></div>" );
        $( "#star"+name ).append( "<div id='haz"+this.n+"' class='haz' style='position:absolute; color:#FF0; width:10px; height:10px; font-weight:bold; font-size:"+this.options.starSize+"px'>·</div>" );
        if ( this.n > 1 ) $( "#haz" + ( this.n - 1 ) ).css( { color:"rgba(255,255,255,0.5)" } );
        $( "#haz" + this.n ).css( { top: y + this.n, left: x + ( this.n * this.options.dir ) } );
      }

      ShootingStar.prototype.delTrozoHaz = function() {
        this.m++;
        $( "#haz" + this.m ).animate( {opacity:0}, 75 );
        if ( this.m >= this.options.beamSize ) { $( "#ShootingStarParams" ).fadeOut( "slow" ); }
      }

      ShootingStar.prototype.getRandom = function( max, min ) {
        return Math.floor( Math.random() * (max - min + 1)) + min;
      }

      ShootingStar.prototype.toType = function ( obj ) {
        if ( typeof obj === "undefined" ) { return "undefined"; /* consider: typeof null === object */ }
        if ( obj === null ) { return "null"; }
        var type = Object.prototype.toString.call( obj ).match( /^\[object\s(.*)\]$/ )[1] || '';
        switch ( type ) {
          case 'Number': if ( isNaN( obj ) ) { return "nan"; } else { return "number"; }
          case 'String': case 'Boolean': case 'Array': case 'Date': case 'RegExp': case 'Function': return type.toLowerCase();
        }
        if ( typeof obj === "object" ) { return "object"; }
        return undefined;
      }

      ShootingStar.prototype.launchStar = function( options ) {
        if ( this.toType( options ) != "object" ) { options = {}; }
        this.options = $.extend( {}, this.defaultOptions, options );
        this.n=0;
        this.m=0;
        var i=0, l=this.options.beamSize,
            x=this.getRandom( this.wW - this.options.beamSize - 100, 100 ), y=this.getRandom( this.hW - this.options.beamSize - 100, 100 ),
            self = this;
        for( ; i<l; i++ ) { setTimeout( function(){ self.addBeamPart( x, y ); }, self.options.life + ( i * self.options.velocity ) ); }
        for( i=0; i<l; i++ ) { setTimeout( function(){ self.delTrozoHaz() }, self.options.beamSize + ( i * self.options.velocity ) ); }
        $( "#ShootingStarParams" ).html( "Launching shooting star. PARAMS: wW: " + this.wW + " - hW: " + this.hW + " - life: " + this.options.life + " - beamSize: " + this.options.beamSize + " - velocity: " + this.options.velocity );
        $( "#ShootingStarParams" ).fadeIn( "slow" );
      }

      ShootingStar.prototype.launch = function( everyTime ) {
        if ( this.toType( everyTime ) != "number" ) { everyTime = 10; }
        everyTime = everyTime * 1000;
        this.launchStar();
        var self = this;
        setInterval( function() {
          var options = {
            dir: ( self.getRandom( 1, 0 ))?1:-1,
            life: self.getRandom( 400, 100 ),
            beamSize: self.getRandom( 700, 400 ),
            velocity: self.getRandom( 10, 4 )
          }
          self.launchStar( options );
        }, everyTime );
      }

})();

Answer 1

body {
    overflow: hidden;
}

This prevents scrollbars from appearing when content of an element goes beyond its dimensions. 这样可以防止在元素的内容超出其尺寸时出现滚动条。

调整脚本大小的网页

问题描述

1 个解决方案

解决方案1
0 2016-03-27 20:50:33

调整脚本大小的网页

问题描述

1 个解决方案

解决方案1 0 2016-03-27 20:50:33

解决方案1
0 2016-03-27 20:50:33