使用jQuery创建带标注浮层效果#2

Annotation Overlay Effect with jQuery 点击图片查看覆盖层动效。

模板，教程

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 1796
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

<body>
    <div class="content">
        <h1>Annotation Overlay Effect with jQuery</h1>
        <h3>Click on the images to see the notes for each item</h3>

</div>
    </div>

<script type="text/javascript" src="/uploads/160101/jquery-1.4.2.min.js"></script>
    <script type="text/javascript">
        $(function() {
            //main div
            var $portfolio = $('#portfolio');

//click event for the image : 
            //show the overlay
            $portfolio.find('.image_wrap').bind('click', function() {
                var $elem = $(this);
                var $image = $elem.find('img:first');
                $image.stop(true)
                    .animate({
                        'width': '400px',
                        'height': '400px'
                    }, 250);

//the overlay is the next element
                var opacity = '1';
                if ($.browser.msie)
                    opacity = '0.5'
                $elem.next()
                    .stop(true)
                    .animate({
                        'width': '500px',
                        'height': '500px',
                        'marginTop': '-250px',
                        'marginLeft': '-250px',
                        'opacity': opacity
                    }, 250, function() {
                        //fade in the annotations
                        $(this).find('img').fadeIn();
                    });
            });

//click event for the overlay :
            //show the image again and hide the overlay
            $portfolio.find('.zoom_overlay').bind('click', function() {
                var $elem = $(this);
                var $image = $elem.prev()
                    .find('img:first');
                //hide overlay
                $elem.find('img')
                    .hide()
                    .end()
                    .stop(true)
                    .animate({
                        'width': '400px',
                        'height': '400px',
                        'marginTop': '-200px',
                        'marginLeft': '-200px',
                        'opacity': '0'
                    }, 125, function() {
                        //hide overlay
                        $(this).hide();
                    });

//show image     
                $image.stop(true)
                    .animate({
                        'width': '500px',
                        'height': '500px'
                    }, 250);
            });
        });
    </script>
</body>

</html>

Annotation Overlay Effect with jQuery 点击图片查看覆盖层动效。

模板，教程

编辑器支持Emmet

快捷键

Annotation Overlay Effect with jQuery 点击图片查看覆盖层动效。

模板，教程

使用CSS3和jQuery创建的文章排版效果 - 3D折纸标题

使用jQuery实现浮层效果的菜单列表

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：