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

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

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4.     <script type="text/javascript" src="jquery-1.9.1.js"></script>
  5.  
  6.     <script type="text/javascript">
  7.             $(function() {
  8.             $(".aboutus_img").click(function(){
  9.  
  10.                 //加入一个DIV(暗层),加入BODY中
  11.                 var background = $("<div></div>");
  12.  
  13.                 $(background).attr("id","overlaybackground").animate({
  14.                     'opacity':'.6'
  15.                 },0).css({
  16.                     "width"  : $(document).width(),
  17.                     'height' : $(document).height(),
  18.                     'background' : '#656565',
  19.                     'z-index' : '100',
  20.                     'position': 'absolute',
  21.                     'top' : '0px',
  22.                     'left' : '0px'
  23.                     });
  24.                 $("body").append(background);
  25.  
  26.                 //将加入一个图片
  27.                 var newimage = $("<img/>");
  28.                 var width = $('body').width();
  29.  
  30.                 $(newimage).attr("src",$(this).attr("src")).attr("id","largeimage").css({
  31.                                 'left' : width/2-200,
  32.                     'top' : '160px',
  33.                     //'position': 'absolute',
  34.                     'position': 'fixed',
  35.                     'z-index' : '500',
  36.                     'display' : 'none'
  37.                 });
  38.                 $("#largeimage").attr("src",$(this).attr("src")); //重新赋予值
  39.                 $("body").append(newimage);
  40.  
  41.                 //将图片滑出效果完成
  42.                 $("#largeimage").fadeIn(2000,function(){
  43.                     $(this).click(function(){
  44.                         $(this).fadeOut(1000);
  45.                         $("div#overlaybackground").fadeOut(1000,function(){
  46.                             $(this).remove();
  47.                         })
  48.                     })
  49.                 })
  50.  
  51.             });
  52.         })
  53.         </script>  
  54.  
  55. <style type="text/css">
  56. #low_right
  57. {
  58. position: fixed;
  59. width: 98%;
  60. text-align: center;
  61. }
  62. </style>
  63.  
  64. </head>
  65. <body>
  66.     <div id="low_right" align="center">
  67.         导航栏固定在顶部位置
  68.         <img src="1.jpg" alt="楼" class="aboutus_img" width="58" height="58"/>
  69.         <img src="2.jpg" alt="楼" class="aboutus_img" width="58" height="58"/>
  70.     </div>
  71.  
  72.     <br/><br/>    <br/><br/>
  73. <img src="1.jpg" alt="楼" class="aboutus_img" width="58" height="58"/>
  74. <img src="1.jpg" alt="楼" class="aboutus_img" width="58" height="58"/>
  75. <img src="1.jpg" alt="楼" class="aboutus_img" width="58" height="58"/>
  76. <img src="1.jpg" alt="楼" class="aboutus_img" width="58" height="58"/>
  77. <img src="1.jpg" alt="楼" class="aboutus_img" width="58" height="58"/>
  78. <br/><br/><br/><br/>
  79. <img src="2.jpg" alt="楼" class="aboutus_img" width="58" height="58"/>
  80. <img src="2.jpg" alt="楼" class="aboutus_img" width="58" height="58"/>
  81. <img src="2.jpg" alt="楼" class="aboutus_img" width="58" height="58"/>
  82. <img src="2.jpg" alt="楼" class="aboutus_img" width="58" height="58"/>
  83. <img src="2.jpg" alt="楼" class="aboutus_img" width="58" height="58"/>
  84. <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  85. <br/><br/><br/><br/><br/>
  86. <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  87. <br/><br/><br/><br/><br/>
  88. <img src="2.jpg" alt="楼" class="aboutus_img" width="58" height="58"/>
  89. </body>
  90. </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层居中,点击小图查看大图,弹出层居中代码

    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开发:点击缩略图查看大图

    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 实际项目中写法基础-弹出窗和弹出层 (4)

     一.实际项目中有很多如下界面效果.    二.该效果可以归结为弹出窗或者弹出层来实现的,为什么这么说?看如下代码:      <!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. Hibernate中Entity实体类的写法

    记录下一个Entity类的写法,方便以后查阅: package com.bupt.auth.entity; import java.util.Date; import javax.persistenc ...

  2. MySQL 5.7 Zip 安装（win7）

    参考官方文档 http://dev.mysql.com/doc/refman/5.7/en/windows-install-archive.html 2.3.5.1 Extracting the In ...

  3. 使用zookeeper实现分布式master选举（c 接口版本）

    zookeeper,已经被很多人所熟知,主要应用场景有(数据订阅/发布 ,负载均衡, 命名服务, 分布式协调/通知,集群管理,Master选举,分布式锁,分布式队列). C接口的描述  主要参考 Ha ...

  4. tp中让头疼似懂非懂的create

    项目中多次用到create() 只能它是表单验证,不过好出错,痛下心扉好好了解理解它的来龙去脉和所用的用法 一:通过create() 方法或者 赋值的方法生成数据对象,然后写入数据库 $model = ...

  5. Cookie与Session详解

    来源:<PHP核心技术与最佳实践> 列旭松 陈文 著 Cookie与Session详解读书笔记,从概念.操作.应用.注意事项以及区别等几方面详细阐述两者的基础知识,它们都是针对HTTP协议 ...

  6. js----DOM的三大节点及部分用法

    DOM有三种节点:元素节点.属性节点.文本节点. 一.用nodeType可以检测节点的类型 节点类型 nodeType属性值 元素节点 1 属性节点 2 文本节点 3 这样方便在js中对各个节点进行操 ...

  7. jquery插件开发模板

    (function($){ $.fn.extend({ //将可选择的变量传递给方法 pluginname: function(options) { //设置默认值并用逗号隔开 var default ...

  8. 三种找回 linux root密码的方法

    找回 linux root密码的三种方法 第1种方法: 1.在系统进入单用户状态,直接用passwd root去更改2.用安装光盘引导系统,进行linux rescue状态,将原来/分区挂接上来,作法 ...

  9. C#生成随机字符串

    //<summary> ///得到随机字符. ///</summary> ///<param name="intLength">Length o ...

  10. XHTML1.0对HTML4.0的改进

    1.XHTML借鉴了XML的写法,语法更加严格: 2.XHTML实现了把页面样式和内容分离了,废弃了HTML4.0中表示样式的标签和属性,推荐使用CSS样式来描述页面的样式. XHTML1.0 分为两 ...