自己用jQuery写了一个图片的马赛克消失效果_jquery

其中的一个效果:
 
html代码:

复制代码 代码如下:

<h1>单击图片,产生效果</h1>
<div class="box"></div>

插件代码:

复制代码 代码如下:

; (function ($) {
var defaults = {
ani: 4, //动画效果.1.马赛克向中间聚拢,2.马赛克左上角聚拢,3.马赛克拉扯消失,4.原地缩小
delay: 3000, //动画执行时间
url:"0",//图片路径
count: [20, 20]//马赛克水平数量,竖直方向数量;数量不能过多,否则计算量太大,计算机执行不了,导致浏览器卡死
}
$.fn.gysMaSaiKe = function (opt) {
opt = $.extend({}, defaults, opt);
if(opt.url=="0"){alert("没有填写图片路径参数");return;}
var obj = $(this);
if (obj.css("position") == "static") obj.css({ "position": "relative" });
obj.css("overflow","hidden");
var objWidth = obj.width();
var objHeight = obj.height();
(function (count,url, obj) {
var littleBoxWidth = Math.floor(objWidth / count[0]);
var littleBoxHeight = Math.floor(objHeight / count[1]);
var html = "";
var littleBoxLeft = littleBoxWidth * (-1), littleBoxTop = littleBoxHeight * (-1);

for (var i = 0; i < count[1]; i++) {//行
littleBoxTop += littleBoxHeight;
for (var j = 0; j < count[0]; j++) {//每一行中的单个span
littleBoxLeft += littleBoxWidth;
html += "<span style='display:block;position:absolute;left:" + littleBoxLeft + "px;top:" + littleBoxTop + "px;width:" + littleBoxWidth + "px; height:" + littleBoxHeight + "px; background-image:url("+url+");background-position:" + (littleBoxLeft) * (-1) + "px " + (littleBoxTop) * (-1) + "px;'></span>";
}
littleBoxLeft = littleBoxWidth * (-1);
}
obj.html(html);
})(opt.count,opt.url,obj);

var animation = function (ani, delay, objs) {
var res = function () { }
if (ani == 1) {//马赛克向中间聚拢
res = function () {
objs.animate({ top: objHeight / 2, left: objWidth / 2, opacity: 0 }, delay);
setTimeout(function(){obj.html("");},delay);
}
}
else if (ani == 2) {//碎片向左上角聚拢消失
res = function () {
objs.animate({ left: 0, top: 0, opacity: 0 }, delay); setTimeout(function () { obj.html(""); }, delay);
}
}
else if (ani == 3) {//拉扯消失
res = function () {
objs.filter(":even").animate({top:-100,left:-100},delay);
objs.filter(":odd").animate({ top: -100, left:900}, delay); setTimeout(function(){obj.html("");},delay);
}
}
else if (ani == 4) {//
res = function () { objs.animate({ height: 0, width: 0 }, delay);setTimeout(function(){obj.html("");},delay); }
}
else {
res = function () { objs.animate({ height: 0, width: 0 }, delay);setTimeout(function(){obj.html("");},delay); }
}
return res;
} (opt.ani, opt.delay, obj.children());

obj.on("click", "span", animation);
}
})(jQuery);

css代码:

复制代码 代码如下:

.box { width: 1000px; height:600px;}

插件的调用:

复制代码 代码如下:

$(function () {
$(".box").gysMaSaiKe({
count: [10, 15], //马赛克水平数量,竖直方向数量;数量不能过多,否则计算量太大,计算机执行不了,导致浏览器卡死
ani: 4, //动画效果.1.马赛克向中间聚拢,2.马赛克左上角聚拢,3.马赛克拉扯消失,4.原地缩小
delay: 5000, //动画执行时间
url: "1.jpg" //图片路径
});
});

时间: 2024-12-01 00:34:40

自己用jQuery写了一个图片的马赛克消失效果_jquery的相关文章

自己用jQuery写了一个图片的马赛克消失效果

 这篇文章主要介绍的是自己用jQuery写了一个图片的马赛克消失效果实现过程,需要的朋友可以参考下 其中的一个效果:   html代码: 代码如下: <h1>单击图片,产生效果</h1> <div class="box"></div> 插件代码: 代码如下: ; (function ($) { var defaults = { ani: 4, //动画效果.1.马赛克向中间聚拢,2.马赛克左上角聚拢,3.马赛克拉扯消失,4.原地缩小 de

jQuery实现鼠标经过图片变亮其他变暗效果_jquery

以下是完整源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&quo

jQuery 写的插件图片上下切换幻灯效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

jQuery实现鼠标经过图片预览大图效果_jquery

jQuery:是一种客户端的技术,它的诞生的理由是:write less,do more(写更少的代码,做更多的事情). 因此,我们可以借助jQuery来实现一些很酷炫的效果,相比于javaScript来说,同样的效果,但是很简单的代码.jQuery中的核心知识点就是选择器的使用,选择器的内容我会在之后的博客中总结,希望大家去看下,学好了选择我器,相当于完全掌握了jQuery. 这篇博文是实现怎么通过jQuery实现我们在购物网站中常见的:当鼠标经过了图片数,图片会放大进行预览大图.接下来我就粘

用jquery写的一个万年历

 万年历,想必大家对它都不陌生吧,下面是使用jquery写的一个万年历示例,喜欢的朋友可以参考下 代码如下: <!Doctype html><html xmlns=http://www.w3.org/1999/xhtml>  <head>  <meta http-equiv=Content-Type content="text/html;charset=utf-8">  <style>  .main{  width:600px

jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)_jquery

本文实例讲述了jQuery实现的给图片点赞+1动画效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 点击此处查看在线演示. 完整实例代码点击此处本站下载. 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=&

jQuery实现点击图片翻页展示效果的方法

 这篇文章主要介绍了jQuery实现点击图片翻页展示效果的方法,涉及jQuery操作图片的操作技巧,非常具有实用价值,需要的朋友可以参考下     本文实例讲述了jQuery实现点击图片翻页展示效果的方法.分享给大家供大家参考.具体实现方法如下:   代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>基于jQu

jQuery实现点击图片翻页展示效果的方法_jquery

本文实例讲述了jQuery实现点击图片翻页展示效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>基于jQuery实现的点击图片翻页展示效果</title> <meta http-equiv="content-type&q

用WPF写了一个图片可以多点手触浏览器,怎样限制一张图片不跑出窗口外?

问题描述 刚开始学C#我的问题是我想把一张图片最小为填满窗口大小,图片放大时至少一边不会跑出窗口外.效果类似微信里的图片浏览器.我应该限制哪些量大家有什么思路吗? 解决方案 解决方案二: 左点不能大于0,右点不能小于窗口大小.上下的坐标相同解决方案三: 引用1楼zhoujk的回复: 判断如下:图像的坐标:左点不能大于0,右点不能小于窗口大小.上下的坐标相同 哇,这么快就有回复,我研究研究,谢谢指点啊.解决方案四: "图片放大时至少一边不会跑出窗口外"具体是什么情况?贴个截图出来看看.任