用js 让图片在 div或dl里 居中,底部对齐


Posted in Javascript onJanuary 21, 2008

解决图片长\宽大于容器,一边长一边宽,小于容器
在ff,ie里都通过
这里是js代码:

<HTML> 
 <HEAD> 
  <TITLE> 三水点靠木 3water.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文件放上来,自己放图片看看就行了
Javascript 相关文章推荐
jquery连缀语法如何实现
Nov 29 Javascript
Jquery创建层显示标题和内容且随鼠标移动而移动
Jan 26 Javascript
jquery获取复选框被选中的值
Mar 22 Javascript
完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效
Nov 12 Javascript
JavaScript AOP编程实例
Jun 16 Javascript
举例讲解如何判断JavaScript中对象的类型
Apr 22 Javascript
jQuery对象与DOM对象转换方法详解
May 10 Javascript
JavaScript常用正则验证函数实例小结【年龄,数字,Email,手机,URL,日期等】
Jan 23 Javascript
详解a++和++a的区别
Aug 30 Javascript
关于 angularJS的一些用法
Nov 29 Javascript
微信小程序人脸识别功能代码实例
May 07 Javascript
Js on及addEventListener原理用法区别解析
Jul 11 Javascript
jquery 插件 人性化的消息显示
Jan 21 #Javascript
msn上的tab功能Firefox对childNodes处理的一个BUG
Jan 21 #Javascript
利用js跨页面保存变量做菜单的方法
Jan 17 #Javascript
[原创]来自ImageSee官方 JavaScript图片浏览器
Jan 16 #Javascript
JavaScript表单常用验证集合
Jan 16 #Javascript
JavaScript的Cookies
Jan 16 #Javascript
JavaScript中的对象化编程
Jan 16 #Javascript
You might like
php实现专业获取网站SEO信息类实例
2015/04/02 PHP
PHP微信开发之微信消息自动回复下所遇到的坑
2016/05/09 PHP
PHP基于XMLWriter操作xml的方法分析
2017/07/17 PHP
laravel 实现设置时区的简单方法
2019/10/10 PHP
JavaScript 在线压缩和格式化收藏
2009/01/16 Javascript
javascript客户端解决方案 缓存提供程序
2010/07/14 Javascript
JavaScript四种调用模式和this示例介绍
2014/01/02 Javascript
button没写type=button会导致点击时提交
2014/03/06 Javascript
javascript从image转换为base64位编码的String
2014/07/29 Javascript
JavaScript知识点总结(五)之Javascript中两个等于号(==)和三个等于号(===)的区别
2016/05/31 Javascript
浅谈JavaScript中变量和函数声明的提升
2016/08/09 Javascript
JavaScript鼠标特效大全
2016/09/13 Javascript
jquery DataTable实现前后台动态分页
2017/06/17 jQuery
AngularJS实现的根据数量与单价计算总价功能示例
2017/12/26 Javascript
使用jQuery 操作table 完成单元格合并的实例
2017/12/27 jQuery
Vuejs开发环境搭建及热更新【推荐】
2018/09/07 Javascript
原生js实现Flappy Bird小游戏
2018/12/24 Javascript
react native 原生模块桥接的简单说明小结
2019/02/26 Javascript
微信小程序+云开发实现欢迎登录注册
2019/05/24 Javascript
javascript删除数组元素的七个方法示例
2019/09/09 Javascript
使用Easyui实现查询条件的后端传递并自动刷新表格的两种方法
2019/09/09 Javascript
js实现简单的日历显示效果函数示例
2019/11/25 Javascript
JavaScript组合设计模式--改进引入案例分析
2020/05/23 Javascript
Flask之flask-script模块使用
2018/07/26 Python
浅谈numpy生成数组的零值问题
2018/11/12 Python
Python Tornado核心及相关原理详解
2020/06/24 Python
Python学习笔记之装饰器
2020/08/06 Python
使用html5+css3来实现slider切换效果告别javascript+css
2013/01/08 HTML / CSS
Canvas图片分割效果的实现
2019/07/29 HTML / CSS
美国大型的健身社区和补充商店:Bodybuilding.com
2016/09/06 全球购物
AVON雅芳官网:世界上最大的美容化妆品公司之一
2016/11/02 全球购物
Mountain Warehouse澳大利亚官网:欧洲家庭户外品牌倡导者
2016/11/20 全球购物
《望洞庭》教学反思
2014/02/16 职场文书
幼儿教师求职信
2014/05/24 职场文书
入党介绍人考察意见
2015/06/01 职场文书
花木兰观后感
2015/06/10 职场文书