`
siruoxian
  • 浏览: 237943 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

根据图片设定网页框大小

阅读更多

<SCRIPT LANGUAGE="JavaScript">
<!--

function ResizeToFit(){
 var imgWidth;
 var imgHeight;
 if (document.imgLarge && document.imgLarge.complete)
 {
 imgWidth = document.imgLarge.width + 20;
 imgHeight = document.imgLarge.height + 115;
 window.resizeTo(imgWidth,imgHeight);
 }
}
//-->
</SCRIPT>

网页的宽度及高度

网页可见区域宽:
document.body.clientWidth  

网页可见区域高:
document.body.clientHeight  

网页可见区域宽:
document.body.offsetWidth(包括边线的宽)   

网页可见区域高:
document.body.offsetHeight(包括边线的宽)   

网页正文全文宽:
document.body.scrollWidth   

网页正文全文高:
document.body.scrollHeight   

网页被卷去的高:
document.body.scrollTop   

网页被卷去的左:
document.body.scrollLeft   

网页正文部分上:
window.screenTop   

网页正文部分左:
window.screenLeft   

屏幕分辨率的高:
window.screen.height   

屏幕分辨率的宽:
window.screen.width   

屏幕可用工作区高度:
window.screen.availHeight  

屏幕可用工作区宽度:
window.screen.availWidth 

对于firefox有个兼容性问题。

如果想设置整个网页的页面宽度用一个层遮罩住的话,要这样处理


function browserWidth() {
  if (self.innerWidth) {
return self.innerWidth;
  } else{
return document.body.clientWidth;
  }
  return 800;
}


var ht=browserHeight()+10+"px";
 document.getElementById("v_full_screen").style.position="absolute";
 document.getElementById("v_full_screen").style.left="0px"; 
 document.getElementById("v_full_screen").style.top="0px";   
 document.getElementById("v_full_screen").style.width=wd;
 var scht=document.body.scrollHeight+"px";  
 document.getElementById("v_full_screen").style.height=scht; 
 document.getElementById("v_full_screen").style.background="#000033";

这样处理后页面的整个高度和宽度就是你浏览整个页面的高度和宽度

 

分享到:
评论

相关推荐

    给图片加边框-自定义边框大小和颜色

    2. 根据用户设定的边框大小和颜色创建边框。 3. 使用`imagecopy()`或`imagecopymerge()`将边框与原始图片合并。 4. 如果需要改变图片大小,使用`imagecopyresampled()`进行调整。 5. 最后,用`imagejpeg()`或`...

    根据图片大小自适应的CSS

    在探讨“根据图片大小自适应的CSS”这一主题时,我们深入分析了如何利用CSS(层叠样式表)来确保图片能够根据不同设备和屏幕尺寸自动调整其大小,从而实现响应式设计的效果。以下是对该主题的详细解析: ### 一、...

    网页自动改变图片大小的代码

    在探讨如何利用JavaScript实现网页上图片的自动大小调整之前,我们先来理解一下这段代码的基本逻辑与关键点。这段代码的主要目标是确保网页中的所有图片都不会超过特定的高度和宽度限制,以此来提升网页的视觉效果和...

    Lightbox插件(图片大小调节)

    在用户打开大图时,Lightbox会根据图片的原始尺寸和浏览器窗口的大小自动调整图片显示比例,确保图片能够完整、清晰地呈现,而不会超出屏幕范围。同时,为了适应不同设备和屏幕分辨率,Lightbox通常也支持响应式设计...

    js验证上传图片 大小 格式

    在IT领域,特别是前端开发中,JavaScript(JS)被广泛应用于网页交互与数据验证,其中对上传图片的大小和格式进行验证是常见的需求之一。本文将深入解析如何使用JavaScript进行图片上传前的验证,包括检查图片格式、...

    html网页制作多种标题相框

    例如,通过设置`border`属性来创建边框,`padding`和`margin`调整内边距和外边距,`text-align`控制文本对齐,`font-family`和`font-size`定义字体和大小。 3. 图片素材:在描述中提到的“相框”通常指的是为标题...

    若依(ruoyi)前后端分离版实现图片上传拖拽修改图片大小(公告页面)

    当用户停止拖动时,可以利用canvas将图片画入,同时设置合适的宽高,然后重新渲染图片。这样,用户就可以看到实时调整大小的效果。 在公告页面中,这样的功能可以提高用户编辑公告时的便捷性,特别是当需要上传多张...

    highslide 4.1.4网页图片特效框

    3. **自定义设置**:开发者可以根据自己的需求对Highslide进行深度定制,如调整图片边框、阴影、动画效果等,使图片特效与网页整体风格保持一致。 4. **响应式设计**:Highslide支持响应式布局,能自动适应不同设备...

    控制一个DIV内所有图片宽度超出后自动调整为指定大小

    特别是在响应式设计中,图片需要能够根据不同的设备屏幕尺寸自动调整大小。本文将详细介绍如何通过CSS实现当一个`&lt;div&gt;`容器内的所有图片宽度超过650像素时,自动调整这些图片的宽度至650像素,并保持原有比例不变。...

    网页自动弹出框

    2. 使用CSS设置模态框的位置、大小、透明度等样式,以及遮罩层的样式。 3. 使用JavaScript控制模态框的显示与隐藏,可以绑定到特定的事件,如按钮点击。 例如,以下是一个简单的自定义模态框示例: ```html &lt;!-- ...

    网页图片截取和自动改变字体大小Textbox

    网页图片截取与自动调整字体大小的TextBox技术是现代网页开发中的重要组成部分,尤其是在创建交互式和用户友好的界面时。下面将详细讲解这两个技术的关键点。 首先,我们来看网页图片截取。在网页上,图片截取通常...

    CSS 美化几款漂亮的网页搜索框

    - 利用媒体查询`@media`,根据设备屏幕大小调整搜索框的样式,确保在不同设备上都能良好显示。 6. **交互状态** - `:hover`伪类用于定义鼠标悬停时的样式,如改变背景色或高亮边框。 - `:focus`伪类强调当前被...

    vue实现在图片中画矩形框,并得到对角坐标,设置map中area的样式.zip

    在Vue项目中实现图片上画矩形框并获取对角坐标以及设置`&lt;map&gt;`中的`&lt;area&gt;`样式,涉及到的技术主要包括JavaScript、HTML5的绘图API以及图像热区技术。接下来,我们将深入探讨这些知识点。 1. **JavaScript绘图API**...

    静态网页制作-图片浏览

    2. CSS样式:设定图片容器的大小和轮播图片的过渡效果。 3. JavaScript逻辑:创建定时器自动切换图片,添加手动控制功能,如暂停、继续、上一张、下一张等。 在实际制作过程中,你需要考虑以下几个关键知识点: - ...

    网页开发常用素材图片

    此外,优化图片大小对网页加载速度至关重要。过大尺寸的图片会增加页面加载时间,影响用户体验。可以通过减小尺寸、压缩图片或使用WebP等高效格式来降低文件大小。同时,还可以利用CSS的`background-size`属性和`...

    快速网页模板框架

    使用这些模板时,开发者可以先预览模板的样式和布局,然后根据需求修改HTML中的内容,调整CSS样式以改变颜色、大小和排版,或者在JavaScript中添加或修改功能。此外,还可以通过替换图片和图标来适应自己的品牌或...

    网页框架教案设计.doc

    - 教师准备相关素材,如文字、图片,以便学生制作框架网页。 - 演示动画可以帮助学生直观理解框架网页的建立过程。 7. **教学过程**: - 引入新课时,展示框架网页实例,激发学生兴趣。 - 讲解新课,详细说明...

    根据浏览器大小使网页内容自动放大缩小

    ### 根据浏览器大小使网页内容自动放大缩小 在现代网页设计中,为了提供更好的用户体验,网站需要能够自适应不同的屏幕尺寸。这不仅涉及到布局的变化,还包括文本、图片等元素的大小调整。本文将深入探讨一种利用...

    JS编写的基于网页的图片浏览器

    这通常是通过计算图片的宽高比,并根据容器的尺寸调整图片大小来实现的。这样,无论用户的屏幕分辨率如何,图片都能以最佳方式呈现。 **小图导航设置** 类库中的小图导航功能是其亮点之一。它可以显示一组缩略图,...

    易语言源码图片转超级列表框大图标.rar

    例如,当用户点击超级列表框时,程序可能会触发一个事件处理函数,该函数负责根据选中的项来显示或处理相应的图像。 5. **界面设计**:易语言提供了丰富的图形用户界面(GUI)元素,可以用来创建直观的应用程序。在...

Global site tag (gtag.js) - Google Analytics