求一个jquery效果代码
发布网友
发布时间：2022-04-27 03:38
共2个回答
热心网友
时间：2022-05-14 05:44
<div class="box" style="width: 100px;height: 80px;background: #999;"></div>
$("div.box").click(function() {
var scale = 1.5; // 放大的倍数，0-1为缩小，大于1为放大
var speed = 500; // 动画执行的时间，单位：ms
var finalWidth = $(this).width() * scale;// 最终宽度
var finalHeight = $(this).height() * scale;// 最终高度
var mt = parseInt($(this).css("margin-top") == "auto" ? 0 : $(this).css("margin-top"));
var ml = parseInt($(this).css("margin-left") == "auto" ? 0 : $(this).css("margin-left"));
var wdv = (finalWidth - $(this).width()) / 2;
var hdv = (finalHeight - $(this).height()) / 2;
var finalMT = hdv > 0 ? mt - hdv : mt + hdv;
var finalML = wdv > 0 ? ml - wdv : ml + wdv;
// 动画显示
$(this).animate({
width : finalWidth,
height : finalHeight,
marginTop : finalMT,
marginLeft : finalML
}, speed);
});
// 亲自在chrome和IE8中试过，无问题，如果你放大的对象拥有position属性也不会有影响
2、如果你的浏览器支持css3，可以用transform实现，具体如下：
$("div.box").click(function() {
$(this).css({
"transform" : scale(1.5), // 1.5为放大的倍数
"-webkit-transform" : scale(1.5),
"-moz-transform" : scale(1.5)
});
});
当然你也可以事先在样式表中定义好样式，然后用addClass()追加即可。
热心网友
时间：2022-05-14 07:02
<html>
<head>
<title>ShowString.html</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<script type="text/javascript" src="jquery.min.js"></script>
<script language="JavaScript">
var top = 150;
var left = 150;
var width=200;
var height=200;
function myclick(){
$("#box").slideDown("normal",function(){
if(width<500 || height<500){
width = width+50;
height = height+50;
top = top -25;
left = left-25;
$("#box").removeAttr("style");
var a = "width:"+width+"px;height:"+height+"px;background-color:#969696;position:absolute;top:"+top+"px;left:"+left+"px";
$("#box").attr("style",a);
}
});
}
</script>
</head>
<body>
<div style="width:500px;height:500px;border:solid 1px #A52A2A" >
<div id="box" style="width:200px;height:200px;background-color:#969696;position:absolute;top:150px;left:150px" onclick="myclick()"></div>
</div>
</body>
</html>
