js实现背景图自适应窗口大小


Posted in Javascript onJanuary 10, 2017

话不多说,请看代码

<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 相关文章推荐
浅谈Javascript变量作用域问题
Dec 16 Javascript
js实现下拉框选择要显示图片的方法
Feb 16 Javascript
JS使用ajax从xml文件动态获取数据显示的方法
Mar 24 Javascript
如何处理JSON中的特殊字符
Nov 30 Javascript
JS原生数据双向绑定实现代码
Aug 14 Javascript
日期时间范围选择插件:daterangepicker使用总结(必看篇)
Sep 14 Javascript
详解Vue项目编译后部署在非网站根目录的解决方案
Apr 26 Javascript
vue使用自定义icon图标的方法
May 14 Javascript
如何换个角度使用VUE过滤器详解
Sep 11 Javascript
TensorFlow.js 微信小程序插件开始支持模型缓存的方法
Feb 21 Javascript
JavaScript中继承原理与用法实例入门
May 09 Javascript
JS运算符优先级与表达式示例详解
Sep 04 Javascript
微信JSAPI支付操作需要注意的细节
Jan 10 #Javascript
jQuery使用ajax方法解析返回的json数据功能示例
Jan 10 #Javascript
ajax实现动态下拉框示例
Jan 10 #Javascript
JavaScript三种绑定事件方式及相互之间的区别分析
Jan 10 #Javascript
详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
Jan 10 #Javascript
JavaScript获取键盘按键的键码(参照表)
Jan 10 #Javascript
详解vue之页面缓存问题(基于2.0)
Jan 10 #Javascript
You might like
php去掉字符串的最后一个字符附substr()的用法
2011/03/23 PHP
php预定义变量使用帮助(带实例)
2013/10/30 PHP
异步加载技术实现当滚动条到最底部的瀑布流效果
2014/09/16 PHP
Windows下php+mysql5.7配置教程
2017/05/16 PHP
PHP的mysqli_select_db()函数讲解
2019/01/23 PHP
掌握PHP垃圾回收机制详解
2019/03/13 PHP
HTTP状态代码以及定义(解释)
2007/02/02 Javascript
JavaScript类和继承 constructor属性
2010/03/04 Javascript
JavaScript单元测试ABC
2012/04/12 Javascript
JS控制阿拉伯数字转为中文大写示例代码
2013/09/04 Javascript
js 操作select与option(示例讲解)
2013/12/20 Javascript
js控制iframe的高度/宽度让其自适应内容
2014/04/09 Javascript
node.js中的fs.createWriteStream方法使用说明
2014/12/17 Javascript
js制作简易年历完整实例
2015/01/28 Javascript
JS实现选择TextArea内文本的方法
2015/08/03 Javascript
js实现简洁的滑动门菜单(选项卡)效果代码
2015/09/04 Javascript
JS实现把鼠标放到链接上出现滚动文字的方法
2016/04/06 Javascript
jQuery Ajax Post 回调函数不执行问题的解决方法
2016/08/15 Javascript
Bootstrap实现各种进度条样式详解
2017/04/13 Javascript
vue2.0父子组件间传递数据的方法
2018/08/16 Javascript
详解nodejs 开发企业微信第三方应用入门教程
2019/03/12 NodeJs
python按时间排序目录下的文件实现方法
2018/10/17 Python
python实现连续变量最优分箱详解--CART算法
2019/11/22 Python
Pytorch 实现数据集自定义读取
2020/01/18 Python
用python介绍4种常用的单链表翻转的方法小结
2020/02/24 Python
解决Python在导入文件时的FileNotFoundError问题
2020/04/10 Python
一篇文章搞懂python的转义字符及用法
2020/09/03 Python
澳大利亚新奇小玩意网站:Yellow Octopus
2017/12/28 全球购物
医学类导师推荐信范文
2013/11/19 职场文书
数控个人求职信范文
2014/02/03 职场文书
材料专业毕业生求职信
2014/02/26 职场文书
经济担保书范文
2014/04/02 职场文书
公民代理授权委托书
2014/09/24 职场文书
节约用电通知
2015/04/25 职场文书
律师催款函范文
2015/06/24 职场文书
2019年励志签名:致拼搏路上的自己
2019/10/11 职场文书