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. (转)国内外三个不同领域巨头分享的Redis实战经验及使用场景

    随着应用对高性能需求的增加,NoSQL逐渐在各大名企的系统架构中生根发芽.这里我们将为大家分享社交巨头新浪微博.传媒巨头Viacom及图片分享领域佼佼者Pinterest带来的Redis实践,首先我们 ...

  2. 生成HTMLTestRunner测试报告的操作步骤——Python+selenium自动化

    HTMLTestRunner是Python标准库的unittest模块的一个扩展,具体操作如下 1.安装 环境:Window8 步骤:1)http://tungwaiyip.info/software ...

  3. mysql颠覆实战笔记(一)--设计一个项目需求，灌入一万数据先

    版权声明:笔记整理者亡命小卒热爱自由,崇尚分享.但是本笔记源自www.jtthink.com(程序员在囧途)沈逸老师的<web级mysql颠覆实战课程 >.如需转载请尊重老师劳动,保留沈逸 ...

  4. grep恢复误删除文件内容(转)

    在 Linux 上如果事先没有用别名(alias)修改默认的 rm 功能,rm 后文件就会丢失,幸运的是,在一般的删除文件操作中,Linux 并不会立即清空存储该文件的 block 内容,而只会释放该 ...

  5. Raphael画圆弧

    paper.path([pathString]) A  椭圆 (rx ry x-axis-rotation larg-arc sweep-flag x y) 参数 rx 椭圆的横轴 ry 椭圆的纵轴 ...

  6. Android布局揭秘

    前言 今天把对于布局的一些理解写下来,主要内容包括控件的属性的继承关系,控件与容器的属性的关系,以及各种类的属性的使用. 控件的属性种类 通常意义上讲,我们在对一个控件进行属性赋值的时候大体上有种类型 ...

  7. 跟着PHP100第一季学写一个CMS(11-20)

    PS.刚发现IE并不兼容,有点悲剧  cms1.1密码处理 1.小知识:sha1($_answer) //加密为40位,不知道能不能破解 2.小知识:mysql_real_escape_string( ...

  8. Python开发【第一篇】Python模块中特殊变量

    模块中特殊变量 生产环境中,常用的就是__name__和__file__ __doc__ __package__ __cached__ __name__ __file__ 一. __doc__  #获 ...

  9. Microsoft Azure Preview portal 以及Preview Features介绍

    首先mooncake版本并不提供此类功能. 国际版会把将来推出的功能提供Preview,而且是免费的,有想研究未来技术以及的同学可以尝试 通过以下地址进入国际版,往下拉 http://azure.mi ...

  10. Oracle体系结构知识点的运用

    体系结构方面的优化问题: 设数据库很大,访问量非常高,共享池很小:这样共享池里面就无法存储很多解析过得sql语句,导致很多硬解析,这样数据库就非常缓慢.这个时候要加大共享池.如果是自动管理,就加大SG ...