700字范文 > javascript等比例缩放图片的实现代码

javascript等比例缩放图片的实现代码

时间：2019-08-13 10:12:38

<!DOCTYPE HTML>

<html>

<head>

<title>jQuery实现等比例缩放大图片</title>

body{background:#F90; margin:0; padding:0;}

img,div{padding:0; margin:0;}

.demo{width:1000px; background:#fff; margin:0 auto; margin-top:30px; height:800px; overflow:hidden;}

#demo1{ width:1000px;}

</style>

$(function(){

var w = $(window).width();

var img_w = $("#demo1 img").width();

var img_h = $("#demo1 img").height();

if(img_w > w){

var height = (w * img_h) / img_w;

$("#demo1 img").css({width:w, height:height});

}

$(window).resize( function(){

var w = $(window).width();

var w2 = $("#demo1").width();

var img_w = $("#demo1 img").width();

var img_h = $("#demo1 img").height();

if(img_w > w){//图片宽度大于宽度

var height = (w * img_h) / img_w;

$("#demo1 img").css({width:w, height:height});

$("#demo1 img").attr("attr", w);

}else{

$("#demo1 img").css({width:1000, height:600});

}

if(w < w2){//屏幕少于容器宽度

var height = (w * img_h) / img_w;

$("#demo1 img").css({width:w, height:height});

}

});

$(window).scroll(function(){

var w = $(window).width();

var w2 = $("#demo1").width();

var img_w = $("#demo1 img").width();

var img_h = $("#demo1 img").height();

var scrollLeft = $(this).scrollLeft();

var scrollTop = $(this).scrollTop();

if(scrollLeft > 0){

$("#demo1 img").css({width:1000, height:600});

}

var scrollLeft = $(this).scrollLeft();

var scrollTop = $(this).scrollTop();

if( scrollLeft > 0 ){

//$("#demo1 img").css({width:w, height:height});

var height = (w * img_h) / img_w;

$("#demo1 img").css({width:w, height:height});

}

});

</script>

</head>

<body>

</div>

</body>

</html>

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。