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. [Bootstrap]组件（四）

    导航条 移动设备上折叠(可开关),超过规定视口标签时候水平展开模式 依赖插件 注意点:导航条内元素过多或其他原因导致元素内元素宽度过长,会引起折行-->解决:a.减少导航内元素或者减少宽度  b ...

  2. Shell指令

    Shell指令 1.Shell原理图 2.Shell指令的基本语法 Shell指令 Shell –选项 参数 Shell –选项 Shell参数 3.常用的Shell指令 1)ls指令:显示文件信息 ...

  3. 《CSS3秘笈》备忘录

    第一部分 1.  类名称区分大小写:.special和.SPECIAL不一样 2.  :focus 是通过单击或跳格集中在某个地方 3.  ::selection 没有单冒号,被选中的文本[ 但是在I ...

  4. Java线程角度的内存模型和volatile型变量

    内存模型的目标是定义程序中各个变量的访问 规则,即在虚拟机中将变量(包括实例字段,静态字段和构成数组对象的元素,不包括局部变量与方法参数,因为后者是线程私有的)存储到内存和从内存中取出变量这样的底层细 ...

  5. IOS动画隐式，显式，翻页

    //  ViewController.m //  IOS动画0817 // //  Created by 张艳锋 on 15/8/17. //  Copyright (c) 2015年 张艳锋. Al ...

  6. [windows phone开发]新生助手的开发过程与体会一

    功能需求分析: 1．  为到达学院的新生指路,给出所有路线,并给出必要提示: 2．  对学院建筑进行介绍: 3．  对学院周边环境(交通.购物.银行等)进行介绍: 4．  必要的应用设置 总体设计: ...

  7. 《DNS加密更新》RHEL6

    DNS加密更新: 继DNS更新之后,现在又玩DNS加密更新,差不多. DNS更新指定一台主机,那台主机或多台主机来更新它,其他主机没权限. DNS加密更新,谁有密码说就可以更新. 做过上次的更新之后, ...

  8. 基于FPGA的图像去噪

    目录 结构图 其中FPGA 控制模块为核心,通过它实现视频图像数据的获取.缓存.处理和控制各模块间通讯［1］.由CCD 相机对目标成像,高速图像数据由camera link 实时传输［2］,经信号转换 ...

  9. mysql数据库表格导出为excel表格

    在本地数据库中操作如下: 由于excel表格的编码是GBK,所以导出时要加一个设置字符编码: select * from 某个表 into outfile 'd:/文件名.xls' CHARACTER ...

  10. spring与MyBatis结合

    下面将介绍使用spring+mybatis的开发样例: 首先,笔者创建的是一个maven工程,在开发先先导入相关的依赖jar: pom.xml: <dependencies> <de ...