http://codepen.io/anon/pen/Mwjjgx
我在问题的标题中看到了一项艰巨的任务。
我正在做一个插件，让单词在屏幕上移动（我正在使用jqfloat.js），使用锐化效果增加大小，并使用模糊效果减小大小。
我已经搜索了很多，但我没有找到这样的东西，所以我正在构建一个。
正如你所看到的in the CodePen，我可以让它们移动并变得模糊，我现在很难完成剩下的工作。
我应该如何处理这项任务？有没有一个插件可以帮我解决这个问题？
在CodePen中...... 1-145行是jqFloat插件，其余的是我的代码。
/*
* jqFloat.js - jQuery plugin
* A Floating Effect with jQuery!
*
* Name: jqFloat.js
* Author: Kenny Ooi - http://www.inwebson.com
* Date: December 6, 2012
* Version: 1.1
* Example: http://www.inwebson.com/demo/jqfloat/
*
*/
(function($) {
//plugin methods
var methods = {
init: function(options) { //object initialize
//console.log('init');
return this.each(function() {
//define element data
$(this).data('jSetting', $.extend({}, $.fn.jqFloat.defaults, options));
$(this).data('jDefined', true);
//create wrapper
var wrapper = $('<div/>').css({
'width': $(this).outerWidth(true),
'height': $(this).outerHeight(true),
'z-index': $(this).css('zIndex')
});
//alert($(this).position().top);
if ($(this).css('position') == 'absolute')
wrapper.css({
'position': 'absolute',
'top': $(this).position().top,
'left': $(this).position().left
});
else
wrapper.css({
'float': $(this).css('float'),
'position': 'relative'
});
//check for margin auto solution
if (($(this).css('marginLeft') == '0px' || $(this).css('marginLeft') == 'auto') && $(this).position().left > 0 && $(this).css('position') != 'absolute') {
wrapper.css({
'marginLeft': $(this).position().left
});
}
$(this).wrap(wrapper).css({
'position': 'absolute',
'top': 0,
'left': 0
});
//call play method
//methods.play.apply($(this));
});
},
update: function(options) {
$(this).data('jSetting', $.extend({}, $.fn.jqFloat.defaults, options));
},
play: function() { //start floating
if (!$(this).data('jFloating')) {
//console.log('play');
$(this).data('jFloating', true);
//floating(this);
}
floating(this);
},
stop: function() { //stop floating
//console.log('stop');
this.data('jFloating', false);
}
}
//private methods
var floating = function(obj) {
//generate random position
var setting = $(obj).data('jSetting');
var newX = Math.floor(Math.random() * setting.width) - setting.width / 2;
var newY = Math.floor(Math.random() * setting.height) - setting.height / 2 - setting.minHeight;
var spd = Math.floor(Math.random() * setting.speed) + setting.speed / 2;
//inifnity loop XD
$(obj).stop().animate({
'top': newY,
'left': newX
}, spd, function() {
if ($(this).data('jFloating'))
floating(this);
else
$(this).animate({
'top': 0,
'left': 0
}, spd / 2);
});
}
$.fn.jqFloat = function(method, options) {
var element = $(this);
if (methods[method]) {
if (element.data('jDefined')) {
//reset settings
if (options && typeof options === 'object')
methods.update.apply(this, Array.prototype.slice.call(arguments, 1));
} else
methods.init.apply(this, Array.prototype.slice.call(arguments, 1));
methods[method].apply(this);
} else if (typeof method === 'object' || !method) {
if (element.data('jDefined')) {
if (method)
methods.update.apply(this, arguments);
} else
methods.init.apply(this, arguments);
methods.play.apply(this);
} else
$.error('Method ' + method + ' does not exist!');
return this;
}
$.fn.jqFloat.defaults = {
width: 100,
height: 100,
speed: 1000,
minHeight: 0
}
})(jQuery);
+ function($) {
'use strict';
var Animate = function(element) {
this.element = element;
this.topPosition = element.data('position')[0];
this.leftPosition = element.data('position')[1];
this.fontSize = element.data('size') + 'px' || '20px';
this.shadow = element.data('shadow') || false;
this.setPosition();
this.setSize();
this.startFloat();
this.startPulsete();
};
Animate.prototype.setSize = function() {
this.element.css('fontSize', this.fontSize);
};
Animate.prototype.setPosition = function() {
this.element.css('top', this.topPosition);
this.element.css('left', this.leftPosition);
};
Animate.prototype.setBeyond = function() {
this.element.css('z-index', '99999')
};
Animate.prototype.startFloat = function() {
this.element.jqFloat({
width: 50,
height: 50,
speed: 5000
});
};
Animate.prototype.startPulsete = function() {
this.element.css('color', 'transparent');
this.element.css('textShadow', '0 0 5px rgba(255, 255, 255, 0.9)');
};
$(window).on('load', function() {
$('[data-ride="animate"]').each(function() {
var element = $(this);
var animation = new Animate(element);
});
});
}(jQuery);body {
background: black;
}
ul {
list-style: none;
}
li {
position: absolute;
color: white;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<ul>
<li data-ride="animate" data-size="40" data-position="[50, 50]">ONE</li>
<li data-ride="animate" data-size="25" data-position="[250, 580]">TWO</li>
<li data-ride="animate" data-size="75" data-position="[150, 800]">Three</li>
<li data-ride="animate" data-size="20" data-position="[50, 235]">Four</li>
</ul>
答案 0 :(得分：1)
您已经有浮动部件工作了。所以这一切都归结为改变模糊或textShadow属性。首先，准备一个数组来保存不同的模糊半径值，如
var blurRadiusA = ['0px','5px','10px','15px','20px' ];
然后，在私有floating函数的末尾，有
var randomIndex = Math.floor(Math.random()*blurRadiusA.length);
$(obj).css('textShadow', '0 0 '+blurRadiusA[randomIndex]+' rgba(255, 255, 255, 0.9)');
请注意，这会随机改变“模糊”状态。每animate个间隔。如果你希望在模糊之间平滑过渡，那就是另一个故事。
http://codepen.io/anon/pen/LVRRVZ
<强>更新
对于平滑过渡，应采取稍微不同的方法。添加新的私有方法
var pulsating = function(obj, radius, direction, currentInterval) {
//direction is simply to either increment/decrement
radius += direction;
if(radius == 20){
direction = -1;
}
else if(radius == 0){
direction = 1;
}
$(obj).css({
'textShadow': '0 0 '+radius+'px rgba(255, 255, 255, 0.9)'
});
if(typeof currentInterval !== 'undefined'){
clearInterval(currentInterval);
}
currentInterval = setInterval(function() {
pulsating(obj, radius, direction, currentInterval);
}, 250);
}
这基本上以过渡（非随机）方式更新每个区间的元素textShadow。