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>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持我们!
相关推荐
-
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
-
javascript自适应宽度的瀑布流实现思路
这样的布局并不陌生,从2011年Pinterest创立以来,中国互联网就迅速掀起了一股模仿Pinterest的热潮,国内有众多网站采用瀑布流的布局方式,例如花瓣网.美丽说等等.而事实上在中国互联网,模仿一些在国外被人看好的模式(当然,你也可以说是山寨或抄袭,呵呵!!)向来都是一个不错的idea. OK,现在进入正题.这里主要介绍瀑布流的一种实现方法:绝对定位(css)+javascript+ajax+json.简单一点如果不做滚动加载的话就是绝对定位(css)+javascript了,ajax和
-
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实现iframe自适应高度的方法示例
本文实例讲述了JS实现iframe自适应高度的方法.分享给大家供大家参考,具体如下: <iframe id="mainFrame" name="mainFrame" src="/zwgk/hsearchview" width="740" frameborder="0" scrolling="no" scrolling="no" frameborder="
-
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
-
javascript 装载iframe子页面,自适应高度
假设主页面有一个div,里面放置一个iframe 复制代码 代码如下: <div id="frameBox"> <iframe id="frameWin" src="1.html" name="opWin" style="width:100%; height:100% " frameborder="0" scrolling="no"></
-
通过JAVAScript实现页面自适应
有时候,我们可能需要象新版的Yahoo邮箱一样,让一些数据显示块可以根据页面大小进行自适应.事实并不难,但是如果单纯用CSS控制的话,往往不能完全实现我们要的效果,这时候需要借助javascript,Javascript可以让我我们实现司空见怪的自适应页面,在iSunXoft的HR开源项目就应用到. 实现原理: 获取IE显示屏幕的宽高.确定哪些对象是绝对位置是固定的,那些是不固定的,哪些长宽是固定,然后象WIN FORM程序一样,根所软件界面的大小,进行设计相关
-
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代码实现自适应
在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
随机推荐
- 详解Angular开发中的登陆与身份验证
- 解决Xcode 8构建版本iTunes Connect获取不到应用程序状态的办法
- Perl遍历目录和使用Linux命令分析日志的代码实例分享
- Ajax与服务器(JSON)通信实例代码
- PHP中UNIX时间戳和日期间的转换与计算实例
- PHP版本如何选择?应该使用哪个版本?
- php读取qqwry.dat ip地址定位文件的类实例代码
- python实现用户登录系统
- JSP中param标签用法实例分析
- 当mysqlbinlog版本与mysql不一致时可能导致出哪些问题
- Android实现系统重新启动的功能
- JQuery操作tr和td内容的方法实例
- SQL JOIN 连接详细介绍及简单使用实例
- 浅析Boost智能指针:scoped_ptr shared_ptr weak_ptr
- javaScript事件学习小结(四)event的公共成员(属性和方法)
- Windows Internet服务器安全配置
- jquery选择器之内容过滤选择器详解
- java中的key接口解析
- 浅谈C/C++ 语言中的表达式求值
- C/C++程序开发中实现信息隐藏的三种类型