Jquery 学习插件第一天

图片缩放效果实现

最新推荐文章于 2025-09-12 14:04:02 发布

weixin_34260991

最新推荐文章于 2025-09-12 14:04:02 发布

阅读量66

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xinlinux/p/4193209.html

本文介绍了一种使用jQuery实现的图片缩放效果，通过简单的HTML结构配合CSS样式及jQuery插件，可以在用户交互时平滑地改变图片大小，增强用户体验。

<!DOCTYPE html>
<html>
 <head> 
  <meta charset="UTF-8" /> 
  <title>学习插件</title> 
  <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> 
  <style>
    body{
        margin:0;
        padding:0;
    }
    li { list-style:none;width:300px;height:300px;
    float:left;}
    img{width:100%;height:100%;}
    #show ul{
        margin:0;
        padding:0;
        overflow:hidden;
    }
    
    img , div{transition:All 0.4s ease-in-out;    -webkit-transition:All 0.4s ease-in-out;    -moz-transition:All 0.4s ease-in-out;    -o-transition:All 0.4s ease-in-out;}
    
    .scale{
        transform:scale(1.2);
        -webkit-transform:scale(1.2); 
        -moz-transform:scale(1.2);
        -o-transform:scale(1.2);
        -ms-transform:scale(1.2);
    }
</style>
 </head>  
 <body> 
<ul id="show"> 
    <li><img src="1.jpg"/></li> 
    <li><img src="2.jpg"/></li> 
    <li><img src="3.jpg"/></li> 
    <li><img src="4.jpg"/></li> 
    <li><img src="5.jpg"/></li> 
</ul> 
<p style="clear:both;"></p>
<div style="width:100px;height:100px;background:#ccc;">
    

</div>
  
  
  <script type="text/javascript">
  
(function($) {
　　$.fn.extend({
　　"ShowImg": function(options) {
　　    options = $.extend({},{
                border: "3px solid red",
                height: "100px"
            },options); 
            
            //这里用了$.extend方法，扩展一个对象
        /*** return this.hover(function() { //return为了保持jQuery的链式操作
                　　$(this).css({
                    "width": options.width,
                    "height": options.height
                });　　
            },
            function() {
            　　$(this).css({
                    "width": "100px",
                    "height": "100px"
                });　　
            });*///
            var op = options.border;
            return this.click(function(){
                var had = $(this).hasClass('scale');
                if(!had){
                    $('#show').find('img').removeClass('scale');
                    $('#show').find('img').css({
                        "border": "",
                    });
                    $(this).addClass('scale');
                    $(this).css({
                        "border": "3px solid red",
                    })
                }else{
                    $(this).removeClass('scale');
    
                }
            })
        }
    });
   
})(jQuery);

$(function() {
　　$("img").ShowImg({    });
　　$("div").ShowImg({    });
    　 // alert($.urlParam());
});
</script>  
 </body>
</html>