zoukankan      html  css  js  c++  java
  • 简单图片放大效果

    在今天我创造了一个小的代码段在JQuery,这次是关于图像缩放盘旋,这种特征可能适合一个网络摄影展,现场有许多内容,给一个小快速预览关于该物品。

    JQuery Image Zoom Hover

    <!DOCTYPE html>
    <html>
    <head>
        
    <title>JQuery Zoom Hover</title>
        
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        
    <script type="text/javascript" src="jquery-1.6.1.min.js"></script>
        
    <script type="text/javascript">
        $(document).ready(
    function() {
            
    var cont_left = $("#container").position().left;
            $(
    "a img").hover(function() {
                
    // hover in
                $(this).parent().parent().css("z-index"1);
                $(
    this).animate({
                   height: 
    "250",
                    
    "250",
                   left: 
    "-=50",
                   top: 
    "-=50"
                }, 
    "fast");
            }, 
    function() {
                
    // hover out
                $(this).parent().parent().css("z-index"0);
                $(
    this).animate({
                    height: 
    "150",
                     
    "150",
                    left: 
    "+=50",
                   top: 
    "+=50"
                }, 
    "fast");
            });

            $(
    ".img").each(function(index) {
                
    var left = (index * 160+ cont_left;
                $(
    this).css("left", left + "px");
            });
        });
        
    </script>
        
    <style type="text/css">
            #container 
    {
                text-align
    : center;
                position
    : absolute;
                left
    : 260px;
                margin-top
    : 150px;
                width
    : 790px;
            
    }
            .img 
    {
                position
    : fixed;
                z-index
    : 0;
            
    }
            .end 
    {
                margin-right
    : 0;
            
    }
            .clear 
    {
                clear
    : both;
            
    }
            .img a img 
    {
                position
    : relative;
                border
    : 0 solid #fff;
            
    }
        
    </style>
    </head>
    <body>
        
    <div id="container">
            
    <div class="img"><href="#"><img src="img/1.jpg"/></a></div>
            
    <div class="img"><href="#"><img src="img/2.jpg"/></a></div>
            
    <div class="img"><href="#"><img src="img/3.jpg"/></a></div>
            
    <div class="img"><href="#"><img src="img/4.jpg"/></a></div>
            
    <div class="img end"><href="#"><img src="img/5.jpg"/></a></div>
            
    <div class="clear"></div>
        
    </div>
    </body>
    </html>
  • 相关阅读:
    union all 与order by的连用
    oracle--trunc与to_char的区别
    oracle函数--trunc
    大公司能给你什么
    要么忍要么滚
    scp报错:not a regular file,解决方法:加参数 -r
    hive中的一种假NULL现象
    使用Python scikit-learn 库实现神经网络算法
    随机梯度下降算法求解SVM
    机器学习算法--svm实战
  • 原文地址:https://www.cnblogs.com/Jaylong/p/slide14.html
Copyright © 2011-2022 走看看