繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 用js 让图片在 div或dl里 居中，底部对齐
- Javascript
- jquery 操作单选框，复选框，下拉列表实现代码
- js 数组实现一个类似ruby的迭代器
- JavaScript 组件之旅（一）分析和设计
- JavaScript 组件之旅（二）编码实现和算法
- JavaScript 组件之旅（三）：用 Ant 构建组件
- JavaScript 组件之旅（四）：测试 JavaScript 组件
- 小议javascript 设计模式 推荐
- 浅谈javascript 面向对象编程
- javascript 时间比较实现代码
- js apply/call/caller/callee/bind使用方法与区别分析
- JavaScript 全角转半角部分
- jquery 选择器部分整理
- Firebug 字幕文件JSON地址获取代码
- jQuery 判断元素上是否绑定了事件
- javascript实现的距离现在多长时间后的一个格式化的日期
- javascript 面向对象,实现namespace,class,继承，重载
- javascript 通过封装div方式弹出div窗体
- JScript 脚本实现文件下载 一般用于下载木马
- JavaScript 工具库 Cloudgamer JavaScript Library v0.1 发布
- 网页禁用右键实现代码（JavaScript代码）
Javascript 中的 用js 让图片在 div或dl里 居中，底部对齐
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 97 ::
收藏到网摘: n/a
解决图片长\宽大于容器,一边长一边宽，小于容器
在ff,ie里都通过
这里是js代码:
复制代码 代码如下:
<HTML>
<HEAD>
<TITLE> 软晨学习网 www.ruanchen.com New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style type="text/css">
*{margin:0px; padding:0px; font-size:12px; }
body{ font-size:0.8em; color: #333;}
ul{ list-style:none}
.clear:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;}
img{border:0px;}
.clear1{ clear: both; width: 100%; height: 1px; overflow: hidden;}
a{ text-decoration: none; color:#404040 }
body{ background:#f7f3d0 url(../images/bg.jpg) repeat-x left 210px;}
/**/
#pic{border:1px solid #000; width:800px; height:auto!important;height:300px; min-height:300px;background:#fff}
#pic dl{width:215px;height:200px; overflow: hidden;border:1px solid #000;margin:10px;float:left}
#pic dt{height:161px; width:209px;overflow:hidden;border:1px solid red;text-align:center}
</style>
<script language="javascript" src="tt.js"></script>
<script language="javascript">
<!--
imgsrc={
vh:'161', //高
vw:'209', //宽
addEvent: function(elm, evType, fn, useCapture){
if (elm.addEventListener){
elm.addEventListener(evType, fn, useCapture);
return true;
} else if (elm.attachEvent) {
var r = elm.attachEvent('on' + evType, fn);
return r;
} else {
elm['on' + evType] = fn;
}
},
init:function()
{
var divn=document.getElementById("pic")
var dln=divn.getElementsByTagName("dl")
for (var i=0;i<dln.length ;i++) {
var dtn=dln[i].getElementsByTagName("dt");
var imgn=dtn[0].getElementsByTagName("img");
if(imgn[0].height>imgsrc.vh||imgn[0].width>imgsrc.vw)
{
if(imgn[0].height/imgsrc.vh > imgn[0].width/imgsrc.vw)
{
imgn[0].heigh=imgsrc.vh
imgn[0].width=imgsrc.vh/imgn[0].height*imgn[0].width
}
else
{
imgn[0].width=imgsrc.vw
imgn[0].heigh=imgsrc.vw/imgn[0].width*imgn[0].heigh
}
}
if(imgsrc.vh-imgn[0].height>0)
{
var hh=(imgsrc.vh-imgn[0].height)/2
imgn[0].style.margin=hh+" 0px 0px 0px"
}
}
}
}
imgsrc.addEvent(window,"load",imgsrc.init,false)
//-->
</script>
</HEAD>
<BODY>
<div id="pic">
<dl>
<dt><a href="images/_1.jpg" title=""><img src="images/_1.jpg" border=0 alt="" title=""></a></dt>
<dd>图片1</dd>
</dl>
<dl>
<dt><a href="images/_2.jpg" title=""><img src="images/_2.jpg" border=0 alt="" title=""></a></dt>
<dd>图片1</dd>
</dl>
<dl>
<dt><a href="images/_3.jpg" title=""><img src="images/_3.jpg" border=0 alt="" title=""></a></dt>
<dd>图片1</dd>
</dl>
<dl>
<dt><a href="images/_4.jpg" title=""><img src="images/_4.jpg" border=0 alt="" title=""></a></dt>
<dd>图片1</dd>
</dl>
<dl>
<dt><a href="images/_5.jpg" title=""><img src="images/_5.jpg" border=0 alt="" title=""></a></dt>
<dd>图片1</dd>
</dl>
<dl>
<dt><a href="images/_6.jpg" title=""><img src="images/_6.jpg" border=0 alt="" title=""></a></dt>
<dd>图片1</dd>
</dl>
<dl>
<dt><a href="images/_1.jpg" title=""><img src="images/_1.jpg" border=0 alt="" title=""></a></dt>
<dd>图片1</dd>
</dl>
<dl>
<dt><a href="images/_2.jpg" title=""><img src="images/_2.jpg" border=0 alt="" title=""></a></dt>
<dd>图片1</dd>
</dl>
<dl>
<dt><a href="images/_3.jpg" title=""><img src="images/_3.jpg" border=0 alt="" title=""></a></dt>
<dd>图片1</dd>
</dl>
<dl>
<dt><a href="images/_4.jpg" title=""><img src="images/_4.jpg" border=0 alt="" title=""></a></dt>
<dd>图片1</dd>
</dl>
<dl>
<dt><a href="images/_5.jpg" title=""><img src="images/_5.jpg" border=0 alt="" title=""></a></dt>
<dd>图片1</dd>
</dl>
<dl>
<dt><a href="images/_6.jpg" title=""><img src="images/_6.jpg" border=0 alt="" title=""></a></dt>
<dd>图片1</dd>
</dl>
<div class="clear1"></div>
</div>
</BODY>
</HTML>
包太大上传不了，我把html文件放上来，自己放图片看看就行了
评论 (0) All
