1.层居中

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

    <script type="text/javascript" src="jquery-1.9.1.js"></script>

</head>

<body>

    <div id="pop">

    <img src="1.jpg" alt="¥" class="aboutus_img" />

    </div>

    <script type="text/javascript">

        showDiv($("#pop"));

        function showDiv(obj){

         $(obj).show();

         center(obj);

         $(window).scroll(function(){

          center(obj);

         });

         $(window).resize(function(){

          center(obj);

         });

        }

        function center(obj){

         var width = $('body').width();

         $(obj).css({

          "position": "absolute",

          "left": width/2-200,

          "top":  '160px'

         });

        }

</script>  

    </body>

</html>

2.弹出层

<html>

<head>

    <script type="text/javascript" src="jquery-1.9.1.js"></script>

    <script type="text/javascript">

            $(function() {

            $(".aboutus_img").click(function(){

                //加入一个DIV(暗层),加入BODY中

                var background = $("<div></div>");

                $(background).attr("id","overlaybackground").animate({

                    'opacity':'.6'

                },0).css({

                    "width"  : $(document).width(),

                    'height' : $(document).height(),

                    'background' : '#656565',

                    'z-index' : '100',

                    'position': 'absolute',

                    'top' : '0px',

                    'left' : '0px'

                    });

                $("body").append(background);

                //将加入一个图片

                var newimage = $("<img/>");

                var width = $('body').width();

                $(newimage).attr("src",$(this).attr("src")).attr("id","largeimage").css({

                                'left' : width/2-200,

                    'top' : '160px',

                    'position': 'absolute',

                    'z-index' : '500',

                    'display' : 'none'

                });

                $("#largeimage").attr("src",$(this).attr("src")); //重新赋予值

                $("body").append(newimage);

                //将图片滑出效果完成

                $("#largeimage").fadeIn(2000,function(){

                    $(this).click(function(){

                        $(this).fadeOut(1000);

                        $("div#overlaybackground").fadeOut(1000,function(){

                            $(this).remove();

                        })

                    })

                })

            });

        })

        </script>

</head>

<body>

<img src="1.jpg" alt="楼" class="aboutus_img" width="58" height="58"/>

<img src="1.jpg" alt="楼" class="aboutus_img" width="58" height="58"/>

<img src="1.jpg" alt="楼" class="aboutus_img" width="58" height="58"/>

<img src="1.jpg" alt="楼" class="aboutus_img" width="58" height="58"/>

<img src="1.jpg" alt="楼" class="aboutus_img" width="58" height="58"/>

<br/><br/><br/><br/>

<img src="2.jpg" alt="楼" class="aboutus_img" width="58" height="58"/>

<img src="2.jpg" alt="楼" class="aboutus_img" width="58" height="58"/>

<img src="2.jpg" alt="楼" class="aboutus_img" width="58" height="58"/>

<img src="2.jpg" alt="楼" class="aboutus_img" width="58" height="58"/>

<img src="2.jpg" alt="楼" class="aboutus_img" width="58" height="58"/>

</body>

</html>

jquery层居中,点击小图查看大图,弹出层居中代码的更多相关文章

  1. jquery层居中,点击小图查看大图,弹出层居中代码，顶部层固定不动，滚动条滚动情况

    jquery层居中,点击小图查看大图,弹出层居中代码 http://www.cnblogs.com/simpledev/p/3566280.html 见第一版,发现一个情况,如果页面内容多出一屏的情况 ...

  2. Jquery使用mouseenter和mouseleave实现鼠标经过弹出层且可以点击

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Jquery使用mousee ...

  3. js的事件冒泡和点击其他区域隐藏弹出层

    一.前言 在编写页面的时候,我们经常使用到弹出层.对于弹出层,原本的意义就是增加与用户的交互,提升用户的好感度.如果弹出层都没有较好的体验,那何谈通过交互来提升好感... 首先提出几个弹出层的注意点: ...

  4. 点击小图查看大图jQuery插件FancyBox魔幻灯箱

    今日发现一个不错的JQuery插件FancyBox,也许早就有这个插件了,但是没名字,我就暂且叫他魔幻灯箱吧,采用Mac系统的样式.网传主要有以下功能:■弹出的窗口有很漂亮的阴影效果.■关联的对象(就 ...

  5. 69.js--点击事件等比例弹出层div

    html:<!--弹出层导航栏--> <div class="public-nav-content"> <ul> <li><a ...

  6. JS弹出层制作，以及移动端禁止弹出层下内容滚动，overflow:hidden移动端失效问题

    HTML <div class="layer"> <div class="menu-list"> <span>社会</ ...

  7. 深入React事件系统(React点击空白部分隐藏弹出层；React阻止事件冒泡失效)

    只关注括号内问题的同学,可直接跳转到蓝字部分.(标题起的有点大,其实只讨论一个问题) 两个在React组件上绑定的事件,产生冲突后,使用e.stopPropagation(),阻止冒泡,即可防止事件冲 ...

  8. jQuery点击弹出层，弹出模态框，点击模态框消失

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 3 ...

  9. [转]jquery Fancybox丰富的弹出层效果

    本文转自:http://www.helloweba.com/view-blog-65.html Fancybox是一款优秀的jquery插件,它能够展示丰富的弹出层效果.前面我们有文章介绍了facyb ...

随机推荐

  1. hdu 2544 最短路 Dijkstra

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2544 题目分析:比较简单的最短路算法应用.题目告知起点与终点的位置,以及各路口之间路径到达所需的时间, ...

  2. Linux多线程编程（不限Linux）

    前言 线程?为什么有了进程还需要线程呢,他们有什么区别?使用线程有什么优势呢?还有多线程编程的一些细节问题,如线程之间怎样同步.互斥,这些东西将在本文中介绍.我在某QQ群里见到这样一道面试题: 是否熟 ...

  3. 3月3日 Mark

    感觉LeetCode OJ 水题较多... 不过回复基础就是这样吧.. 刚刚和Gaewah聊了下,后续可以考虑去做Topcoder的SRM或者codeforces,Mark.

  4. 理解ClassLoader基本原理

    当JVM(Java虚拟机)启动时,会形成由三个类加载器组成的初始类加载器层次结构:        bootstrap classloader                 |        exte ...

  5. php下载文件，添加响应头

    //下载,添加响应头信息 header('Content-type:application/octet-stream'); header('Content-Disposition:attachment ...

  6. Debian--changelog

    以前就研究过debian安装包的问题,当时也没有做相关方面的记录,当时也没有完全研究明白,现在重新研究下,现在写下我的一些笔记,等我研究明白了,我会整理出来,出个系列博客,有兴趣的同学,也可以去看E文 ...

  7. 私人定制自己的linux小系统

     私人定制自己的linux小系统 一.前言    linux操作系统至1991.10.5号诞生以来,就源其开源性和自由性得到了很多技术大牛的青睐,每个linux爱好者都为其贡献了自己的一份力,不管是在 ...

  8. ADO.NET笔记——存储二进制大对象（BLOB）

    相关知识 上传二进制大对象(Binary Large Object)(如图片.视频等)的基本编程步骤是: 在数据库中使用varbinary(MAX).varchar(MAX)或者nvarchar(MA ...

  9. 使用awstats分析iis站点的日志

    环境:win7 + iis7 + perl(ActivePerl-5.20.1.2000) + awstats 7.3 一.找到iis日志所在目录 建议全部都打勾 二.安装perl AWStats是p ...

  10. js正则学习及一些正则集合

    正则中文版详细说明请看中文版w3cschool-----http://www.w3school.com.cn/jsref/jsref_obj_regexp.asp微软正则表达式语言-快速参考:http ...