admin管理员组

文章数量:1289565

I want to expand a div to full screen on clicking on it. Just like this Fiddle js link here

I want to animate the same from its position. if I click the box it feels like expanding from its position please help me to achieve that

$('.myDiv').click(function(e){
    $(this).toggleClass('fullscreen'); 
});

.myDiv{background:#cc0000; width:100px; height:100px;float:left:margin:15px;}

.myDiv.fullscreen{
    z-index: 9999; 
    width: 100%; 
    height: 100%; 
    position: fixed; 
    top: 0; 
    left: 0; 
 }

<script src=".1.1/jquery.min.js"></script>
<div class="myDiv">
               my div
              <button>Full Screen</button>
   </div>
   
   <div class="myDiv">
               my div 2 
              <button>Full Screen</button>
   </div>

I want to expand a div to full screen on clicking on it. Just like this Fiddle js link here

I want to animate the same from its position. if I click the box it feels like expanding from its position please help me to achieve that

$('.myDiv').click(function(e){
    $(this).toggleClass('fullscreen'); 
});

.myDiv{background:#cc0000; width:100px; height:100px;float:left:margin:15px;}

.myDiv.fullscreen{
    z-index: 9999; 
    width: 100%; 
    height: 100%; 
    position: fixed; 
    top: 0; 
    left: 0; 
 }

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myDiv">
               my div
              <button>Full Screen</button>
   </div>
   
   <div class="myDiv">
               my div 2 
              <button>Full Screen</button>
   </div>

• javascript
• jquery
• html

Share Improve this question Follow edited May 23, 2019 at 9:40 SIMMORSAL 1,67411 gold badge2222 silver badges3737 bronze badges asked Oct 11, 2018 at 18:10 Anil KumarAnil Kumar 7111 gold badge11 silver badge33 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

Fullscreen animation

Now making a element fullscreen is pretty simple. It could be done with css alone.

.content {
  display: inline-grid;
  width: 150px;
  height: 100px;
  background-color: cornflowerblue;
  border-radius: 3px;
  transition: width 2s, height 2s;
  margin: 10px;
}

.content button {
  display: inline-block;
  justify-self: center;
  align-self: center;
  height: 2em;
}

.content:hover {
  width: 100vw;
  height: 1200vh;
}

<div class="container">
  <div class="content">
    <button>Fullscreen</button>
  </div>
</div>
<div class="content"></div>

Just adding a transition will make the element brake the layout.
To not break a layout you need:

1. Replace the element. (Below the Visibility : hidden element).
2. Give it an Absolute position.
3. Then set its width to fullscreen and animate its position so it can cover it.
4. Added an animation, transition

//Function is run on page load
$(function() {
  var full = $(".fullscreen");
  //Loops over all elements that have the class fullscreen
  full.each(function(index, elem) {
    $(elem).click(fullscreenClick);
  });

  function fullscreenClick() {
    //The button is this
    //We want to clone the parent
    var box = $(this).parent();
    //create a holder box so the layout stays the same
    var holder = $(box).clone(false, true);
    //and make it not visible
    $(holder).css({
      "visibility": "hidden"
    });

    //Get its position
    var pos = $(box).position();

    //Substitute our box with our holder
    $(box).before($(holder));

    //Set the position of our box (not holder)
    //Give it absolute position (eg. outside our set structure)
    $(box).css({
      "position": "absolute",
      "left": pos.left + "px",
      "top": pos.top + "px",
    });

    //Set class so it can be animated
    $(box).addClass("fullscreen");

    //Animate the position
    $(box).animate({
      "top": 0,
      "left": 0,
    }, 3000);

  }
});

* {
  margin: 0;
  padding: 0;
}

.container {
  display: inline-block;
}

.container .element {
  display: inline-block;
  background-color: cornflowerblue;
  margin: 5px;
  padding: 10px;
  width: 70px;
  height: 30px;
  transition: width 3s, height 3s;
  ;
}

.container .element.fullscreen {
  width: calc(100vw - 30px);
  height: calc(100vh - 30px);
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="element">
    <button class="fullscreen">Fullscreen</button>
  </div>
  <div class="element">
    <button class="fullscreen">Fullscreen</button>
  </div>
   <div class="element">
    <button class="fullscreen">Fullscreen</button>
  </div>
   <div class="element">
    <button class="fullscreen">Fullscreen</button>
  </div>
   <div class="element">
    <button class="fullscreen">Fullscreen</button>
  </div>
   <div class="element">
    <button class="fullscreen">Fullscreen</button>
  </div>
   <div class="element">
    <button class="fullscreen">Fullscreen</button>
  </div>
   <div class="element">
    <button class="fullscreen">Fullscreen</button>
  </div>
</div>

You can add animation on all styles changes adding next properties to myDiv class:

/* Animate all changes */
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;

I will show the changes on your example:

$('.myDiv').click(function(e)
{
    $(this).toggleClass('fullscreen');
});

.myDiv{
    background:#cc0000;
    width:100px;
    height:100px;
    float:left:
    margin:15px;
    
    /*Animations*/
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;   
}

.myDiv.fullscreen{
    z-index: 9999; 
    width: 100%; 
    height: 100%; 
    position: fixed; 
    top: 0; 
    left: 0; 
 }

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="myDiv">
    my div 1
    <button>Full Screen</button>
</div>

<div class="myDiv">
    my div 2 
    <button>Full Screen</button>
</div>

It's a bit of a plicated task, but this should give you an idea of how it's done. This code will run into some issues (clicking quickly will stack setTimeout) but does the basics.

The idea is that you calculate the current position of the element with getBoundingClientRect() and set initial position values with that, so that when you adjust the position to fixed, it will look as though it's still in the same spot - then when you override those values with the .fullscreen css, the transition property will allow them to animate.

The biggest issue here, which you'll notice if you click on the first div, is that it disappears from the layout and causes the second div to jump up to where it was, you'd probably need a way of preserving the layout. Hopefully this is helpful as a starting point anyway.

function getPosition(elem){
  const rect = elem.getBoundingClientRect()
  return {
    top: rect.top,
    left: rect.left,
    width: rect.width,
    height: rect.height
  }
}

function toPx(val){
  return [val, 'px'].join('')
}

$('.myDiv').click(function(e){
  if(this.classList.contains('fullscreen')){
    this.classList.remove('fullscreen')
    setTimeout(e => this.style.position = 'static', 1000)
    //close
  } else {
    //open
    let pos = getPosition(this)
    this.style.width = toPx(pos.width)
    this.style.height = toPx(pos.height)
    this.style.top = toPx(pos.top)
    this.style.left = toPx(pos.left)
    console.log(pos)
    this.classList.add('fullscreen')
    this.style.position = 'fixed'
  }
});

.myDiv{background:#cc0000; width:100px; height:100px;float:left:margin:15px;}

.myDiv.fullscreen{
    z-index: 9999; 
    width: 100% !important; 
    height: 100% !important;
    top: 0 !important;
    left: 0 !important; 
 }
 
 .animateTransitions {
  transition: all 1s;
 }

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myDiv animateTransitions">
               my div
              <button>Full Screen</button>
   </div>
   
   <div class="myDiv animateTransitions">
               my div 2 
              <button>Full Screen</button>
   </div>

Here's how i made it:

• JQuery: 3.6.0
• Css preprocessor: SCSS
• CSS Framework: Bootstrap 5.1.0

See it in action: https://codepen.io/illegalmexican/pen/NWYNVvg

Please note that i was answering a JQuery post. The fowlloing could be made in Vanilla Javascript for better performance. Also keep in mind that this could also be improved in terms of Accessibility standars by having a close button.

Html:

<div class="myDiv-Container">
    <div class="row">
        <div class="col-6">
            <div class="d-flex flex-wrap position-relative">
                <div class="myDiv w-50">
                    <div class="front bg-primary top-left">
                        <h1>Hello<br>World</h1>
                    </div>
                </div>
                <div class="myDiv w-50">
                    <div class="front bg-success top-right">
                        <h1>Hello<br>World</h1>

                    </div>
                </div>
                <div class="myDiv w-50">
                    <div class="front bg-danger  bottom-left">
                        <h1>Hello<br>World</h1>
                    </div>
                </div>
                <div class="myDiv w-50">
                    <div class="front bg-warning bottom-right">
                        <h1>Hello<br>World</h1>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

SCSS:

.myDiv-Container {
  height: 500px;
  width: 500px;
  position: relative;
}

.front {
  position: relative;
  text-align: center;
  display: flex;

  &.position-absolute {
    z-index: 1;
  }

  &.top-left {
    top: 0;
    left: 0;
  }

  &.bottom-left {
    bottom: 0;
    left: 0;
  }

  &.top-right {
    top: 0;
    right: 0;
  }

  &.bottom-right {
    bottom: 0;
    right: 0;
  }
}

JQuery:

document.addEventListener('DOMContentLoaded', function () {
  jQuery('.myDiv').each(function () {
    var frontElem = jQuery(this).find('.front');
    jQuery(this).on("click", function () {
      if (jQuery(this).hasClass('active')) {
        jQuery(this).removeClass('active');
        jQuery(frontElem).animate(
          {
            width: jQuery(this).width(),
            height: jQuery(this).height(),
          },
          500, function() {
            jQuery(frontElem).removeClass('position-absolute');
            jQuery(frontElem).css({
              width: '100%',
              height: '100%',
            });
          });
      } else {
        jQuery(frontElem).css({
          width: jQuery(this).width(),
          height: jQuery(this).height(),
        });
        jQuery(frontElem).addClass('position-absolute');
        jQuery(this).addClass('active');
        jQuery(frontElem).animate({
          'width': '100%',
          'height': '100%',
        }, 500);
      }
    });
  });   
});

本文标签： javascriptAnimate a div to full screen from its positionStack Overflow