自己用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" //图片路径
});
});

(0)

相关推荐

  • 用javascript实现的图片马赛克后显示并切换加文字功能

    <script language="JavaScript1.1"> var slidespeed=3000 var slideimages=new Array("http://www.blueidea.com/articleimg/upload/2006/3/5/2482150_1_7.jpg","http://www.blueidea.com/articleimg/upload/2006/3/5/2482150_2_1.jpg",&

  • php实现图片局部打马赛克的方法

    本文实例讲述了php实现图片局部打马赛克的方法.分享给大家供大家参考.具体分析如下: 原理: 对图片中选定区域的每一像素,增加若干宽度及高度,生成矩型.而每一像素的矩型重叠在一起,就形成了马赛克效果. 本例使用GD库的imagecolorat获取像素颜色,使用imagefilledrectangle画矩型. 效果图如下所示: 代码如下: 复制代码 代码如下: <?php  /** 图片局部打马赛克 * @param  String  $source 原图 * @param  Stirng  $d

  • php实现图片添加描边字和马赛克的方法

    本文实例讲述了php实现图片添加描边字和马赛克的方法.分享给大家供大家参考.具体实现方法如下: 马赛克:void imagemask ( resource image, int x1, int y1, int x2, int y2, int deep) imagemask() 把坐标 x1,y1 到 x2,y2(图像左上角为 0, 0)的矩形区域加上马赛克. deep为模糊程度,数字越大越模糊. 描边:void imagetextouter ( resource image, int size,

  • 用javascript实现图片马赛克后显示并切换

    <script language="JavaScript1.1"> var slidespeed=3000 //specify images var slideimages=new Array("http://www.blueidea.com/articleimg/upload/2006/3/5/2482150_1_7.jpg","http://www.blueidea.com/articleimg/upload/2006/3/5/248215

  • C语言实现对bmp格式图片打码

    相信大家看到上面的标题一定觉的是上面高大上的技术,其实很简单. 前提准备:一张bmp格式的图片,如果没有的话,可以用Windows的画图软件来才裁剪.设置像素大小为(1024,768): 程序原理:将图片读入数组,然后给数组的指定位置存入随机数,最后再写入文件,这样图片就相应的位置就被置为乱码了. 源代码: <span style="font-size:14px;">#include<stdio.h> #include<stdlib.h> #incl

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

    其中的一个效果:  html代码: 复制代码 代码如下: <h1>单击图片,产生效果</h1> <div class="box"></div> 插件代码: 复制代码 代码如下: ; (function ($) { var defaults = { ani: 4, //动画效果.1.马赛克向中间聚拢,2.马赛克左上角聚拢,3.马赛克拉扯消失,4.原地缩小 delay: 3000, //动画执行时间 url:"0",//图

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

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

  • 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实现的一个图片延迟加载插件(含图片延迟加载原理)

    图片延迟加载也称懒加载,通常应用于图片比较多的网页,如果一个页面图片比较多,且页面高度或宽度有好几屏,页面初次加载时,只显示可视区域的图片,当页面滚动的时候,图片进入了可视区域再进行加载,这样可以显著的提高页面的加载速度,更少的图片并发请求数也可以减轻服务器的压力.如果用户仅仅在首屏停留,还可以节省流量.如果TAB中的图片较多,也同样可以应用于TAB中,当触发TAB时再进行图片的加载. 图片延迟加载的原理比较简单,先将图片的真实地址缓存在一个自定义的属性(lazy-src)中,而src地址使用一

  • 基于Jquery实现的一个图片滚动切换

    首先还是要引用jquery框架的. 然后开始HTML代码: 复制代码 代码如下: <div id="New_zlMimgMv"> <div class="imgMvBox"> <ul id="imgMvCon"> <li><a href="#" title=""><img src="New_zlimgMv.jpg" alt

  • 自己使用js/jquery写的一个定制对话框控件

    最近在做一个游戏项目,项目里面很多需要用到对话框,而且得用上美工做的图片,这样的话好像就不好去找一些现成的对话框控件了,于是便琢磨着自己做一个通用的控件,虽然不是绝对通用啦,但在我这个项目里还是可以随意调用的,思想的话也可以借鉴到别的项目中. 先贴出主要代码: 复制代码 代码如下: //对话框的基本html内容,绝对定位,高宽设置,背景图片,标题,两个按钮图 var tdlz_dialog_content = "<div id='tdlz_dialog" + "' st

  • 用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; height:350px; background:gray; margin-left: aut

  • 基于jquery创建的一个图片、视频缓冲的效果样式插件

    复制代码 代码如下: (function($) { $.fn.scrollWait = function(options) { var ops = $.extend({}, $.fn.scrollWait.defaults, options); var opts = $.meta ? $.extend({}, ops, $(this).data()) : ops; /** * 显示位置 */ var win = $(window); var winheight = win.height(); v

  • 自己使用jquery写的一个无缝滚动的插件

    效果图: html代码: 复制代码 代码如下: <h1>无缝滚动,向右滚动</h1> <ul id="guoul1"> <li><img src="img/f1.jpg" alt="f1"/></li> <li><img src="img/f2.jpg" alt="f2"/></li> <li&

随机推荐