等比图片放缩水平/垂直居中原生javascript特效

 闲着,用原生javascript写了个 一个固定宽高的div框内,等比图片放缩 

外加水平/垂直居中javascript特效,希望对各位童鞋有用,或者有什么该完善的。0.0

 <script type="text/javascript">

function showImgH_W2(tr,qW,qH){

var sdgH,sdgW,j2;

    sdgW=tr.width;

    sdgH=tr.height;

    if(sdgW>sdgH){

        tr.style.width=qW+"px";

 

        //var rr=qH;

        j2=(qH-(qW/sdgW)*sdgH)/2;

            if(j2>0)

            tr.style.paddingTop=j2+"px";

    }

    else{

        tr.style.height=qH+"px";

        //var rr=200;

        j2=(qW-(qH/sdgH)*sdgW)/2;

            if(j2>0)

            tr.style.paddingLeft=j2+"px";

    }

 

}

//window.onload=showImgH_W;

</script>

时间: 2024-09-12 07:00:38

等比图片放缩水平/垂直居中原生javascript特效的相关文章

css中水平垂直居中对齐布局实例总结

 水平居中,如果知道元素的宽度,则可以使用 代码如下 .cell{width:300px; margin:0 auto; text-align:center;}   如果是内联元素居中,那么直接用text-align:center则行 如果未知元素宽度,并且非内联元素,那么下面给出的几种方案也适合你. 用CSS来实现元素的垂直居中效果是件苦差事,虽然说实现方法有多种,但有很多方式在某些浏览器下可能无法正常的工作.接下来我们就一起来看看这些不同方法实现垂直居中的各自优点和其不足之处. 方法一: 这

css中水平垂直居中对齐布局一些实例总结

水平居中,如果知道元素的宽度,则可以使用  代码如下 复制代码 .cell{width:300px; margin:0 auto; text-align:center;} 如果是内联元素居中,那么直接用text-align:center则行 如果未知元素宽度,并且非内联元素,那么下面给出的几种方案也适合你. 用CSS来实现元素的垂直居中效果是件苦差事,虽然说实现方法有多种,但有很多方式在某些浏览器下可能无法正常的工作.接下来我们就一起来看看这些不同方法实现垂直居中的各自优点和其不足之处. 方法一

网页制作技巧:清除浮动和图片水平垂直居中

文章简介:网页制作技巧:清除浮动和图片水平垂直居中. 1.如何清除浮动 方法1: #test{clear:both;} #test为浮动元素的下一个兄弟元素 方法2: #test{display:block;zoom:1;overflow:hidden;} #test为浮动元素的父元素.zoom:1也可以替换为固定的width或height 方法3: #test{zoom:1;} #test:after{display:block;clear:both;visibility:hidden;hei

css实现body背景图片水平垂直居中方法

 <style type="text/css"> *{margin:0; padding:0;} html,body{ width:100%; height:100%;} body{ background:#fff url(/eg/eg_2014_01_02_14_50.jpg) center no-repeat;} </style>   <div class="wrap"> <h2>让body标签中的背景图片水平垂直

原生javascript实现图片滚动、延时加载功能

 这篇文章主要介绍了使用原生javascript实现图片滚动.延时加载功能,思路与方法均分享给大家,希望对大家能有所帮助.     实现效果:下拉滚动条时,图片出现在可见区域时,才开始加载 思路: (1)img标签,把真实的图片地址,放在自己设置的属性里面,如 lazy-src (2)获取img离页面的高度(在JQ里是offset().top),原生是: img.getBoundingClientRect().top + document.body.scrollTop||document.doc

原生javascript实现图片按钮切换

 这篇文章主要介绍了原生javascript实现图片按钮切换,需要的朋友可以参考下     先给大家看下效果展示图 以下为详细代码:   代码如下: function LGY_picSwitch(option){ this.oWrap = this.getId(option.wrapID); //最外层元素 this.olistWrap = this.getNodeByClassname(this.oWrap,'gy_picSwitch_listWrap')[0]; this.oUl = thi

原生javascript实现图片弹窗交互效果

 这篇文章主要介绍了原生javascript实现图片弹窗交互效果的方法及的相关资料,需要的朋友可以参考下     [一]用var 声明多个变量,比每个变量都用var快多了   代码如下: var sScrollTop = document.body.scrollTop || document.documentElement.scrollTop, sWindow_h = document.documentElement.clientHeight, t_h = parseInt(this.getCs

css实现在div水平垂直居中与图片水平居中的效果

div居中的完美解决方案! (水平垂直居中) 1,关于居中使用css为:  代码如下 复制代码 position:fixed;left:50%;top:50%;margin-left:width/2;margin-top:height/2; 对于ie6,只能把position:改成absolute; 图片在div中居中 利用图片的margin属性将图片水平居中,利用div的padding属性将图片垂直居中. 方法一: css代码如下:  代码如下 复制代码 div {width:300px; h

原生javaScript实现图片延时加载的方法_javascript技巧

本文实例讲述了原生javaScript实现图片延时加载的方法.图片延时加载其实是有jquery插件了并且加载方法非常的简单并且合理了,但有朋友觉得加载jquery插件包太大了,于时自己写了一个,给各位分享一下. 首先,图片延时加载可以节省我们带宽,获取到更好的用户体验,尤其对于图片多的站点,这一点显得至关重要,下面就跟大家探讨一下图片延时加载原理和实现代码. 图片延时加载原理 图片延时加载原理是在html里面的图片src填的并不是真正的图片地址,而是以一种自定义属性把图片地址赋给img标签,如: