js实现背景图自适应窗口大小
话不多说,请看代码
<script type="text/javascript"> window.onresize = window.onload = function() { var w,bgImg; if(!!(window.attachEvent && !window.opera)) { w = document.documentElement.clientWidth; } else { w = window.innerWidth; }if(w>1650){ document.getElementById ('msg').value ='窗口大小:' + 'width:' + w; bgImg = document.getElementById('bg').getElementsByTagName('img')[0]; bgImg.width = (w - 5); }else{ document.getElementById ('msg').value ='窗口大小:' + 'width:' + w; bgImg = document.getElementById('bg').getElementsByTagName('img')[0]; bgImg.width = 1650; } } </script>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持我们!
相关推荐
-
通过JAVAScript实现页面自适应
有时候,我们可能需要象新版的Yahoo邮箱一样,让一些数据显示块可以根据页面大小进行自适应.事实并不难,但是如果单纯用CSS控制的话,往往不能完全实现我们要的效果,这时候需要借助javascript,Javascript可以让我我们实现司空见怪的自适应页面,在iSunXoft的HR开源项目就应用到. 实现原理: 获取IE显示屏幕的宽高.确定哪些对象是绝对位置是固定的,那些是不固定的,哪些长宽是固定,然后象WIN FORM程序一样,根所软件界面的大小,进行设计相关
-
javascript自适应宽度的瀑布流实现思路
这样的布局并不陌生,从2011年Pinterest创立以来,中国互联网就迅速掀起了一股模仿Pinterest的热潮,国内有众多网站采用瀑布流的布局方式,例如花瓣网.美丽说等等.而事实上在中国互联网,模仿一些在国外被人看好的模式(当然,你也可以说是山寨或抄袭,呵呵!!)向来都是一个不错的idea. OK,现在进入正题.这里主要介绍瀑布流的一种实现方法:绝对定位(css)+javascript+ajax+json.简单一点如果不做滚动加载的话就是绝对定位(css)+javascript了,ajax和
-
javascript 装载iframe子页面,自适应高度
假设主页面有一个div,里面放置一个iframe 复制代码 代码如下: <div id="frameBox"> <iframe id="frameWin" src="1.html" name="opWin" style="width:100%; height:100% " frameborder="0" scrolling="no"></
-
JS制作手机端自适应缩放显示
JS制作手机端自适应缩放显示 示例一: <script> var _width = parseInt(window.screen.width); var scale = _width/640; var ua = navigator.userAgent.toLowerCase(); var result = /android (\d+\.\d+)/.exec(ua); if (result){ var version = parseFloat(result[1]); if(version>
-
JS获取图片实际宽高及根据图片大小进行自适应
JS获取图片实际宽高,以及根据图片大小进行自适应 复制代码 代码如下: <img src="http://xxx.jpg" id="imgs" onload="adapt();"/> 复制代码 代码如下: function adapt(){ var tableWidth = $("#imgTable").width(); //表格宽度 var img = new Image(); img.src =$('#imgs
-
js实现屏幕自适应局部代码分享
有小伙伴留言说需要一个js实现屏幕自适应局部的代码,这里简单整理了下,放出来给大家. 复制代码 代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> *{ margin:0; padding:0; list-style:none; } div{ margin:0 auto; heig
-
JS实现iframe自适应高度的方法示例
本文实例讲述了JS实现iframe自适应高度的方法.分享给大家供大家参考,具体如下: <iframe id="mainFrame" name="mainFrame" src="/zwgk/hsearchview" width="740" frameborder="0" scrolling="no" scrolling="no" frameborder="
-
几行js代码实现自适应
在javascript写下如下几行: (function (doc, win, undefined) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in win? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth; if (clientWidth === undefined) r
-
Iframe 自适应高度并实时监控高度变化的js代码
google N次 + 百度M次 + 试验了1605次之后(听说农药1605就是实验了这么多次后出来的),得出下面成果,在IE7及Firefox3里试了下还能凑合着用用! 1.首先给出个Iframe. 复制代码 代码如下: <iframe id="ifrm" marginheight="0" marginwidth="0" height="100" width="1000" frameborder=&
-
js实现文本框宽度自适应文本宽度的方法
本文实例讲述了js实现文本框宽度自适应文本宽度的方法.分享给大家供大家参考.具体如下: 一个会随着输入文本框的字符多少而自动增加宽度的JS代码,当我们在文本框中输入字符的时候,如果文本框的宽度定义太小的话,那么我们输入的字符将会被隐藏,本段代码实现了文本框会自动适应输入文字的多少,它会自动加长. 运行效果如下图所示: 具体代码如下: <!Doctype HTML PUBLIC "-//W3c//DTD Html 1.0 Transitional//EN"> <html
随机推荐
- asp.net中调用winrar实现压缩解压缩的代码
- redis数据类型_动力节点Java学院整理
- SQL 优化经验总结34条
- jquery scrollTop方法根据滚动像素显示隐藏顶部导航条
- 基于jquery编写的横向自适应幻灯片切换特效的实例代码
- Extjs EditorGridPanel中ComboBox列的显示问题
- VBS Runas 自动输入密码, 明文
- 举例讲解iOS应用开发中对设计模式中的策略模式的使用
- 用Python脚本生成Android SALT扰码的方法
- MySql的事务使用与示例详解
- Javascript编程中几种继承方式比较分析
- 在子页中隐藏模板页中的div示例代码
- Iframe自适应高度兼容ie,firefox多浏览器
- javascript中html字符串转化为jquery dom对象的方法
- noty – jQuery通知插件全面解析
- 分享C#操作内存读写方法的主要实现代码
- 一个简单的JS鼠标悬停特效具体方法
- 解决Android SurfaceView绘制触摸轨迹闪烁问题的方法
- PHP UTF8编码内的繁简转换类
- vue2.0 如何把子组件的数据传给父组件(推荐)