• <i id='ojEKr'><tr id='ojEKr'><dt id='ojEKr'><q id='ojEKr'><span id='ojEKr'><b id='ojEKr'><form id='ojEKr'><ins id='ojEKr'></ins><ul id='ojEKr'></ul><sub id='ojEKr'></sub></form><legend id='ojEKr'></legend><bdo id='ojEKr'><pre id='ojEKr'><center id='ojEKr'></center></pre></bdo></b><th id='ojEKr'></th></span></q></dt></tr></i><div id='ojEKr'><tfoot id='ojEKr'></tfoot><dl id='ojEKr'><fieldset id='ojEKr'></fieldset></dl></div>

      <small id='ojEKr'></small><noframes id='ojEKr'>

    1. <tfoot id='ojEKr'></tfoot>
        • <bdo id='ojEKr'></bdo><ul id='ojEKr'></ul>

        <legend id='ojEKr'><style id='ojEKr'><dir id='ojEKr'><q id='ojEKr'></q></dir></style></legend>

        响应式图像悬停 - CSS/JQuery

        时间:2023-11-30

          <i id='T6r07'><tr id='T6r07'><dt id='T6r07'><q id='T6r07'><span id='T6r07'><b id='T6r07'><form id='T6r07'><ins id='T6r07'></ins><ul id='T6r07'></ul><sub id='T6r07'></sub></form><legend id='T6r07'></legend><bdo id='T6r07'><pre id='T6r07'><center id='T6r07'></center></pre></bdo></b><th id='T6r07'></th></span></q></dt></tr></i><div id='T6r07'><tfoot id='T6r07'></tfoot><dl id='T6r07'><fieldset id='T6r07'></fieldset></dl></div>
          <tfoot id='T6r07'></tfoot>
            <tbody id='T6r07'></tbody>
              <bdo id='T6r07'></bdo><ul id='T6r07'></ul>

                • <legend id='T6r07'><style id='T6r07'><dir id='T6r07'><q id='T6r07'></q></dir></style></legend>
                • <small id='T6r07'></small><noframes id='T6r07'>

                  本文介绍了响应式图像悬停 - CSS/JQuery的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着跟版网的小编来一起学习吧!

                  问题描述

                  我遵循了本教程(http://mattbango.com/notebook/code/hover-zoom-effect-with-jquery-and-css/)并构建了一个我想在我的网站上使用的图像悬停插件.

                  I followed this tutorial (http://mattbango.com/notebook/code/hover-zoom-effect-with-jquery-and-css/) and built out a image-hover plugin that I'd like to use on my site.

                  我唯一的问题是我希望它能够响应式地工作,根据我的 960gs 缩放图像.

                  The only problem I have is that I want it to work responsively, scaling the images according to my 960gs.

                  这是我到目前为止的小提琴:http://jsfiddle.net/Ak94R/6/

                  Here's the fiddle I have so far: http://jsfiddle.net/Ak94R/6/

                  .viewport {
                      float: left;
                      height: 360px;
                      margin: 0 9px 9px 0;
                      overflow: hidden;
                      position: relative;
                      width: 360px;
                  

                  }

                  我不想将该图像从 730 像素/730 像素缩小到 360 像素/360 像素,而是将其从 200% 缩小到 100%.我还需要将主剪辑 div (.viewport) 的大小设置为 100%.任何帮助将不胜感激!

                  Instead of shrinking that image from 730px/730px to 360px/360px, I want to shrink it from 200% to 100%. I also need the main clipping div (.viewport) to be sized at 100%. Any help would be greatly appreciated!

                  推荐答案

                  好的,我刚刚花了几分钟时间 纯 CSS 解决方案.做同样的事情,不需要 JS.完全响应,因为它适用于百分比.HTML 如下所示:

                  Ok, I've just spend a few minutes for a CSS only solution. Does the same thing and no JS required. Fully responsive since it works with percentages. The HTML looks like this:

                  <div class="viewport_css">
                      // I have to use a dummy image to force dimensions
                      <img class="dummy" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" />
                      <a class="imgwrapper" href="#">
                          <img src="http://www.lorempixel.com/730/730/" alt="More Info" />
                      </a>
                  </div>
                  

                  CSS 部分:

                  .viewport_css {
                      position: relative;
                      max-width: 360px;
                      height: auto;
                      overflow: hidden;
                  }
                  
                  // make sure viewport_css always is square shaped
                  .viewport_css .dummy {
                      width: 100%;
                      height: auto;
                      display: block;
                  }
                  
                  .viewport_css a,
                  .viewport_css a:hover:before,
                  .viewport_css a:hover:after {
                      position: absolute;
                      left: 0;
                      right: 0;
                  }
                  .viewport_css a,
                  .viewport_css a:hover:after {
                      top: 0;
                      bottom: 0;
                  }
                  
                  .viewport_css a:hover:after {
                      content: '';
                      display: block;
                      z-index: 100;
                      background-color: rgba(255, 0, 0, .5);    
                  }
                  
                  .viewport_css a:hover:before {
                      content: 'View';
                      color: #fff;
                      top: 50%;
                      text-align: center;
                      z-index: 200;
                      margin-top: -0.5em;
                  }
                  
                  .viewport_css .imgwrapper {
                      width: 200%;
                      height: 200%;
                      margin-left: -50%;
                      margin-top: -50%;
                      transition: all 1s ease-in;  
                  }
                  
                  .viewport_css .imgwrapper img {
                      width: 100%;
                      height: auto;
                      display: block;
                  }
                  
                  .viewport_css .imgwrapper:hover {
                      width: 100%;
                      height: 100%;
                      margin-left: 0;
                      margin-top: 0;
                  }
                  

                  这篇关于响应式图像悬停 - CSS/JQuery的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!

                  上一篇:用于生成多色文本的 jQuery 插件,在悬停时会改变颜色 下一篇:如何使悬停在活动按钮上不使用悬停效果?

                  相关文章

                • <tfoot id='huOk4'></tfoot>

                      <bdo id='huOk4'></bdo><ul id='huOk4'></ul>

                    1. <legend id='huOk4'><style id='huOk4'><dir id='huOk4'><q id='huOk4'></q></dir></style></legend>

                    2. <small id='huOk4'></small><noframes id='huOk4'>

                    3. <i id='huOk4'><tr id='huOk4'><dt id='huOk4'><q id='huOk4'><span id='huOk4'><b id='huOk4'><form id='huOk4'><ins id='huOk4'></ins><ul id='huOk4'></ul><sub id='huOk4'></sub></form><legend id='huOk4'></legend><bdo id='huOk4'><pre id='huOk4'><center id='huOk4'></center></pre></bdo></b><th id='huOk4'></th></span></q></dt></tr></i><div id='huOk4'><tfoot id='huOk4'></tfoot><dl id='huOk4'><fieldset id='huOk4'></fieldset></dl></div>