13518219792
script type="text/javascript" src="js/jquery.min.js"/script
创新互联是专业的扶沟网站建设公司，扶沟接单;提供成都网站设计、网站建设、外贸网站建设,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行扶沟网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!
script type="text/javascript"
jQuery.fn.LoadImage=function(scaling,width,height,loadpic){
if(loadpic==null)loadpic="../img/loading.gif";
return this.each(function(){
var t=$(this);
var src=$(this).attr("src")
var img=new Image();
img.src=src;
//自动缩放图片
var autoScaling=function(){
if(scaling){
if(img.width0 img.height0){
if(img.width/img.height=width/height){
if(img.widthwidth){
t.width(width);
t.height((img.height*width)/img.width);
}else{
t.width(img.width);
t.height(img.height);
}
}
else{
if(img.heightheight){
t.height(height);
t.width((img.width*height)/img.height);
}else{
t.width(img.width);
t.height(img.height);
}
}
}
}
}
//处理ff下会自动读取缓存图片
if(img.complete){
autoScaling();
return;
}
$(this).attr("src","");
var loading=$("img alt=\"加载中...\" title=\"图片加载中...\" src=\""+loadpic+"\" /");
t.hide();
t.after(loading);
$(img).load(function(){
autoScaling();
loading.remove();
t.attr("src",this.src);
t.show();
});
} );
}
/script
div id="content"img src="img/20120518073933709.jpg"//div
script type="text/javascript"
!--
$(window).load(function(){
$('#content img').LoadImage(true, 600,500,'img/loading.gif');
});
//--
/script
jquery只是一个js库，不属于一个完整框架，不具备自适应功能。
bootstrap是一个完整框架，具备自适应
网页可见区域宽： 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
js语法不对 没有这种写法1201 = js_width = 1500
1201 = js_width js_width = 1500
您好，如果自适应窗口的轮播图，加上自动轮播。
div id='banner'
ul
li/li
li/li
li/li
/ul
/div
//如果轮播图宽度占满全屏的话。并且是类似于上述html的格式。
var index = 0;
var oBanner = $('#banner');
var iLiLength = oBanner.find('li').length;
setInterval(function(){
if (i iLiLength)){
i = 0;
}
i++;
oUl.animate({
left: -index * $(window).width()
},1000);
},1000);
大家在有时的网页设计中，前端会出现这样一个问题，因为左侧的侧边导航只有几个链接，很短，而右边的正文部分有可能会很长，怎么才能让左侧的背景能一直随着右侧的内容高度的增加而增加呢？当然，这种解决方法有两种，一种就是让左侧的导航漂浮，在右侧下拉或者是窗口拉出了左侧的高度时置顶，像糗事百科右侧的广告那样，这种方法现在也很流行，不过，我们今天不讲这种，讲的是另一种方法，让左右两边的div的高度能一致，随时一致，如果内容是固定的话，好做，左右固定高度，如果右侧的内容不固定呢？还是有办法得！
这种问题大多都是软件系统或者是一些后台中常用的，方法很简单，利用jquery获取右侧的高度，使得左侧和右侧的高度保持一致就OK啦！废话不多，上代码：
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
""
htmlxmlns=""
head
metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/
titlejQuery实现左右div自适应高度完全相同/title
styletype="text/css"
!--
body{FONT-SIZE: 14px;background-color:#fff}
--
/style
styletype="text/css"
#left{background:#999999; float:left; width:100px;}
#right{background:#0066FF; color:#fff; width:300px; float:left;}
.clear{clear:both;}
/style
/head
body
h3右边高度高度左边/h3
divid="left"
divstyle="padding:10px"
美浩工作室br/
美浩工作室br/
美浩工作室br/
美浩工作室br/
美浩工作室br/
/div
/div
divid="right"
divstyle="padding:10px"
网站建设工作室br/
网站建设工作室br/
网站建设工作室br/
网站建设工作室br/
网站建设工作室br/
网站建设工作室br/
网站建设工作室br/
网站建设工作室br/
网站建设工作室br/
网站建设工作室br/
网站建设工作室br/
网站建设工作室br/
网站建设工作室br/
网站建设工作室br/
br/
br/
br/
br/
br/
br/
br/
br/
br/
br/
br/
br/
br/
画法几何大家看法
/div
/div
scripttype="text/javascript"src=""/script
scripttype="text/javascript"
function $(id){
return document.getElementById(id)
}
function getHeight() {
if ($("left").offsetHeight=$("right").offsetHeight){
$("right").style.height=$("left").offsetHeight + "px";
}
else{
$("left").style.height=$("right").offsetHeight + "px";
}
}
window.onload = function() {
getHeight();
}
/script
divstyle="clear:both"/div
/body
/html
这其中的jquery代码中的获得高度用的clientHeight，介绍一下几种不同的获得方式以及他们的差别。
这四种浏览器分别为IE（Internet
Explorer）、NS（Netscape）、Opera、FF（FireFox）。
clientHeight
大家对 clientHeight
都没有什么异议，都认为是内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，一般是最后一个工具条以下到状态栏以上的这个区域，与页面内容无关。
offsetHeight
IE、Opera
认为 offsetHeight = clientHeight + 滚动条 + 边框。
NS、FF 认为 offsetHeight
是网页内容实际高度，可以小于 clientHeight。
scrollHeight
IE、Opera 认为 scrollHeight
是网页内容实际高度，可以小于 clientHeight。
NS、FF 认为 scrollHeight 是网页内容高度，不过最小值是
clientHeight。
简单地说
clientHeight 就是透过浏览器看内容的这个区域高度。
NS、FF 认为
offsetHeight 和 scrollHeight 都是网页内容高度，只不过当网页内容高度小于等于 clientHeight 时，scrollHeight
的值是 clientHeight，而 offsetHeight 可以小于 clientHeight。
IE、Opera 认为 offsetHeight
是可视区域 clientHeight 滚动条加边框。scrollHeight
则是网页内容实际高度。
同理
clientWidth、offsetWidth 和 scrollWidth
的解释与上面相同，只是把高度换成宽度即可。
说明
以上基于 DTD HTML 4.01 Transitional，如果是 DTD XHTML 1.0 Transitional
则意义又会不同，在 XHTML 中这三个值都是同一个值，都表示内容的实际高度。新版本的浏览器大多支持根据页面指定的 DOCTYPE
来启用不同的解释器。下载或浏览测试文件。
关系公式:scrollHeight = offsetHeight+ scrollTop
上面的方法大家明白了吗？赶紧复制下来运行下，看看效果吧！！！！大家在用的时候给自己要同样高度的两个div加上id，在jquery里面调用的标识修改即可！很方便的，那个jquery.min.js大家可以任意下载，哪里都有的！
