zoukankan      html  css  js  c++  java
  • jQuery照片伸缩效应,这不是一个简单的图像缩放,它不影响其它元素的布局

    之前在网上看到这样的效果,但我没有收藏夹网址,后来被我不知道如何来实现这种效果。

    如今,互联网已收集有关专门。真是功夫不负有心人,被我发现。


    我也努力过自己尝试着写:

    但仅仅是单纯的图片放大。并且还影响了图片周围的元素的布局(由于图片放大占领了更大的空间)。

    后来发现要灵活巧妙的运用overflow和position这两个属性,就能达到目的。事实上我认为CSS(CSS3)中的overflow和position(顺带的top,bottom,left,right)简直是做网页特效无解的组合,当然还是js(jquery)是老大。


    废话说了这么多,大家肯定还是非常疑惑:这究竟是什么特效呢?唉,我的语言表达能力还是非常一般,以下我就截图来说明好了:


    这个是网页打开的初始模样:


    当把鼠标停留在以上6张图片的随意一张图片的时候,会出现我所说的特效(这里我把鼠标放在第3张作为演示样例):


    你会发现图片是缩小了。鼠标放开图片感觉又放大了(回到初始状态),而没有图片溢出的现象,并且不影响其它图片和元素的布局。


    以下贴代码了:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>jQuery照片伸缩效果</title>
    </head>
    <!-- The Style -->
    <style type="text/css">
    *{
    	margin: 0;
    	padding: 0;
    }
    body{
    	font-family: "Myriad Pro", "Trebuchet MS", Helvetica, sans-serif;
    	font-size: 12px;
    	color: #fff;
    }
    #col {
    	 600px;
    	height:400px;
    	margin: 20px auto 0px auto;
        border: 1px solid #2D353F;
    }
    .pic {
         200px;
        height: 200px;
        margin: 0px;
        overflow: hidden;/*这边定义了overflow为hidden*/
        position: relative;/*这边定义了position为relative,这事实上是为了以下的img的position能够按照pic定位*/
        float: left;
    }
    /*图片的原始大小是500*333左右*/
    /*这里并没有对width宽度做文章,是对height高度做文章的*/
    .pic a img  {
    	height: 500px;
        border: none;
        position: absolute; /*正由于父标签定义了position。这边img定义position才有定位根据,要不然就是对于整个浏览器进行定位*/  
        top: -66.5px;
        left: -150px;
        opacity: 0.5;
        -moz-opacity: 0.5;
        filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);/*这边为了兼容浏览器。和opacity属性的作用是一样的*/
    }
    
    </style>
    <!-- The JavaScript -->
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $('#col img').hover(
                function(){
                    var $this = $(this);
                    $this.stop().animate({'opacity':'1.0','height':'200px','top':'0px','left':'0px'});
                },
                function(){
                    var $this = $(this);
                    $this.stop().animate({'opacity':'0.5','height':'500px','top':'-66.5px','left':'-150px'});
                }
            );
        });
    </script>
    <body>
         <div id="col">
            <div class="pic">
                <a href="#">
                    <img src="Images/1.jpg"/>
                 </a>       
            </div>
            <div class="pic">
                <a href="#">
                    <img src="Images/2.jpg"/>
                </a>       
            </div>
            <div class="pic">
                <a href="#">
                    <img src="Images/3.jpg"/>            
                </a>        
            </div>
            <div class="pic">
                <a href="#">
                    <img src="Images/4.jpg"/>            
                </a>        
            </div>
            <div class="pic">
                <a href="#">
                    <img src="Images/5.jpg"/>           
                </a>        
            </div>
            <div class="pic">
                <a href="#">
                    <img src="Images/6.jpg"/>            
                </a>        
            </div>
        </div>
    </body>
    </html>
    



    版权声明:本文博客原创文章,博客,未经同意,不得转载。

  • 相关阅读:
    yolo_to_onnx ValueError: need more tan 1 value to unpack
    yolo_to_onnx killed
    C++ 实现二维矩阵的加减乘等运算
    Leetcode 1013. Partition Array Into Three Parts With Equal Sum
    Leetcode 1014. Best Sightseeing Pair
    Leetcode 121. Best Time to Buy and Sell Stock
    Leetcode 219. Contains Duplicate II
    Leetcode 890. Find and Replace Pattern
    Leetcode 965. Univalued Binary Tree
    Leetcode 700. Search in a Binary Search Tree
  • 原文地址:https://www.cnblogs.com/lcchuguo/p/4728951.html
Copyright © 2011-2022 走看看