这代码实现的功能就是平常我们遇到的一个div里面包含img的时候，在img图片大小未知，div大小未知的情况下，让图片自适应大小，对于图片本身小于div容器大小时，不作处理。因为如果拉伸，图片可能就失真了。 废话不多说，直接上代码，已测试，兼容火狐，谷歌，IE6，IE7/8 以下是js代码： 代码如下: window.onload=function(){ changeImgSize(); } function changeImgSize(){ var getContainer=document.getElementById('imgcontai...
javascript原生和jquery库实现iframe自适应内容高度和宽度---推荐使用jQuery的代码！?基于Jquery库的代码很好实现：$(document).ready(function(){ $("#mainframe").load(function(){ $(this).height(0); //用于每次刷新时控制IFRAME高度初始化 var height = $(this).contents().height() + 10; $(this).height( height ?基于JS原生代码的实现：if (window.parent.length>0){window.parent.document.all.mainframe.style.heigh...
本文以实例形式讲述了Iframe实现跨浏览器自适应高度解决方法，非常具有实用价值。分享给大家供大家参考之用。具体方法如下： 该方法使用了jQuery，因此需要在iframe的src页面里面引入jQuery。 父页面里面相对简单一点，主要包含以下代码：在iframe的src页面里面代码如下：function resizeContent() {$(window.parent.document).find("#if1").height($("#content").height()); }function show400() {if($("#test400").css("display"...
这里介绍两个超级简单的方法，不用写什么判断浏览器高度、宽度啥的。 下面的两种方法自选其一就行了。一个是放在和iframe同页面的，一个是放在test.html页面的。 注意别放错了地方。 iframe的代码中，注意要写ID，没有ID查找不到代码如下:方法一：代码如下: //注意：下面的代码是放在和iframe同一个页面调用 $("#main").load(function(){ var mainheight = $(this).contents().find("body").height()+30; $(this).height(mainheigh...
方法一：代码如下: $(window.parent.document).find("#ContentIframe").load(function() {var main = $(window.parent.document).find("#ContentIframe");var thisheight = $(document).height();if (thisheight < 800)thisheight = 800;main.height(thisheight);});这种写法，只能对于加载的时候对固有元素的自适应高度，当元素变化的时候（如添加了很多元素，高度变化后）不能及时改变父窗体的iframe高度。 方法二：代码如下: fu...
这几天看了Amy老师的用javascript实现瀑布流，我跟着把代码敲出来。发现这样写只能第一次载入时适应屏幕，以后改变窗口大小就不能做到自适应了。于是我想到了用window.onresize来使得瀑布流函数从新加载来达到目的，代码如下: window.onload=function(){//瀑布流函数waterfall(content,box);//模拟数据加载var dataInt = {"data":[{"src":"01.jpg"},{"src":"02.jpg"},{"src":"03.jpg"},{"src":"04.jpg"},{"src":"05.jpg"},{"src":"...
有小伙伴留言说需要一个js实现屏幕自适应局部的代码，这里简单整理了下，放出来给大家。代码如下:无标题文档*{ margin:0; padding:0; list-style:none; } div{ margin:0 auto; height:10000px; min-width:880px; max-width:1100px; background:#060; clear:both; } ul{} li{ float:left; display:inline; width:198px; height:198px; border:1px solid #ccc; margin:10px; }11111111111222222222233333333333444444444455555555555...
本文实例讲述了js实现iframe自动自适应高度的方法。分享给大家供大家参考。具体如下： 在编写网页的时候，很多时候要用到自动伸缩iframe高度 ，假如ifram中嵌入的是一个列表，那么增加数据后，刷新列表，iframe高度会自动伸长。删除数据后，iframe高度要自动缩短。 将下一段代码拷贝到iframe所在那个html或者jsp页面。在
本文实例讲述了JS实现自适应高度表单文本框的方法。分享给大家供大家参考。具体实现方法如下：代码如下:JS实现自适应高度的表单文本框#shadow, #text { font: 12px/16px Arial; width: 200px; overflow: hidden; height: 16px; }#shadow { position: absolute; border-width: 0px; padding: 0px; visibility: hidden; }#text { resize: none; }window.onload = function () {var text = document.getElementById("text"); //用户看...
之前给大家分享过用Javascript控制文本框textarea高度随内容自适应增长收缩，今天花了点时间换了种实现方法，总结一下代码如下: jQuery.fn.extend({autoHeight: function(){return this.each(function(){var $this = jQuery(this);if( !$this.attr(_initAdjustHeight) ){$this.attr(_initAdjustHeight, $this.outerHeight());}_adjustH(this).on(input, function(){_adjustH(this);});});/*** 重置高度 * @param {Object} elem*/fu...
在玩微博的时候我们可能会注意到一个细节就是不管是新浪微博还是腾讯微博在转发和评论的时候给你的默认文本框的高度都不会很高，这可能是版面的限制和用户通常只转播或者评论一个短句有关。但是当你输入超过一行文字的时候，文本框的高度就自动撑高了，大大改善了体验，这样用户就可以看到全部的文字。不用再去拖动文本框的滚动条。 autoTextarea.js(function($){$.fn.autoTextarea = function(options) {var defaults={maxHeight:...
什么是rem 在我看来，rem就是1rem单位就等于html节点fontsize的像素值。所以改变html节点的fontsize是最为关键的一步。根据手机宽度改变相对大小就可以实现自适应了，就不用什么媒体查询那些的。 我们的设计图往往宽度是640或者其他尺寸的，不过我建议是用这个尺寸，以640为基准，以小到大，实现自适应，下面实现的比例为1rem=40px(640宽度)。 为什么这样搞？这样一套代码就搞定手机端尺寸自适应，不需要媒体查询，而且利用Sass和L...
由于是在网站编辑器里面编辑的内容，所以一直想通过CSS的方法来解决，可是找到的方式都有明显的缺陷，最终被迫采用脚本来控制列的高度，代码如下：代码如下: <divstyle="text-align: center;"> <embedid="movie"src="http://player.youku.com/player.php/sid/XMjg4NzkzMjQ4/v.swf"allowfullscreen="true"quality="high"width="90%"align="middle"allowscriptaccess="always"type="application/x-shockwave-flash"/>document.getEle...
JS制作手机端自适应缩放显示 示例一：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>2.3){ document.write(''); }else{ document.write(''); } } else { document.write(''); }示例二：$(function(){if (navigator.userAgent.match(/iPhone/i) |...
本文实例讲述了js实现文本框宽度自适应文本宽度的方法。分享给大家供大家参考。具体如下： 一个会随着输入文本框的字符多少而自动增加宽度的JS代码，当我们在文本框中输入字符的时候，如果文本框的宽度定义太小的话，那么我们输入的字符将会被隐藏，本段代码实现了文本框会自动适应输入文字的多少，它会自动加长。 运行效果如下图所示：具体代码如下：文本框宽度自动适应文本宽度 function changeInputlength(cursor) { var getc...