Ok so I'm putting in an image that onclick resizes, (goes larger and then onclick returns to origional size)
I've done this using JS but I cant seem to implicate an animation in the tween between sizes, i want it to visibly get bigger rather so it expands to the size rather than just flicks between the two instances.
Heres the coding:
<script type="text/javascript">
<!--
var flag = true;
function resize() {
if(flag) {
document.getElementById("img1").style.width = "50px";
} else {
document.getElementById("img1").style.width = "280px";
}
(flag)?flag=false:flag=true;
}
//-->
</script>
<body onload="resize();">
<img id="img1" src="../images/attachicona.png" border="0" onClick="resize();" />
Ok so I'm putting in an image that onclick resizes, (goes larger and then onclick returns to origional size)
I've done this using JS but I cant seem to implicate an animation in the tween between sizes, i want it to visibly get bigger rather so it expands to the size rather than just flicks between the two instances.
Heres the coding:
<script type="text/javascript">
<!--
var flag = true;
function resize() {
if(flag) {
document.getElementById("img1").style.width = "50px";
} else {
document.getElementById("img1").style.width = "280px";
}
(flag)?flag=false:flag=true;
}
//-->
</script>
<body onload="resize();">
<img id="img1" src="../images/attachicona.png" border="0" onClick="resize();" />
2 Answers
Reset to default 2You can use CSS3 transitions to make the same effect. No need of javascript or jquery - css3 animation/transition/transform: How to make image grow?
Or you can use jquery animations - http://forum.jquery./topic/image-resize-animation
if using jquery
var flag = true;
$('#img1').click(function(e){
if(flag)
$(e.target).animate({width:'50px'}, 150, function(){
//do stuff after animation
});
else
$(e.target).animate({width:'280px'}, 150, function(){
//do stuff after animation
});
flag=!flag;
});
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745389331a4625587.html
评论列表（0条）