javascript Jquery 使用心跳效果调整图像大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18781661/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery resize image with a heart beat effect
提问by Valeri Crudu
Hello want to make a image with a heartbeat effect. It has to resize a bit, let's say maximum 20 pixel bigger, and then goes to original size. It will be like a heartbeat, 2 beats - original, 2 beats - original.
你好想做一个有心跳效果的图片。它必须稍微调整大小，假设最大 20 像素大，然后转到原始大小。它会像心跳一样，2 拍 - 原创，2 拍 - 原创。
So far I found only this effect:
到目前为止，我只发现了这种效果：
(function pulse(back) {
$('#seventyfive').animate(
{
'font-size': (back) ? '100px' : '140px',
opacity: (back) ? 1 : 0.5
}, 700, function(){pulse(!back)});
})(false);
Or you can check it out here: JSFiddle
或者你可以在这里查看：JSFiddle
回答by Patrick Leijser
this will do
这会做
(function pulse(back) {
$('#seventyfive img').animate(
{
width: (back) ? $('#seventyfive img').width() + 20 : $('#seventyfive img').width() - 20
}, 700);
$('#seventyfive').animate(
{
'font-size': (back) ? '100px' : '140px',
opacity: (back) ? 1 : 0.5
}, 700, function(){pulse(!back)});
})(false);
回答by Kordkandi
You wan't a real Beating Heart effect?
So what are you waiting for? check the following ;)
你想要一个真正的心跳效果吗？
那你还在等什么？检查以下内容;)
HTML
HTML
<img id="seventyfive"
src="http://upload7.ir/imgs/2014-02/60314995125165880641.png"/>
CSS
CSS
#seventyfive{
position:absolute;
font-size:100px;
top: 50px;
left: 50px;
font-weight:bold;
}
JS
JS
var size = 150;
var s_size = 0.66 * size;
var m_size = 0.83 * size;
var s_resize = ( size - s_size )/2;
var m_resize = ( size - m_size )/2;
var image = $('#seventyfive').css('width',size);
var x = image.offset().left;
var y = image.offset().top;
function pulse() {
image.animate({
width: s_size, top:x+s_resize,left:y+s_resize
}, 350, function() {
image.animate({
width: size, top:x, left:y
}, 100, function() {
image.animate({
width: m_size, top:x+m_resize, left:y+m_resize
}, 70 ,function(){
image.animate({
width: size, top:x , left:y
}, 70, function() {
pulse();
});
});
});
});
};
pulse();
回答by Kevin Lynch
I would do it like this simply using .animate
我会这样做简单地使用 .animate
DEMO http://jsfiddle.net/kevinPHPkevin/D3X7R/72/
演示http://jsfiddle.net/kevinPHPkevin/D3X7R/72/
function pulse() {
$('#seventyfive').animate({
width: 300, height: 300, // sets the base height and width
opacity: 0.5
}, 700, function() {
$('#seventyfive').animate({
width: 320, height: 320, // sets the alternative height and width
opacity: 1
}, 700, function() {
pulse();
});
});
};
pulse();
回答by Anup Singh
HTML
HTML
<div><img id="seventyfive" src="http://winters.yorku.ca/wp-content/blogs.dir/271/files/2011/11/twitter-icon.png" /></div>
JS
JS
(function pulse(back) {
$('#seventyfive').animate(
{
'font-size': (back) ? '100px' : '140px',
opacity: (back) ? 1 : 0.5,
height: (back) ? "100%" : "50%",
width: (back) ? "100%" : "50%",
'margin-top': (back) ? "0" : "25%",
'margin-left': (back) ? "0" : "25%"
}, 700, function(){pulse(!back)});
})(false);
CSS
CSS
#seventyfive{
position:absolute;
font-size:100px;
font-weight:bold;
}
回答by A. Wolff
In CSS3:
在 CSS3 中：
var timeoutThrottle,back = true;
$('#seventyfive').on('transitionend',function(e){
clearTimeout(timeoutThrottle);
timeoutThrottle = setTimeout(function(){ back = !back; pulse(back); },0);
});
var pulse = (function pulse(back) {
$('#seventyfive').toggleClass('heartBeat', back);
return pulse;
})(back);
回答by nessa.gp
In this solution the number of beats is a parameter (reps):
在这个解决方案中，节拍数是一个参数（代表）：
function pulse($cnt,time,reps){
reps = reps || 2;
(function beat(count) {
$cnt.animate({
opacity: (count<=0) ? 1 : 0.5
'font-size': (count<=0) ? '100px' : '140px',
}, time,
count==0? undefined :
function(){ beat(count<0? -count-1 : -count+1); });
})(reps+1);
}
