JS获取页面实际大小函数

  • 2008-01-25
  • 分类：JavaScript
  • 作者：银子
  • 256 次查看

Lightbox里面的一个函数,能把页面实际的高宽与浏览器可视面积的高宽保存在一个数组中..非常好用.记录一下

  1. function getPageSize(){
  2.    
  3.     var xScroll, yScroll;
  4.    
  5.     if (window.innerHeight && window.scrollMaxY) {   
  6.         xScroll = document.body.scrollWidth;
  7.         yScroll = window.innerHeight + window.scrollMaxY;
  8.     } else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
  9.         xScroll = document.body.scrollWidth;
  10.         yScroll = document.body.scrollHeight;
  11.     } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
  12.         xScroll = document.body.offsetWidth;
  13.         yScroll = document.body.offsetHeight;
  14.     }
  15.    
  16.     var windowWidth, windowHeight;
  17.     if (self.innerHeight) {    // all except Explorer
  18.         windowWidth = self.innerWidth;
  19.         windowHeight = self.innerHeight;
  20.     } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
  21.         windowWidth = document.documentElement.clientWidth;
  22.         windowHeight = document.documentElement.clientHeight;
  23.     } else if (document.body) { // other Explorers
  24.         windowWidth = document.body.clientWidth;
  25.         windowHeight = document.body.clientHeight;
  26.     }   
  27.    
  28.     // for small pages with total height less then height of the viewport
  29.     if(yScroll < windowHeight){
  30.         pageHeight = windowHeight;
  31.     } else { 
  32.         pageHeight = yScroll;
  33.     }
  34.  
  35.     // for small pages with total width less then width of the viewport
  36.     if(xScroll < windowWidth){   
  37.         pageWidth = windowWidth;
  38.     } else {
  39.         pageWidth = xScroll;
  40.     }
  41.  
  42.     arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight) 
  43.     return arrayPageSize;
  44. }

调用:

  1. var getPageSize = getPageSize();
  2. alert(getPageSize[0] + getPageSize[1] + getPageSize[2] + getPageSize[3]);
Tags : , , , , ,
0 条评论

JavaScript OOP练习第一弹

  • 2007-12-10
  • 分类：JavaScript
  • 作者：银子
  • 115 次查看

学javascript已经有一段时间了,成天与DOM,文档对像打交道,水平停滞不前.今天来进阶练习,学习 javascript OOP　写了一点简单的代码

  1. <script type="text/javascript">
  2. /*定义宠物对像*/
  3. function Pet()
  4. {
  5.     //名称
  6.     this.name = null;
  7.     //毛色
  8.     this.color = null;
  9.     //设置名称
  10.     this.setName = function(newName)
  11.     {
  12.         this.name = newName;
  13.     };
  14.     //获取名称
  15.     this.getName = function()
  16.     {
  17.         return this.name;
  18.     };
  19.     //获取颜色
  20.     this.getColor = function()
  21.     {
  22.         return this.color;
  23.     };
  24.     //设置颜色
  25.     this.setColor = function(newColor)
  26.     {
  27.         this.color = newColor;
  28.     };
  29.     //定义一个要实现的方法
  30.     this.getFood = null;
  31.     //获取宠物对像的描述信息
  32.     this.showPet = function()
  33.     {
  34.         return this.color + "色的" + this.name + "最喜欢吃的食物是" + this.getFood();
  35.     }
  36. }
  37.  
  38. //定义狗狗对像
  39. function Dog() {
  40.     this.getFood = function()
  41.     {
  42.         return "骨头";
  43.     };
  44. }
  45.  
  46. //声明Dog的原型
  47. Dog.prototype = new Pet();
  48. </script>
  49.  
  50. <script type="text/javascript">
  51. //实例化一只名叫koko的黄色小狗
  52. var mydog = new Dog();
  53. //设置koko的属性
  54. mydog.setName("koko");
  55. mydog.setColor("黄");
  56. //输出测试
  57. alert(mydog.showPet());
  58. </script>

第一次学习练习,难免浅显.见笑

Tags : , , ,
1 条评论

JS图片展示效果

  • 2007-11-17
  • 分类：JavaScript
  • 作者：银子
  • 180 次查看
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <meta name="Author" content="wuleying" />
  6. <title>图片展示</title>
  7. <style>
  8. * {margin:0;padding:0;font-size:12px;}
  9. body {background:#000;}
  10. ul {list-style:none;}
  11. #box {margin:20px auto;width:600px;border:1px solid #ccc;height:70px;overflow:hidden;}
  12. #box_l,
  13. #box_r {float:left;padding:28px 6px 0 6px;background:#ccc;height:42px;cursor:pointer;color:#06c;}
  14. #box_r.down,
  15. #box_l.down {background:#999;color:#fff;}
  16. #box_r {float:right;}
  17. #box_c {float:left;width:564px;overflow:hidden;padding-top:4px;}
  18. #box_c img {width:100px;height:60px;border:1px solid #ccc;}
  19. #box_c li {float:left;display:inline;margin:0 2px 0 2px;}
  20. #box_c ul {width:1000px;margin-left:2px;}
  21. .alert {z-index:1000;filter:alpha(opacity=80);opacity:0.8;position:absolute;left:434px; top:409px;border:1px solid #ff0;background:#ffc;width:120px; height:16px;text-align:center;padding-top:4px;color:#111;}
  22. .none {display:none;}
  23. #show {border:1px solid #ccc;padding:3px;width:400px;height:300px;margin:40px auto;}
  24. #show img {width:400px;height:300px;cursor:pointer;}
  25. </style>
  26.  
  27. </head>
  28. <body>
  29. <div id="show">
  30. <img src="" id="showpic" />
  31. </div>
  32. <div id="box">
  33. <div id="box_l">&laquo;</div>
  34. <div id="box_c">
  35. <ul>
  36. <li><a href="#"><img src="http://smallpic.zcool.com.cn/share/nr1.jpg" alt="" /></a></li>
  37. <li><a href="#"><img src="http://smallpic.zcool.com.cn/02.jpg" alt="" /></a></li>
  38. <li><a href="#"><img src="http://smallpic.zcool.com.cn/03.jpg" alt="" /></a></li>
  39. <li><a href="#"><img src="http://smallpic.zcool.com.cn/vector/people1/060_s.jpg" alt="" /></a></li>
  40. <li><a href="#"><img src="http://smallpic.zcool.com.cn/share/sl.jpg" alt="" /></a></li>
  41. <li><a href="#"><img src="http://smallpic.zcool.com.cn/vector/design1/139_s.jpg" alt="" /></a></li>
  42. <li><a href="#"><img src="http://smallpic.zcool.com.cn/share/sl1.jpg" alt="" /></a></li>
  43. <li><a href="#"><img src="http://smallpic.zcool.com.cn/vector/design1/138_s.jpg" alt="" /></a></li>
  44. <li><a href="#"><img src="http://smallpic.zcool.com.cn/png3/052.jpg" alt="" /></a></li>
  45. </ul>
  46. </div>
  47. <div id="box_r">&raquo;</div>
  48. </div>
  49. <div class="none" id="sorry">对不起,到头了!</div>
  50. <script type="text/javascript">
  51. var box = document.getElementById("box_c");
  52. var boxl = document.getElementById("box_l");
  53. var boxr = document.getElementById("box_r");
  54. var ts = document.getElementById("sorry");
  55. i = 0;
  56. function scrollFunLeft()
  57. {
  58. i++;
  59. if(box.scrollLeft<386)
  60. {
  61. box.scrollLeft+=i;
  62. ts.className="";
  63. }
  64. else
  65. {
  66. clearInterval(t);
  67. i=0;
  68. ts.className="alert";
  69. }
  70. }
  71.  
  72. function scrollFunRight()
  73. {
  74. i++;
  75. if(box.scrollLeft>0)
  76. {
  77. box.scrollLeft-=i;
  78. ts.className="";
  79. }
  80. else
  81. {
  82. clearInterval(t);
  83. i=0;
  84. ts.className="alert";
  85. }
  86. }
  87.  
  88. boxl.onmouseover = function(){t=setInterval(scrollFunRight,70);boxl.className="down"}
  89. boxl.onmouseout = function() {clearInterval(t);i=0;boxl.className="";ts.className="";}
  90. boxr.onmouseover = function(){t=setInterval(scrollFunLeft,70);boxr.className="down";}
  91. boxr.onmouseout = function() {clearInterval(t);i=0;boxr.className="";ts.className="";}
  92.  
  93. /*显示大图*/
  94. var pic = document.getElementById("showpic");
  95. var imgs = document.getElementById("box_c").getElementsByTagName("img");
  96. for(i=0;i<imgs.length;i++)
  97. {
  98. window.onload = function() {pic.src= imgs[0].src;}
  99. imgs[i].onmouseover = function() {pic.src = this.getAttribute('src');}
  100. imgs[i].onclick = function() {window.open(this.getAttribute('src'));}
  101. pic.onclick = function() {window.open(this.getAttribute('src'));}
  102. }
  103. </script>
  104. </body>
  105. </html>

demo http://www.ywowy.com/code/imgshow/

Tags : , , ,
0 条评论

浏览最多的10篇日志

评论最多的10篇日志

随机显示的10篇日志