JQuery实现电子相册的程序

谁能把http://www.guanxin.com/首页的FLASH展示转换为图片和JS的代码啊？
不用FLASH实现，其他方法都可以

解决方案 »

  1.   

    index.html代码
    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <link rel="stylesheet" type="text/css" href="zoomer.css" media="screen" />
    <title>Zoomer for jQuery</title>
    </head>
    <body>
    <div id="content">
        <div class="container">
            <ul class="thumb">
                <li><img src="images/robots.jpg" alt="Robots like cameras"/></li>
                <li><img src="images/monster.jpg" alt="Monsters!" /></li>
                <li><img src="images/santa.jpg" alt="Santa down under" /></li>
                <li><img src="images/thumb6.jpg" alt="Sponguebob!" /></li>
                <li><img src="images/thumb7.jpg" alt="Star Wars" /></li>
                <li><img src="images/hulk.jpg" alt="Hulk Smash!" /></li>
                
                <li><img src="images/dino.png" alt="Dinosaur time" /></li>
                <li><img src="images/orange.jpg" alt="Orange car" /></li>
                <li><img src="images/alien.jpg" alt="Aliens!" /></li>
                <li><img src="images/supe.jpg" alt="It's Superman!" /></li>
                <li><img src="images/garfield.jpg" alt="Where's my lasagne?" /></li>
                <li><img src="images/bridge.jpg" alt="The bridge at Sunset" /></li>
                
                <li><img src="images/peanuts.jpg" alt="Peanuts!" /></li>
                <li><img src="images/thumb5.jpg" alt="1956 Yellow Car" /></li>
                <li><img src="images/thumb4.jpg" alt="Ooooh. Pretty" /></li>
                <li><img src="images/thumb3.jpg" alt="Lets build something" /></li>
                <li><img src="images/thumb2.jpg" alt="Puppy love" /></li>
                <li><img src="images/thumb1.jpg" alt="It's a Toy Story" /></li>
                
                <li><img src="images/robots.jpg" alt="Robots like cameras"/></li>
                <li><img src="images/monster.jpg" alt="Monsters!" /></li>
                <li><img src="images/santa.jpg" alt="Santa down under" /></li>
                <li><img src="images/thumb6.jpg" alt="Sponguebob!" /></li>
                <li><img src="images/thumb7.jpg" alt="Star Wars" /></li>
                <li><img src="images/hulk.jpg" alt="Hulk Smash!" /></li>
            </ul>
        </div>
    </div>
    <script type="text/javascript" src="jquery-latest.js"></script>
    <script type="text/javascript" src="zoomer.js"></script> 
    <script type="text/javascript">
    $(document).ready(function(){
      $('ul.thumb li').Zoomer({speedView:200,speedRemove:400,altAnim:true,speedTitle:400,debug:false});
    });
    </script>
    </body>
    </html>
    CSS代码
    body {
    font: Arial, Helvetica, sans-serif normal 10px;
    margin: 0;
    padding: 0;
    }
    .container{ width:452px; margin:0 auto;}
    ul.thumb {
    float: left;
    list-style: none;
    margin: 0;
    padding: 10px;
    background-color: white;
    }
    ul.thumb li {
    margin: 0;
    padding: 1px;
    float: left;
    position: relative;
    width: 70px;
    height: 70px;
    }
    ul.thumb li img {
    width: 70px;
    height: 70px;
    border: 1px solid #ddd;
    padding: 1px;
    background: #f0f0f0;
    position: absolute;
    left: 0;
    top: 0;
    -ms-interpolation-mode: bicubic;
    }
    ul.thumb li img.hover {
    margin-top:15px;
    background:url(images/thumb_bg.png) no-repeat center center;
    border: none;
    }
    .title {
    position:absolute;
    width:160px;
    height:35px;
    margin:0;
    font-weight:900;
    background:url(images/blue.png) no-repeat center center;
    padding:1px 0 0 0;
    text-align:center;
    color: #fff;
    }
    .play{
    position:absolute;
    z-index:12;
    width:35px;
    height:35px;
    margin:0;
    background:url(images/play.png) no-repeat center center;
    }
    zoomer.js代码
    (function($) {
        $.fn.Zoomer = function(b) {
            var c = $.extend({
                speedView: 200,
                speedRemove: 400,
                altAnim: false,
                speedTitle: 400,
                debug: false
            },
            b);
            var d = $.extend(c, b);
            function e(s) {
                if (typeof console != "undefined" && typeof console.debug != "undefined") {
                    console.log(s)
                } else {
                    alert(s)
                }
            }
            if (d.speedView == undefined || d.speedRemove == undefined || d.altAnim == undefined || d.speedTitle == undefined) {
                e('speedView: ' + d.speedView);
                e('speedRemove: ' + d.speedRemove);
                e('altAnim: ' + d.altAnim);
                e('speedTitle: ' + d.speedTitle);
                return false
            }
            if (d.debug == undefined) {
                e('speedView: ' + d.speedView);
                e('speedRemove: ' + d.speedRemove);
                e('altAnim: ' + d.altAnim);
                e('speedTitle: ' + d.speedTitle);
                return false
            }
            if (typeof d.speedView != "undefined" || typeof d.speedRemove != "undefined" || typeof d.altAnim != "undefined" || typeof d.speedTitle != "undefined") {
                if (d.debug == true) {
                    e('speedView: ' + d.speedView);
                    e('speedRemove: ' + d.speedRemove);
                    e('altAnim: ' + d.altAnim);
                    e('speedTitle: ' + d.speedTitle)
                }
    /*鼠标移到元素上要触发的函数*/
                $(this).hover(function() {
                    $(this).css({
                        'z-index': '12'
                    });
    if ($("img").get(5)){
    $(this).find('img').addClass("hover").stop().animate({
    marginTop: '0',
    marginLeft: '-70',
    bottom: '0',
    right: '0',
    width: '144px',
    height: '144px',
    padding: '1px'
    },
    d.speedView);
    }else{
    $(this).find('img').addClass("hover").stop().animate({
    marginTop: '0',
    marginLeft: '0',
    top: '0',
    left: '0',
    width: '142px',
    height: '142px',
    padding: '1px'
    },
    d.speedView);
    }
                    if (d.altAnim == true) {
                        var a = $(this).find("img").attr("alt");
    //var offset = $("li").offset();
    //var a = "left: " + offset.left + ", top: " + offset.top;
    if (a.length != 0) {
                            $(this).prepend('<span class="title">' + a + '</span>');
                            $('.title').animate({
                                marginLeft: '-72px',
                                marginTop: '-80px'
                            },
                            d.speedTitle).css({
                                'z-index': '12',
                                'position': 'absolute',
                                'float': 'left'
                            })
    $(this).prepend('<a href="#"><span class="play"></span></a>');
                            $('.play').animate({
                                marginLeft: '52px',
                                marginTop: '60px'
                            })
                        }
                    }
                },
                function() {
                    $(this).css({
                        'z-index': '0'
                    });
                    $(this).find('img').removeClass("hover").stop().animate({
                        marginTop: '0',
                        marginLeft: '0',
                        top: '0',
                        left: '0',
                        width: '70px',
                        height: '70px',
                        padding: '1px'
                    },
                    d.speedRemove);
                    $(this).find('.title').remove()
    $(this).find('.play').remove()
                })
            }
    /*每次点击后依次调用函数*/
    $(this).toggle(function () {
    $(this).find('img').removeClass("hover").stop().animate({
    marginTop: '0',
    marginLeft: '0',
    top: '0',
    left: '0',
    width: '70px',
    height: '70px',
    padding: '1px'
    },
    d.speedRemove);
    $(this).find('.title').empty()
    $(this).find('.play').empty()
    $(this).prepend('<div id="book" style="width:357px;height:142px;background:#ccc;border:solid 1px #ccc; z-index:13;position:absolute;"><div id="left" style="width:177px;height:142px;float:left;background:#F6DBC5;"></div><div id="right" style="width:177px;height:142px;float:left;background:#F6DBC5;margin-left:3px;text-align:right;"><p style="font-size:12px;color:#999;cursor:pointer;margin-top:120px;">返回上级&nbsp;&nbsp;</p></div></div>');

      },
      function () {
    $(this).css({
                        'z-index': '0'
                    });
                    $(this).find('img').removeClass("hover").stop().animate({
                        marginTop: '0',
                        marginLeft: '0',
                        top: '0',
                        left: '0',
                        width: '70px',
                        height: '70px',
                        padding: '1px'
                    },
                    d.speedRemove);
                    $(this).find('.title').remove()
    $(this).find('.play').remove()
    $(this).find('#book').remove()
      })
        }
    })(jQuery);
      

  2.   

    写一个静态的HTML的相册
    然后把你的第一列 和第2列 的样式写成 动态情况下 变大的样子然后就可以查找原因和调整了
      

  3.   

    http://www.aspxcs.net/HTML/1333023138.html