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. IoC容器的初始化过程

    1.简单来说,IoC容器的初始化是由前面介绍的refresh()方法来启动的,这个方法标志着IoC容器的正式启动. 2.具体来说,这个启动包括BeanDefinition的Resource定位.载入和 ...

  2. 支持向量机 support vector machine

    SVM(support Vector machine) (1) SVM(Support Vector Machine)是从瓦普尼克(Vapnik)的统计学习理论发展而来的,主要针对小样本数据进行学习. ...

  3. Python实现Linux下文件查找

    import os, sys def search(curpath, s): L = os.listdir(curpath) #列出当前目录下所有文件 for subpath in L: #遍历当前目 ...

  4. 编译内核模块出现error: negative width in bit-field　错误

    今天在写一个简单的内核测试模块的时候出现了一个挺奇怪的问题,网上查了一下也没人解决,自己试了好久终于解决了,所以分享出来供大家参考,先贴出源码: /************************** ...

  5. BootstrapDialog自动加<br> BUG处理

    用惯了其他的ui框架 ,综合感觉BootstrapDialog算是最好的一个了. 因为不想在js中写过多的html代码,所以习惯的写法,把代码写在html中,js引用 实例如下: html代码 < ...

  6. 添加远程链接MySQL的权限

    mysql> grant 权限1,权限2,…权限n on 数据库名称.表名称 to 用户名@用户地址 identified by ‘连接口令’; 权限1,权限2,…权限n代表select,ins ...

  7. JQ中的html()、text()、val()的用法

    <input type="text" val=""> 用val(); <sapn>你好</sapn>  用text() &l ...

  8. Oracle10G的Sga_max_size和sga_target应该如何设置啊！

    1调整原因 我们的客户反应现在我们公司的软件使用起来比较漫.目前他们已经用快要两年了.根据用户反应的情况,公司派我到现场做数据库调优.我在现场走访了几个部门,也向操作人员了解了一些情况.我初步分析认定 ...

  9. WPF 绑定三(绑定List中指定的字符串)

    xaml: <Window x:Class="WpfApplication1.Window3" xmlns="http://schemas.microsoft.co ...

  10. hadoop分布式安装过程

    一.安装准备及环境说明 1.下载hadoop-1.2.1,地址:http://apache.spinellicreations.com/hadoop/common/stable/hadoop-1.2. ...