自己用jQuery写了一个图片的马赛克消失效果
2014-05-04 00:00
686 查看
其中的一个效果:
html代码:
插件代码:
css代码:
插件的调用:
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" //图片路径 }); });
相关文章推荐
- jquery实现的鼠标拖动排序Li或Table
- 用jquery.sortElements实现table排序
- jquery操作select(取值,设置选中)
- jquery 获取服务器json 数据笔记
- jquery combox与combobox使用
- jquery mobile学习笔记——网格布局
- jquery mobile 学习笔记——listview
- js实现table排序(jQuery下的jquery.sortElements)
- jquery改变元素属性值
- DOM与JQuery选择器、过滤器的介绍
- 响应式 jQuery Slider 插件: bxSlider
- jQuery 参考手册 - 选择器
- jQuery 选择器
- 初学JQuery笔记
- 打造简易可扩展的jQuery/CSS3 Tab菜单
- HTML中this与JQuery中$(this)的区别
- jQuery daily & memo -- select([[data],fn])
- 最实用、最常用的jQuery代码片段
- jquery easyui1.3.5使用window或dialog窗体时显示错位
- jquery操作select小结