实例代码 - 手册网

实例代码“Ctrl+/”提示“F11/ESC”全屏返回格式化恢复运行

<!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=UTF-8"/>
        <title>Portfolio缩略图滑动插件</title>
        <link rel="stylesheet" type="text/css" href="/api/jq/5733e36178e0d/css/style.css" />
        <link rel="stylesheet" type="text/css" href="/api/jq/5733e36178e0d/cloud-zoom/cloud-zoom.css" />
        <link rel="stylesheet" type="text/css" href="/api/jq/5733e36178e0d/fancybox/jquery.fancybox-1.3.4.css" />
        <script src="/api/jq/5733e36178e0d/js/cufon-yui.js" type="text/javascript"></script>
        <script src="/api/jq/5733e36178e0d/js/ChunkFive_400.font.js" type="text/javascript"></script>
        <script type="text/javascript">
            Cufon.replace('h1', {textShadow: '1px 1px #D1EF95'});
            Cufon.replace('h2', {textShadow: '1px 1px #D1EF95'});
            Cufon.replace('.footer');
        </script>
    </head>
    <body>
        <div class="wrapper">
            <h1>Portfolio </h1>
            <div class="line"></div>
            <p class="intro">
               这是一个滑动插件并带有fancybox弹出层。你可以浏览缩略图,看看当你在他们的放大效果
            </p>
            <div class="line"></div>
            <div id="content" class="content">
                <div class="item">
                    <div class="thumb_wrapper">
                        <div class="thumb">
                            <ul>
                                <li><a rev="group1" rel="zoomHeight:200, zoomWidth:400, adjustX: 10, adjustY:-4, position:'body'" class='cloud-zoom' href="/api/jq/5733e36178e0d/images/formstack1.jpg"><img src="/api/jq/5733e36178e0d/images/thumbs/formstack1.jpg" alt="Formstack 1"/></a></li>
                                <li><a rev="group1" rel="zoomHeight:200, zoomWidth:400, adjustX: 10, adjustY:-4, position:'body'" class='cloud-zoom' href="/api/jq/5733e36178e0d/images/formstack2.jpg"><img src="/api/jq/5733e36178e0d/images/thumbs/formstack2.jpg" alt="Formstack 2"/></a></li>
                                <li><a rev="group1" rel="zoomHeight:200, zoomWidth:400, adjustX: 10, adjustY:-4, position:'body'" class='cloud-zoom' href="/api/jq/5733e36178e0d/images/formstack3.jpg"><img src="/api/jq/5733e36178e0d/images/thumbs/formstack3.jpg" alt="Formstack 3"/></a></li>
                            </ul>
                        </div>
                        <a class="prev" href="#"></a>
                        <a class="next" href="#"></a>
                        <span>Hover to zoom, click to view</span>
                    </div>
                    <div class="description">
                        <h2>Formstack</h2>
                        <p>Quickly create any type of web form with our easy to use drag and drop form builder.
                            Seamlessly create HTML forms and embed them on your website or use style templates
                            to match your color, logo and overall look and feel.</p>
                        <a href="http://www.formstack.com" target="_blank">http://www.formstack.com</a>
                    </div>
                </div>
                <div class="item">
                    <div class="thumb_wrapper">
                        <div class="thumb">
                            <ul>
                                <li><a rev="group2" rel="zoomHeight:200, zoomWidth:400, adjustX: 10, adjustY:-4, position:'body'" class='cloud-zoom' href="/api/jq/5733e36178e0d/images/knowapp1.jpg"><img src="/api/jq/5733e36178e0d/images/thumbs/knowapp1.jpg" alt="Knowapp 1"/></a></li>
                                <li><a rev="group2" rel="zoomHeight:200, zoomWidth:400, adjustX: 10, adjustY:-4, position:'body'" class='cloud-zoom' href="/api/jq/5733e36178e0d/images/knowapp2.jpg"><img src="/api/jq/5733e36178e0d/images/thumbs/knowapp2.jpg" alt="Knowapp 2"/></a></li>
                                <li><a rev="group2" rel="zoomHeight:200, zoomWidth:400, adjustX: 10, adjustY:-4, position:'body'" class='cloud-zoom' href="/api/jq/5733e36178e0d/images/knowapp3.jpg"><img src="/api/jq/5733e36178e0d/images/thumbs/knowapp3.jpg" alt="Knowapp 3"/></a></li>
                            </ul>
                        </div>
                        <a class="prev" href="#"></a>
                        <a class="next" href="#"></a>
                        <span>Hover to zoom, click to view</span>
                    </div>
                    <div class="description">
                        <h2>Know!</h2>
                        <p>Track and share status of just about anything. Know! simplifies the time-consuming
                            task of relaying the state of projects by consolidating information into
                            easy-to-follow dashboards.</p>
                        <a href="#">http://www.shouce.ren/</a>
                    </div>
                </div>
                <div class="clear"></div>
                <div class="line"></div>
                <p class="intro">
                    For this demo we are showing you some of our sponsors, they have been a great support for our blog, so we thought
                    we could give something back in a fashionable way :)
                </p>
            </div>
        </div>
        
        <script type="text/javascript" src="http://libs.useso.com/js/jquery/1.4.4/jquery.min.js"></script>
        <script type="text/javascript" src="/api/jq/5733e36178e0d/fancybox/jquery.easing-1.3.pack.js"></script>
        <script type="text/javascript" src="/api/jq/5733e36178e0d/fancybox/jquery.fancybox-1.3.4.js"></script>
        <script type="text/javascript" src="/api/jq/5733e36178e0d/cloud-zoom/cloud-zoom.1.0.2.js"></script>
        <script type="text/javascript">
            $(function() {
                /*
                 fancybox init on each cloud-zoom element
                 */
                $("#content .cloud-zoom").fancybox({
                    'transitionIn': 'elastic',
                    'transitionOut': 'none',
                    'speedIn': 600,
                    'speedOut': 200,
                    'overlayShow': true,
                    'overlayColor': '#000',
                    'cyclic': true,
                    'easingIn': 'easeInOutExpo'
                });
                /*
                 because the cloud zoom plugin draws a mousetrap
                 div on top of the image, the fancybox click needs
                 to be changed. What we do here is to trigger the click
                 the fancybox expects, when we click the mousetrap div.
                 We know the mousetrap div is inserted after
                 the <a> we want to click:
                 */
                $("#content .mousetrap").live('click', function() {
                    $(this).prev().trigger('click');
                });
                /*
                 the content element;
                 each list item / group with several images
                 */
                var $content = $('#content'),
                        $thumb_list = $content.find('.thumb > ul');
                /*
                 we need to set the width of each ul (sum of the children width);
                 we are also defining the click events on the right and left arrows
                 of each item.
                 */
                $thumb_list.each(function() {
                    var $this_list = $(this),
                            total_w = 0,
                            loaded = 0,
                            //preload all the images first
                            $images = $this_list.find('img'),
                            total_images = $images.length;
                    $images.each(function() {
                        var $img = $(this);
                        $('<img/>').load(function() {
                            ++loaded;
                            if (loaded == total_images) {
                                $this_list.data('current', 0).children().each(function() {
                                    total_w += $(this).width();
                                });
                                $this_list.css('width', total_w + 'px');
                                //next / prev events
                                $this_list.parent()
                                        .siblings('.next')
                                        .bind('click', function(e) {
                                            var current = $this_list.data('current');
                                            if (current == $this_list.children().length - 1)
                                                return false;
                                            var next = ++current,
                                                    ml = -next * $this_list.children(':first').width();
                                            $this_list.data('current', next)
                                                    .stop()
                                                    .animate({
                                                        'marginLeft': ml + 'px'
                                                    }, 400);
                                            e.preventDefault();
                                        })
                                        .end()
                                        .siblings('.prev')
                                        .bind('click', function(e) {
                                            var current = $this_list.data('current');
                                            if (current == 0)
                                                return false;
                                            var prev = --current,
                                                    ml = -prev * $this_list.children(':first').width();
                                            $this_list.data('current', prev)
                                                    .stop()
                                                    .animate({
                                                        'marginLeft': ml + 'px'
                                                    }, 400);
                                            e.preventDefault();
                                        });
                            }
                        }).attr('src', $img.attr('src'));
                    });
                });
            });
        </script>
    </body>
</html>

AخA
 
<!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=UTF-8"/>
        <title>Portfolio缩略图滑动插件</title>
        <link rel="stylesheet" type="text/css" href="/api/jq/5733e36178e0d/css/style.css" />
        <link rel="stylesheet" type="text/css" href="/api/jq/5733e36178e0d/cloud-zoom/cloud-zoom.css" />
        <link rel="stylesheet" type="text/css" href="/api/jq/5733e36178e0d/fancybox/jquery.fancybox-1.3.4.css" />
        <script src="/api/jq/5733e36178e0d/js/cufon-yui.js" type="text/javascript"></script>
        <script src="/api/jq/5733e36178e0d/js/ChunkFive_400.font.js" type="text/javascript"></script>
        <script type="text/javascript">
            Cufon.replace('h1', {textShadow: '1px 1px #D1EF95'});
            Cufon.replace('h2', {textShadow: '1px 1px #D1EF95'});
            Cufon.replace('.footer');
        </script>
    </head>
    <body>
        <div class="wrapper">
            <h1>Portfolio </h1>
            <div class="line"></div>
            <p class="intro">
               这是一个滑动插件并带有fancybox弹出层。你可以浏览缩略图,看看当你在他们的放大效果