zoukankan      html  css  js  c++  java
  • 用jQuery实现图片预加载和等比例缩小,大图可以点击关闭

    <!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></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    * {
    margin:0;
    padding:0;
    font-family:Arial, sans-serif;
    font-size:12px;
    }
    img{
    border:0;
    }
    ul.thumbs {
    float:left;
    list-style:none;
    margin:0;
    padding:0;
    }
    ul.thumbs li {
    float:left;
    margin:10px 160px;
    }
    ul.thumbs li a.imgTip{
    display:block;
    }
    #newBigPop {
    border:1px solid #999;
    position:absolute;
    left:0px;
    top:0px;
    display:none;
    }
    .loader {
    background:#fff url(images/loading.gif) center center no-repeat;
    }

    #newBigPop .close{
    position:absolute;
    right:2px;
    top:2px;
    color:#EF7E2C;
    padding:4px;
    text-decoration: none;
    }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">

    /* jQuery图片预加载插件。 */
    jQuery.fn.loadthumb = function(options) {
    options = $.extend({
    src : ""
    },options);
    var _self = this;
    _self.hide();
    var img = new Image();
    $(img).load(function(){
    _self.attr("src", options.src);
    _self.fadeIn("slow");
    }).attr("src", options.src); //.atte("src",options.src)要放在load后面,
    return _self;
    }

    $(document).ready(function(){
    $('.imgTip').each(function(i){
    $('.small_' + (i + 1)).bind("mouseenter",function(e){
    var top = $(this).offset().top + $(this).height()/2;
    var left = $(this).offset().left + $(this).width()/2;
    if( $(e.relatedTarget).attr("id")!="newBigPop" && $(e.relatedTarget).attr("id")!="bigimg" ){
    $("#newBigPop").css({
    position:"absolute",
    top:top,
    left:left
    })
    .show();
    $('#bigimg').loadthumb({src:"images/big_" + (i + 1) + ".jpg"});
    }
    return false;
    }).bind("mouseleave",function(e){
    if( $(e.relatedTarget).attr("id")!="newBigPop" && $(e.relatedTarget).attr("id")!="bigimg" ){
    $("#newBigPop").hide();
    }
    return false;
    });
    });
    $("#newBigPop").bind("mouseleave",function(e){
    if( !$(e.relatedTarget).attr("src") && !$(e.relatedTarget).parent().hasClass("imgTip") ){
    $(this).hide();
    }
    return false;
    })
    $("#newBigPop .close").bind("click",function(){
    $("#newBigPop").fadeOut(100);
    return false;
    })
    });

    </script>
    </head>

    <body>


    <ul class="thumbs">
    <li><a class="small_1 imgTip" href="#"><img src="images/small_1.jpg" /></a></li>
    <li><a class="small_2 imgTip" href="#"><img src="images/small_2.jpg" /></a></li>
    </ul>



    <div id="newBigPop" class="loader">
    <img src="images/big_2.jpg" id="bigimg" />
    <a href="#" class="close">关闭</a>
    </div>

    </body>
    </html>
    图片用的是同一目录下的small和big作为命名前缀。
    原文地址:http://www.corange.cn/archives/2010/07/3670.html
  • 相关阅读:
    Running APP 使用说明
    Android 控件八 WebView 控件
    Android 控件七 ImageView 控件
    Android 控件六 CheckBox 控件
    Android 控件五 RadioButton 控件
    Android 控件四 EditText 控件
    Android 控件三 TextView 控件实现 Button
    Android 控件二 Button
    Android 基础控件演示实例
    Android 控件一 TextView
  • 原文地址:https://www.cnblogs.com/zerogo/p/1787336.html
Copyright © 2011-2022 走看看