当前位置:首页 ? 淘宝装修教程 ? 正文

香港六合彩六合图库:淘宝特效JS实现图片等比例缩放,占满DIV,短的显示全,长的超出隐藏

5436 人参与  2016年01月06日 11:46  分类 : 淘宝装修教程  评论

曾道人六合图库 www.6kc9y.cn 朋友做的效果,特拿出来分享给大家:淘宝特效JS实现图片等比例缩放,占满DIV,短的显示全,长的超出隐藏

效果图如下:

2016010451244181.jpg

代码如下:

 <style type="text/css">
.div { float: left; overflow: hidden; margin: 5px; width: 200px; height: 150px; background: #97CFF0; border: solid 1px #09F; text-align: center; }
.div img { border: 0; }
</style>
<div class="div"><a href="#" target="_blank"><img src="images/1.jpg" alt="" onload="chgdivimgwh(this,200,150)" /></a></div>
<script>
//自动缩放图片尺寸,占满整个DIV,短的显示全,长的超出隐藏只显示部分,不够DIV宽高的则拉伸
//参数:图片对象,图片宽度,图片高度
function chgdivimgwh(obj,width,height){
 var image=new Image();
 image.src=obj.src; //获取图像路径
 var width1=image.width; //获取图像宽度
 var height1=image.height; //获取图像高度
 var a1=height1/width1;
 var a2=height/width;
 if(a1>a2){
  obj.width=width;
  obj.height=height1*width/width1;
  obj.style.marginTop='-' + Math.round((obj.height-height)/2)+ 'px';
 }else{
  obj.height=height;
  obj.width=width1*height/height1;
  obj.style.marginLeft='-' + Math.round((obj.width-width)/2)+ 'px';
 }
}
</script>


来源:曾道人六合图库(QQ号:254206549),转载请保留出处和链接!

本文链接://www.6kc9y.cn/zxjc/871.html

淘宝特效  淘宝JS实现图片等比缩放  淘宝JS图片特效  淘宝装修教程  

加入【淘宝店铺装修】QQ群:474687967(加群验证:飞蚂蚁模板网)

淘宝天猫内部优惠券九元九特卖网一般人,我不告诉他喔!

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

控制面板

您好,欢迎到访网站!
  [查看权限]
350装修模板
淘宝快递单号
连衣裙

飞蚂蚁影院

曾道人六合图库 | 曾道人六合图库 | 曾道人六合图库 | 曾道人六合图库 | 曾道人六合图库 | 网站地图 | 留言板 | 广告合作 | 飞蚂蚁影院

Copyright(c)2013-2016曾道人六合图库 All Rights Reserved. 粤ICP备14055454号
淘宝店铺装修交流群群号:474687967

曾道人六合图库
  • 人民日报评论员:在党的引领下汇聚圆梦力量 2019-06-17
  • 打破孤立预言!世界杯开启俄罗斯荣耀时刻,普京献词“地球盛会” 2019-06-17
  • 北京市将迎两位新区长 三人拟任区委副书记 2019-06-10
  • 端午假期结束 中国接待国内游客8910万人次 2019-06-03
  • 让“毒跑道”绝迹 内蒙古各方联手共同监管校园跑道 2019-06-02
  • 中国反击美国相关新闻 2019-06-02
  • 佛山成功孵化高校科技成果项目 2019-05-31
  • 市场能调节供需平衡吗? 2019-05-31
  • 关于国务院二招十分成功的旧改工程案例向 各省市推广解决民生住房困难的创新科技 2019-05-28
  • 新华社2017年度新闻记者证核验通过人员名单公示 2019-05-28
  • 21CN.COM 增值电信业务经营许可证 2019-05-19
  • 精兵劲旅·血脉赓续:第79集团军——忠诚有魂  转型重塑开新局 2019-05-15
  • 遭遇隐形歧视 就业权益谁来维护 2019-05-15
  • 房产证办十年 如此懒政岂能容忍 2019-05-14
  • 清热-热门标签-华商生活 2019-05-10
  • 950| 50| 894| 789| 237| 605| 685| 970| 502| 879|