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

时间：2023-01-22 13:40:36

jquery层居中,点击小图查看大图,弹出层居中代码
http://www.cnblogs.com/simpledev/p/3566280.html

见第一版，发现一个情况，如果页面内容多出一屏的情况下，点击查看图片的时候，弹出的层图片在最上面居中，并没有在当前的滚动栏处屏幕居中。修改代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<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',

                    'position': 'fixed',

                    '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>  

<style type="text/css">

#low_right

{

position: fixed;

width: 98%;

text-align: center;

}

</style>

</head>

<body>

    <div id="low_right" align="center">

        导航栏固定在顶部位置

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

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

    </div>

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

<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"/>

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

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

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

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

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

</body>

</html>

主要修改：//'position': 'absolute',
            'position': 'fixed',  改成固定位置，而不是相对位置。

样式low_right控制层不管滚动栏拉到下面，层一直固定在顶部。 另外：ie9浏览器如果没有顶部说明<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 这个效果出不来。在google,firefox浏览器中没有问题。

jquery层居中,点击小图查看大图,弹出层居中代码，顶部层固定不动，滚动条滚动情况的更多相关文章

  1. jquery层居中&comma;点击小图查看大图&comma;弹出层居中代码

    1.层居中 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...

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

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

  3. 点击图片查看大图（纯js）

    $(function(){ $(".pimg").click(function(){ var _this = $(this);//将当前的pimg元素作为_this传入函数 img ...

  4. android开发&colon;点击缩略图查看大图

    android中点击缩略图查看大图的方法一般有两种,一种是想新浪微博list页面那样,弹出一个窗口显示大图(原activity为背景).另一种就是直接打开一个新的activity显示大图. 1.第一种 ...

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

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

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

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

  7. Jquery和Javascript 实际项目中写法基础-弹出窗和弹出层 &lpar;4&rpar;

     一.实际项目中有很多如下界面效果.    二.该效果可以归结为弹出窗或者弹出层来实现的,为什么这么说?看如下代码:      <!DOCTYPE html> <html> & ...

  8. jQuery弹出窗口完整代码

    jQuery弹出窗口完整代码 效果体验:http://keleyi.com/keleyi/phtml/jqtexiao/1.htm 1 <!DOCTYPE html PUBLIC "- ...

  9. 基于jQuery图片弹出翻转特效代码

    分享一款基于jQuery图片弹出翻转特效代码.这是一款基于jQuery+HTML5实现的,里面包含六款不同效果的鼠标点击图片弹出特效下载.效果图如下: 在线预览   源码下载 实现的代码. html代 ...

随机推荐

  1. poj1986 LCA

    Distance Queries Time Limit: 2000MS   Memory Limit: 30000K Total Submissions: 11759   Accepted: 4157 ...

  2. JDBC【介绍JDBC、使用JDBC连接数据库、简单的工具类】

    1.什么是JDBC JDBC全称为:Java Data Base Connectivity,它是可以执行SQL语句的Java API 2.为什么我们要用JDBC 市面上有非常多的数据库,本来我们是需要 ...

  3. ffmpeg错误码

    以下ffmpeg错误代码及翻译是本人遇到或发现后整理出来的,不保证包含全部错误代码 EPERM(不允许操作,无相应权限) = -1 ENOENT(文件或目录不存在) = -2 ESRCH(线程不存在) ...

  4. Eclipse&plus;Maven环境下java&period;lang&period;OutOfMemoryError&colon; PermGen space及其解决方法

    转自  https://blog.csdn.net/qdgengwenfei/article/details/71455432 java.lang.OutOfMemoryError: PermGen ...

  5. JDK中Unsafe类详解

    Java中Unsafe类详解 在openjdk8下看Unsafe源码 浅析Java中的原子操作 Java并发编程之LockSupport http://hg.openjdk.java.net/jdk7 ...

  6. ajax 跨域----好用的解决方案

    一.前言 跨域这个词就一直以很高的频率在身边重复出现,一直到现在,已经调试过N个跨域相关的问题了! 但是感觉还是差了点什么,于是现在重新梳理了一下.个人见识有限,如有差错,请多多见谅 二.前言 关于跨 ...

  7. Pyhthon爬虫其之验证码识别

    背景 现在的登录系统几乎都是带验证手段的,至于验证的手段也是五花八门,当然用的最多的还是验证码.不过纯粹验证码识已经是很落后的东西了,现在比较多见的是滑动验证,滑动拼图验证(这个还能往里面加广告).点 ...

  8. linux 用户配置文件及其相关目录

    用户配置文件及其相关目录: /etc/passwd 用户信息文件/etc/shadow 影子文件/etc/group 组信息文件/etc/gshadow 组密码文件邮箱目录模板目录 /etc/pass ...

  9. 理解webpack4&period;splitChunks之maxAsyncRequests

    maxAsyncRequests和maxInitialRequests有相似之处,它俩都是用来限制拆分数量的,maxInitialRequests是用来限制入口的拆分数量而maxAsyncReques ...

  10. 基于Java Netty框架构建高性能的Jt808协议的GPS服务器（转）

    原文地址:http://www.jt808.com/?p=971 使用Java语言开发一个高质量和高性能的jt808 协议的GPS通信服务器,并不是一件简单容易的事情,开发出来一段程序和能够承受数十万 ...

相关文章