jQuery图像不'；爆炸_Jquery_Image_Jquery Animate

jQuery图像不'；爆炸

jquery image

jQuery图像不'；爆炸,jquery,image,jquery-animate,Jquery,Image,Jquery Animate,我正在为我的网站添加一些非常基本的jQuery。我想在单击一些气球时将其图像分解。我试着在另一个问题的答案中建议增加一个高度，但仍然不起作用我试过的其他效果，比如淡出，效果很好请帮忙 script.js： //fadeIn blue flower $(document).ready(function(){ $('#blue_flower').hide().fadeIn('slow'); }); //fadeOut clover $(document).ready(f

我正在为我的网站添加一些非常基本的jQuery。我想在单击一些气球时将其图像分解。我试着在另一个问题的答案中建议增加一个高度，但仍然不起作用

我试过的其他效果，比如淡出，效果很好

请帮忙

script.js：

//fadeIn blue flower  
$(document).ready(function(){  
$('#blue_flower').hide().fadeIn('slow');  
});

//fadeOut clover  
    $(document).ready(function(){  
        $('#four_leaf_clover').click(function(){  
        $(this).fadeOut('slow');  
    });  
});  

//explode baloons  
$(document).ready(function(){  
    $('#balloons').click(function(){  
        $(this).hide("explode", {pieces:16}, 5000);  
    });  
});

index.html：

<!DOCTYPE html>
<html lang="en">
<head>
<title>Website Design and Development by Melanie Martin</title>
<meta charset="utf-8" />
<meta name="author" content="Melanie Martin" />
<meta name="description" content="Content based website design and development services." />
<meta name="keywords" content="webstie design, web design, web development, kansas city, Melanie Martin" />
<script src="jquery-1.9.1.min.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" href="baseline.css" type="text/css" />
<link rel="stylesheet" href="template.css" type="text/css" />

<!--lets older browsers see the cool new html5 tags-->
<!--[if lt IE 9]>  
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>  
<![endif]--> 

</head>

<body>

<section id="CorkBoard" class="leftsection">
<section class="oi">
        <section id="Melanie_photo">
            <a href="about.html"><img class="melanie_photo" src="images/melanie.png" alt="Melanie Martin" /></a>
        </section>
        <section id="blue_flower">
            <img id="blue_flower" src="images/blue_flower.png" alt="Click the flower!" />
        </section>
        <section id="business_card">
            <a href="contact.html"><img class="business_card" src="images/business_card.png" alt="Contact Melanie Martin" /></a>
        </section>  
        <section id="four_leaf_clover">
            <img id="four_leaf_clover" src="images/four_leaf_clover.png" alt="Click the clover!" />
        </section>      
        <section id="balloons">
            <img id="balloons" src="images/baloons.png" alt="Click the balloons!" />
        </section>      
        <!--<section id="html5_badge">
            <a href="http://www.w3.org/html/logo/"><img src="http://www.w3.org/html/logo/badge/html5-badge-h-solo.png" width="63" height="64" alt="HTML5 Powered" title="HTML5 Powered"></a></a>
        </section>-->   
        <!--<section id="weather_widget">
        </section>  
        <ul>
            <li>Weather gadget</li>
            <li>Lock with "code" as the combo (will link to code samples)</li>
            <li>Blue ribbon with W3C Validated on it (with W3C link)</li>
            <li>Stationary "Special Deals" link / emblem</li>
            <li>Contact Me Button</li>
            <li>Drawing of Lilo</li>
            <li>
        </ul>-->
</section>
</section>

<section id="DryEraseArea" class="rightsection">
<section class="oi">
    <nav id="PostIt">
    <nav class="oi">
<section id="pink_post-it" class="post-it"><a href="index.html"><img src="images/pink-up.png" alt="Home Page" ></a></section>
<section id="blue_post-it" class="post-it"><a href="projects.html"><img src="images/blue-down.png" alt="Projects Page"></a></section>
<section id="green_post-it" class="post-it"><a href="about.html"><img src="images/green-down.png" alt="About Melanie Martin"></a></section>
<section id="purple_post-it" class="post-it"><a href="contact.html"><img src="images/purple-down.png" alt="Contact Melanie Martin"></a></section>
    </nav>
    </nav>
    <section id="DryErase" class="rightsection">
    <section class="oi">
<h1>Woohoo!  You made it here!</h1>
<p>Hooray!  You found the site where Melanie shows off all her cool projects and recent freelance work!  Take a look around the site<!--, read some articles,--> and let us know what you think.</p>

<h2>Melanie Offers Freelance Services in a Variety of Areas</h2>
<h3>Website Design</h3>
<p>Melanie specializes in content centered design.  Nothing is more important than the message you want to convey to your visitors.  That's why she starts with your articles and images and builds a custom website around them.  The site is just the pretty packaging that shows off all your cool stuff.</p>
<h3>Social Media Integration</h3>
<p>Add social media like Facebook, Twitter, LinkedIn, Stumble, Reddit and others to your site to increase traffic and make the most of your advertising budget.  Social media also gets your visitors involved and benefits your search engine ranking.</p>
<h3>Website Redesign</h3>
<p>An outdated site can put visitors off and give your company a poor image.  Melanie recommends taking a fresh look at your current site at least once every three years.  Sometimes an entire redesign is needed but often just a little "face lift" can get you the results you need.</p>
<h3>Website Maintenance & Monitoring</h3>
<p>Melanie offers solutions for all your web needs. When you don't have the time or desire to update content, deal with host issues like setting up users and email addresses, and monitor your sites traffic, she can customize a plan to take care of it for you. There's no need to worry because she can cover it all. </p>
<h3>Free Consultations</h3>
<p>Consultations are always free.  Whether it's a large or small project doesn't matter just give us a shout and we'll give you free advice, recommendations, or estimates.</p>


    </section>
    </section>
</section>
</section>
<footer class="oi">
<section>
<!--<p>Copyright bagdge goes here.</p>-->
</section>
</footer>

</body>
</html>

与其他几种

隐藏

效果一样，您需要jQuery UI来添加

分解

效果：

将此添加到您的

脚本标记中：
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>



请参阅。我制作了一个用于分解图像的jquery插件。它使用画布来实现。

及其源代码：（建议在github上浏览）

//githubhttps://github.com/blackmiaool/jquery-image-explode
（函数（$）{
“严格使用”；
const wrapperName=“分解包装器”；
如果（！$）{
错误（“需要jQuery”）；
返回；
}
$.fn.restore=函数（）{
这个.each（函数（）{//分别分解
const$dom=$（这个）；
const wrapper=$dom.prop（wrapperName）；
if（包装器）{
replaceWith（$dom）；
$dom.prop（包装器名称，null）；
}
});
};
$.fn.explode=函数（opt）{
如果（！opt | | typeof opt！=“object”）{
opt={}；
}
常数{
最小宽度=3，
省略lastline=false，
半径=80，
最小半径=0，
释放=真，
fadeTime=300，
回收=真，
循环播放=500，
填充=真，
爆炸时间=300，
最大角度=360，
重力=0，
圆形=假，
接地距离=400，
ignorecomplete=false，
土地=真实，
出境支票，
完成，
}=opt；
让{
最大宽度
}=opt；
const$target=this；
让$targetImage；
常量args=参数；
如果（$target.length>1）{//单独分解
$target.each（函数（）{
const$dom=$（这个）；
$dom.explode.apply（$dom，args）；
});
返回；
}else if（！$target.length）{
返回；
}
如果（$target.prop（“标记名”）=“IMG”）{
如果（！$target.prop（“完成”））{
$target.on（“加载”，函数（）{
$target.explode.apply（$target，args）；
});
返回；
}
$targetImage=$target；
}else if（$target.css（“backgroundImage”）！=“无”）{
const src=$target.css（“backgroundImage”）.match（/url\（\”（[\S\S]*）\”\）/）[1]；
$targetImage=$（“”{
“类”：包装器名称，
});
const syncStyles=[“宽度”、“高度”、“边距顶部”、“边距右侧”、“边距底部”、“边距左侧”、“位置”、“顶部”、“右侧”、“底部”、“左侧”、“浮动”、“显示”]；
syncStyles.forEach（（v）=>{
$wrapper.css（v，$target.css（v））；
});
//$wrapper.css（“背景色”、“黑色”）；
if（$wrapper.css（“position”）=“static”）{
$wrapper.css（“位置”、“相对”）；
}
常数startRatio=0.3；
//产生破布的身体
常数=发电机数（）；
getRagsFinalState（）；
const$canvas=$（“”）；
//标准画布，用于绘制理想目标
const$canvas0=$（“”）；
$canvas0.css({
宽度：w，
高度:h,，
});
$canvas0.attr({
宽度：w，
高度:h,，
});
$canvas.css({
位置：“绝对”，
左：（w-CTX宽度）/2，
右：（w-ctxWidth）/2，
顶部：（h-CTX高度）/2，
底部：（h-CTX高度）/2，
页边空白：“自动”，
宽度：ctxWidth，
高度：ctxHeight，
});
$canvas.attr({
宽度：ctxWidth，
高度：ctxHeight，
});
$wrapper.append（$canvas）；
const ctx=$canvas[0].getContext（“2d”）；
const ctx0=$canvas0[0].getContext（“2d”）；
常数{
自然宽度，
自然重量
}=$targetImage？$targetImage[0]：{}；
如果（$target.prop（“标记名”）=“IMG”）{
ctx0.drawImage（$targetImage[0]，0，0，自然宽度，自然高度，0，0，w，h）；
}else if（$target.css（“backgroundImage”）！=“无”）{
设dx=0，
dy=0，
dWidth=自然宽度，
dhheight=自然高度；
让配置={
“背景重复”：$target.css（“背景重复”），
“背景大小”：$target.css（“背景大小”），
'background-position-x'：$target.css（“background-position-x”），
'background-position-y'：$target.css（“background-position-y”），
}
功能警告（按键）{
warn（`Unsupported${key}样式：${config[key]}`）；
}
const ratioW=w/自然宽度；
常数=h/自然高度；
如果（配置[“背景大小”]=“封面”）{
常数比=数学最大值（ratioW，ratioH）；
dWidth=自然宽度*比率；
DHHEIGHT=自然高度*比率；
}else if（配置[“背景大小”]=“包含”）{
常数比=数学最小值（ratioW，ratioH）；
dWidth=自然宽度*比率；
DHHEIGHT=自然高度*比率；
}否则{
警告（“背景大小”）；
}
dx=parseInt（config['background-position-x']）/100*（w-dWidth）；
dy=parseInt（配置['background-position-y']）/100
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>