等比例缩放图片

原创于 2014-11-18 10:49:43 发布 · 393 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#等比例缩放

js 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现页面元素动态效果的方法，包括鼠标悬停切换样式和自动轮播图片的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<script type="text/javascript">
$(function(){
var num = 2
var timer1
$(".cB_hd li").mouseover(function(){
$(this).addClass("curNum1").siblings().removeClass();
$(".cB_bd li").eq($(this).index()).addClass("curImgB").siblings().removeClass();
num = $(this).index() + 1;
})
function autoplay(){
if( num == 3){
num = 0 ;
}
$(".cB_hd li").eq(num).addClass("curNum1").siblings().removeClass();
$(".cB_bd li").eq(num).addClass("curImgB").siblings().removeClass();
num++;
}
timer1 = setInterval(autoplay,3200)
$(".conBanner li").mouseover(function(){
clearInterval(timer1);
}).mouseout(function(){
timer1 = setInterval(autoplay,3200)
})
})
$(document).ready(function() {
changeImg();
});
//307 330
function changeImg(){
var width=$('#img88').width();
var height=$('#img88').height();
if(width>height && width>400){
height=400*height/width;
width=400;
$('#img88').width(width);
$('#img88').height(height);
}else if( height>width && height>400){
width=400*width/height;
height=400;
$('#img88').width(width);
$('#img88').height(height);
}
//alert(width+"----------"+height);
}
</script>