使用按钮弯曲文本 jquery
curving text using button jquery
我想知道我如何使用 http://circletype.labwire.ca/#fitText 制作更多设计我成功制作了一个，但仅此而已，它只是一个圆圈我无法制作更多设计我的代码有问题可以有人请帮忙吗？还有我如何制作楔形文本和 "wiggle" 文本最后一件事我还想知道如何制作螺旋文本如果有人知道其中任何一个，那将是一个很大的帮助
$("#fs").change(function() {
//alert($(this).val());
$('.changeMe').css("font-family", $(this).val());
});
$("#size").change(function() {
$('.changeMe').css("font-size", $(this).val() + "px");
});
$("#demo1").click(function(){
$('.changeMe').circleType("fitText:true", $(this).attr('radius: 180'));
});
/**
* Arctext.js
* A jQuery plugin for curved text
* http://www.codrops.com
*
* Copyright 2011, Pedro Botelho / Codrops
* Free to use under the MIT license.
*
* Date: Mon Jan 23 2012
*/
(function( $, undefined ) {
/*!
* FitText.js 1.0
*
* Copyright 2011, Dave Rupert http://daverupert.com
* Released under the WTFPL license
* http://sam.zoy.org/wtfpl/
*
* Date: Thu May 05 14:23:00 2011 -0600
*/
$.fn.fitText = function( kompressor, options ) {
var settings = {
'minFontSize' : Number.NEGATIVE_INFINITY,
'maxFontSize' : Number.POSITIVE_INFINITY
};
return this.each(function() {
var $this = $(this); // store the object
var compressor = kompressor || 1; // set the compressor
if ( options ) {
$.extend( settings, options );
}
// Resizer() resizes items based on the object width divided by the compressor * 10
var resizer = function () {
$this.css('font-size', Math.max(Math.min($this.width() / (compressor*10), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize)));
};
// Call once to set.
resizer();
// Call on resize. Opera debounces their resize by default.
$(window).resize(resizer);
});
};
/*
* Lettering plugin
*
* changed injector function:
* add for empty chars.
*/
function injector(t, splitter, klass, after) {
var a = t.text().split(splitter), inject = '', emptyclass;
if (a.length) {
$(a).each(function(i, item) {
emptyclass = '';
if(item === ' ') {
emptyclass = ' empty';
item=' ';
}
inject += '<span class="'+klass+(i+1)+emptyclass+'">'+item+'</span>'+after;
});
t.empty().append(inject);
}
}
var methods = {
init : function() {
return this.each(function() {
injector($(this), '', 'char', '');
});
},
words : function() {
return this.each(function() {
injector($(this), ' ', 'word', ' ');
});
},
lines : function() {
return this.each(function() {
var r = "eefec303079ad17405c889e092e105b0";
// Because it's hard to split a <br/> tag consistently across browsers,
// (*ahem* IE *ahem*), we replaces all <br/> instances with an md5 hash
// (of the word "split"). If you're trying to use this plugin on that
// md5 hash string, it will fail because you're being ridiculous.
injector($(this).children("br").replaceWith(r).end(), r, 'line', '');
});
}
};
$.fn.lettering = function( method ) {
// Method calling logic
if ( method && methods[method] ) {
return methods[ method ].apply( this, [].slice.call( arguments, 1 ));
} else if ( method === 'letters' || ! method ) {
return methods.init.apply( this, [].slice.call( arguments, 0 ) ); // always pass an array
}
$.error( 'Method ' + method + ' does not exist on jQuery.lettering' );
return this;
};
/*
* Arctext object.
*/
$.Arctext = function( options, element ) {
this.$el = $( element );
this._init( options );
};
$.Arctext.defaults = {
radius : 0, // the minimum value allowed is half of the word length. if set to -1, the word will be straight.
dir : 1, // 1: curve is down, -1: curve is up.
rotate : true, // if true each letter will be rotated.
fitText : false // if you wanna try out the fitText plugin (http://fittextjs.com/) set this to true. Don't forget the wrapper should be fluid.
};
$.Arctext.prototype = {
_init : function( options ) {
this.options = $.extend( true, {}, $.Arctext.defaults, options );
// apply the lettering plugin.
this._applyLettering();
this.$el.data( 'arctext', true );
// calculate values
this._calc();
// apply transformation.
this._rotateWord();
// load the events
this._loadEvents();
},
_applyLettering : function() {
this.$el.lettering();
if( this.options.fitText )
this.$el.fitText();
this.$letters = this.$el.find('span').css('display', 'inline-block');
},
_calc : function() {
if( this.options.radius === -1 )
return false;
// calculate word / arc sizes & distances.
this._calcBase();
// get final values for each letter.
this._calcLetters();
},
_calcBase : function() {
// total word width (sum of letters widths)
this.dtWord = 0;
var _self = this;
this.$letters.each( function(i) {
var $letter = $(this),
letterWidth = $letter.outerWidth( true );
_self.dtWord += letterWidth;
// save the center point of each letter:
$letter.data( 'center', _self.dtWord - letterWidth / 2 );
});
// the middle point of the word.
var centerWord = this.dtWord / 2;
// check radius : the minimum value allowed is half of the word length.
if( this.options.radius < centerWord )
this.options.radius = centerWord;
// total arc segment length, where the letters will be placed.
this.dtArcBase = this.dtWord;
// calculate the arc (length) that goes from the beginning of the first letter (x=0) to the end of the last letter (x=this.dtWord).
// first lets calculate the angle for the triangle with base = this.dtArcBase and the other two sides = radius.
var angle = 2 * Math.asin( this.dtArcBase / ( 2 * this.options.radius ) );
// given the formula: L(ength) = R(adius) x A(ngle), we calculate our arc length.
this.dtArc = this.options.radius * angle;
},
_calcLetters : function() {
var _self = this,
iteratorX = 0;
this.$letters.each( function(i) {
var $letter = $(this),
// calculate each letter's semi arc given the percentage of each letter on the original word.
dtArcLetter = ( $letter.outerWidth( true ) / _self.dtWord ) * _self.dtArc,
// angle for the dtArcLetter given our radius.
beta = dtArcLetter / _self.options.radius,
// distance from the middle point of the semi arc's chord to the center of the circle.
// this is going to be the place where the letter will be positioned.
h = _self.options.radius * ( Math.cos( beta / 2 ) ),
// angle formed by the x-axis and the left most point of the chord.
alpha = Math.acos( ( _self.dtWord / 2 - iteratorX ) / _self.options.radius ),
// angle formed by the x-axis and the right most point of the chord.
theta = alpha + beta / 2,
// distances of the sides of the triangle formed by h and the orthogonal to the x-axis.
x = Math.cos( theta ) * h,
y = Math.sin( theta ) * h,
// the value for the coordinate x of the middle point of the chord.
xpos = iteratorX + Math.abs( _self.dtWord / 2 - x - iteratorX ),
// finally, calculate how much to translate each letter, given its center point.
// also calculate the angle to rotate the letter accordingly.
xval = 0| xpos - $letter.data( 'center' ),
yval = 0| _self.options.radius - y,
angle = ( _self.options.rotate ) ? 0| -Math.asin( x / _self.options.radius ) * ( 180 / Math.PI ) : 0;
// the iteratorX will be positioned on the second point of each semi arc
iteratorX = 2 * xpos - iteratorX;
// save these values
$letter.data({
x : xval,
y : ( _self.options.dir === 1 ) ? yval : -yval,
a : ( _self.options.dir === 1 ) ? angle : -angle
});
});
},
_rotateWord : function( animation ) {
if( !this.$el.data('arctext') ) return false;
var _self = this;
this.$letters.each( function(i) {
var $letter = $(this),
transformation = ( _self.options.radius === -1 ) ? 'none' : 'translateX(' + $letter.data('x') + 'px) translateY(' + $letter.data('y') + 'px) rotate(' + $letter.data('a') + 'deg)',
transition = ( animation ) ? 'all ' + ( animation.speed || 0 ) + 'ms ' + ( animation.easing || 'linear' ) : 'none';
$letter.css({
'-webkit-transition' : transition,
'-moz-transition' : transition,
'-o-transition' : transition,
'-ms-transition' : transition,
'transition' : transition
})
.css({
'-webkit-transform' : transformation,
'-moz-transform' : transformation,
'-o-transform' : transformation,
'-ms-transform' : transformation,
'transform' : transformation
});
});
},
_loadEvents : function() {
if( this.options.fitText ) {
var _self = this;
$(window).on( 'resize.arctext', function() {
_self._calc();
// apply transformation.
_self._rotateWord();
});
}
},
set : function( opts ) {
if( !opts.radius &&
!opts.dir &&
opts.rotate === 'undefined' ) {
return false;
}
this.options.radius = opts.radius || this.options.radius;
this.options.dir = opts.dir || this.options.dir;
if( opts.rotate !== undefined ) {
this.options.rotate = opts.rotate;
}
this._calc();
this._rotateWord( opts.animation );
},
destroy : function() {
this.options.radius = -1;
this._rotateWord();
this.$letters.removeData('x y a center');
this.$el.removeData('arctext');
$(window).off('.arctext');
}
};
var logError = function( message ) {
if ( this.console ) {
console.error( message );
}
};
$.fn.arctext = function( options ) {
if ( typeof options === 'string' ) {
var args = Array.prototype.slice.call( arguments, 1 );
this.each(function() {
var instance = $.data( this, 'arctext' );
if ( !instance ) {
logError( "cannot call methods on arctext prior to initialization; " +
"attempted to call method '" + options + "'" );
return;
}
if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) {
logError( "no such method '" + options + "' for arctext instance" );
return;
}
instance[ options ].apply( instance, args );
});
}
else {
this.each(function() {
var instance = $.data( this, 'arctext' );
if ( !instance ) {
$.data( this, 'arctext', new $.Arctext( options, this ) );
}
});
}
return this;
};
})( jQuery );
/*
* CircleType 0.36
* Peter Hrynkow
* Copyright 2014, Licensed GPL & MIT
*
*/
$.fn.circleType = function(options) {
var self = this,
settings = {
dir: 1,
position: 'relative',
};
if (typeof($.fn.lettering) !== 'function') {
console.log('Lettering.js is required');
return;
}
return this.each(function () {
if (options) {
$.extend(settings, options);
}
var elem = this,
delta = (180 / Math.PI),
fs = parseInt($(elem).css('font-size'), 10),
ch = parseInt($(elem).css('line-height'), 10) || fs,
txt = elem.innerHTML.replace(/^\s+|\s+$/g, '').replace(/\s/g, ' '),
letters,
center;
elem.innerHTML = txt
$(elem).lettering();
elem.style.position = settings.position;
letters = elem.getElementsByTagName('span');
center = Math.floor(letters.length / 2)
var layout = function () {
var tw = 0,
i,
offset = 0,
minRadius,
origin,
innerRadius,
l, style, r, transform;
for (i = 0; i < letters.length; i++) {
tw += letters[i].offsetWidth;
}
minRadius = (tw / Math.PI) / 2 + ch;
if (settings.fluid && !settings.fitText) {
settings.radius = Math.max(elem.offsetWidth / 2, minRadius);
}
else if (!settings.radius) {
settings.radius = minRadius;
}
if (settings.dir === -1) {
origin = 'center ' + (-settings.radius + ch) / fs + 'em';
} else {
origin = 'center ' + settings.radius / fs + 'em';
}
innerRadius = settings.radius - ch;
for (i = 0; i < letters.length; i++) {
l = letters[i];
offset += l.offsetWidth / 2 / innerRadius * delta;
l.rot = offset;
offset += l.offsetWidth / 2 / innerRadius * delta;
}
for (i = 0; i < letters.length; i++) {
l = letters[i]
style = l.style
r = (-offset * settings.dir / 2) + l.rot * settings.dir
transform = 'rotate(' + r + 'deg)';
style.position = 'absolute';
style.left = '50%';
style.marginLeft = -(l.offsetWidth / 2) / fs + 'em';
style.webkitTransform = transform;
style.MozTransform = transform;
style.OTransform = transform;
style.msTransform = transform;
style.transform = transform;
style.webkitTransformOrigin = origin;
style.MozTransformOrigin = origin;
style.OTransformOrigin = origin;
style.msTransformOrigin = origin;
style.transformOrigin = origin;
if(settings.dir === -1) {
style.bottom = 0;
}
}
if (settings.fitText) {
if (typeof($.fn.fitText) !== 'function') {
console.log('FitText.js is required when using the fitText option');
} else {
$(elem).fitText();
$(window).resize(function () {
updateHeight();
});
}
}
updateHeight();
if (typeof settings.callback === 'function') {
// Execute our callback with the element we transformed as `this`
settings.callback.apply(elem);
}
};
var getBounds = function (elem) {
var docElem = document.documentElement,
box = elem.getBoundingClientRect();
return {
top: box.top + window.pageYOffset - docElem.clientTop,
left: box.left + window.pageXOffset - docElem.clientLeft,
height: box.height
};
};
var updateHeight = function () {
var mid = getBounds(letters[center]),
first = getBounds(letters[0]),
h;
if (mid.top < first.top) {
h = first.top - mid.top + first.height;
} else {
h = mid.top - first.top + first.height;
}
elem.style.height = h + 'px';
}
if (settings.fluid && !settings.fitText) {
$(window).resize(function () {
layout();
});
}
if (document.readyState !== "complete") {
elem.style.visibility = 'hidden';
$(window).load(function () {
elem.style.visibility = 'visible';
layout();
});
} else {
layout();
}
});
};
<form id="myform">
<select id="fs">
<option value="Arial">Arial</option>
<option value="Verdana ">Verdana </option>
<option value="Impact ">Impact </option>
<option value="Comic Sans MS">Comic Sans MS</option>
</select>
<select id="size">
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="14">14</option>
<option value="16">16</option>
<option value="18">18</option>
<option value="20">20</option>
<option value="22">22</option>
<option value="24">24</option>
<option value="26">26</option>
<option value="28">28</option>
<option value="30">30</option>
<option value="32">32</option>
<option value="34">34</option>
<option value="36">36</option>
</select>
<div id="demo1">Here is some text I would like to see in a different shape.</div>
</form>
<br/>
<div id="container" class="changeMe">
Hello World 1234567890<div id="float">
</div>
</div>
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script><link rel="stylesheet"
href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet"
href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://circletype.labwire.ca/js/circletype.js"></script>
<script src="https://tympanus.net/Development/Arctext/js/jquery.arctext.js"></script>
我猜你的问题出在这段代码上：
$("#demo1").click(function(){
$('.changeMe').circleType("fitText:true", $(this).attr('radius: 180'));
});
您没有合适的 div 匹配此代码。我会在一分钟内回到这个，但首先你应该知道通常不会直接进入和编辑库。我的建议是您在自己单独的 <script> 标签内使用您的代码。
所以也许在您完成加载库之后：
<script>
$("#fs").change(function() {
//alert($(this).val());
$('.changeMe').css("font-family", $(this).val());
});
$("#size").change(function() {
$('.changeMe').css("font-size", $(this).val() + "px");
});
$("#demo1").click(function(){
$('.changeMe').circleType("fitText:true", $(this).attr('radius: 180'));
});
</script>
然后你只需要修改你的HTML，这样你就有一个demo1 div，它不是一个按钮：
<div id="demo1">Here is some text I would like to see in a different shape.</div>
此代码可能喜欢 运行 反对常规的旧 HTML 文本而不是按钮。
希望对您有所帮助！
更新： 我去掉了你的冗余库并简化了你的代码。当放置在 HTML 文档中的 <body> 标签之间时，此示例应该有效。单击每一行以查看其运行情况。我还将您的样式表移到了它们所属的文档 <head> 标记中。
<div id="demo1">Here is some text I would like to see in a different shape.</div>
<div id="demo2">Here is some text I would like to see in a different shape.</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="http://circletype.labwire.ca/js/circletype.js"></script>
<script src="http://tympanus.net/Development/Arctext/js/jquery.arctext.js"></script>
<script>
$("#demo1").click(function(){
$('#demo1').circleType({radius:384});
});
$("#demo2").click(function(){
$('#demo2').circleType({radius:384, dir:-1});
});
</script>
我想知道我如何使用 http://circletype.labwire.ca/#fitText 制作更多设计我成功制作了一个，但仅此而已，它只是一个圆圈我无法制作更多设计我的代码有问题可以有人请帮忙吗？还有我如何制作楔形文本和 "wiggle" 文本最后一件事我还想知道如何制作螺旋文本如果有人知道其中任何一个，那将是一个很大的帮助
$("#fs").change(function() {
//alert($(this).val());
$('.changeMe').css("font-family", $(this).val());
});
$("#size").change(function() {
$('.changeMe').css("font-size", $(this).val() + "px");
});
$("#demo1").click(function(){
$('.changeMe').circleType("fitText:true", $(this).attr('radius: 180'));
});
/**
* Arctext.js
* A jQuery plugin for curved text
* http://www.codrops.com
*
* Copyright 2011, Pedro Botelho / Codrops
* Free to use under the MIT license.
*
* Date: Mon Jan 23 2012
*/
(function( $, undefined ) {
/*!
* FitText.js 1.0
*
* Copyright 2011, Dave Rupert http://daverupert.com
* Released under the WTFPL license
* http://sam.zoy.org/wtfpl/
*
* Date: Thu May 05 14:23:00 2011 -0600
*/
$.fn.fitText = function( kompressor, options ) {
var settings = {
'minFontSize' : Number.NEGATIVE_INFINITY,
'maxFontSize' : Number.POSITIVE_INFINITY
};
return this.each(function() {
var $this = $(this); // store the object
var compressor = kompressor || 1; // set the compressor
if ( options ) {
$.extend( settings, options );
}
// Resizer() resizes items based on the object width divided by the compressor * 10
var resizer = function () {
$this.css('font-size', Math.max(Math.min($this.width() / (compressor*10), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize)));
};
// Call once to set.
resizer();
// Call on resize. Opera debounces their resize by default.
$(window).resize(resizer);
});
};
/*
* Lettering plugin
*
* changed injector function:
* add for empty chars.
*/
function injector(t, splitter, klass, after) {
var a = t.text().split(splitter), inject = '', emptyclass;
if (a.length) {
$(a).each(function(i, item) {
emptyclass = '';
if(item === ' ') {
emptyclass = ' empty';
item=' ';
}
inject += '<span class="'+klass+(i+1)+emptyclass+'">'+item+'</span>'+after;
});
t.empty().append(inject);
}
}
var methods = {
init : function() {
return this.each(function() {
injector($(this), '', 'char', '');
});
},
words : function() {
return this.each(function() {
injector($(this), ' ', 'word', ' ');
});
},
lines : function() {
return this.each(function() {
var r = "eefec303079ad17405c889e092e105b0";
// Because it's hard to split a <br/> tag consistently across browsers,
// (*ahem* IE *ahem*), we replaces all <br/> instances with an md5 hash
// (of the word "split"). If you're trying to use this plugin on that
// md5 hash string, it will fail because you're being ridiculous.
injector($(this).children("br").replaceWith(r).end(), r, 'line', '');
});
}
};
$.fn.lettering = function( method ) {
// Method calling logic
if ( method && methods[method] ) {
return methods[ method ].apply( this, [].slice.call( arguments, 1 ));
} else if ( method === 'letters' || ! method ) {
return methods.init.apply( this, [].slice.call( arguments, 0 ) ); // always pass an array
}
$.error( 'Method ' + method + ' does not exist on jQuery.lettering' );
return this;
};
/*
* Arctext object.
*/
$.Arctext = function( options, element ) {
this.$el = $( element );
this._init( options );
};
$.Arctext.defaults = {
radius : 0, // the minimum value allowed is half of the word length. if set to -1, the word will be straight.
dir : 1, // 1: curve is down, -1: curve is up.
rotate : true, // if true each letter will be rotated.
fitText : false // if you wanna try out the fitText plugin (http://fittextjs.com/) set this to true. Don't forget the wrapper should be fluid.
};
$.Arctext.prototype = {
_init : function( options ) {
this.options = $.extend( true, {}, $.Arctext.defaults, options );
// apply the lettering plugin.
this._applyLettering();
this.$el.data( 'arctext', true );
// calculate values
this._calc();
// apply transformation.
this._rotateWord();
// load the events
this._loadEvents();
},
_applyLettering : function() {
this.$el.lettering();
if( this.options.fitText )
this.$el.fitText();
this.$letters = this.$el.find('span').css('display', 'inline-block');
},
_calc : function() {
if( this.options.radius === -1 )
return false;
// calculate word / arc sizes & distances.
this._calcBase();
// get final values for each letter.
this._calcLetters();
},
_calcBase : function() {
// total word width (sum of letters widths)
this.dtWord = 0;
var _self = this;
this.$letters.each( function(i) {
var $letter = $(this),
letterWidth = $letter.outerWidth( true );
_self.dtWord += letterWidth;
// save the center point of each letter:
$letter.data( 'center', _self.dtWord - letterWidth / 2 );
});
// the middle point of the word.
var centerWord = this.dtWord / 2;
// check radius : the minimum value allowed is half of the word length.
if( this.options.radius < centerWord )
this.options.radius = centerWord;
// total arc segment length, where the letters will be placed.
this.dtArcBase = this.dtWord;
// calculate the arc (length) that goes from the beginning of the first letter (x=0) to the end of the last letter (x=this.dtWord).
// first lets calculate the angle for the triangle with base = this.dtArcBase and the other two sides = radius.
var angle = 2 * Math.asin( this.dtArcBase / ( 2 * this.options.radius ) );
// given the formula: L(ength) = R(adius) x A(ngle), we calculate our arc length.
this.dtArc = this.options.radius * angle;
},
_calcLetters : function() {
var _self = this,
iteratorX = 0;
this.$letters.each( function(i) {
var $letter = $(this),
// calculate each letter's semi arc given the percentage of each letter on the original word.
dtArcLetter = ( $letter.outerWidth( true ) / _self.dtWord ) * _self.dtArc,
// angle for the dtArcLetter given our radius.
beta = dtArcLetter / _self.options.radius,
// distance from the middle point of the semi arc's chord to the center of the circle.
// this is going to be the place where the letter will be positioned.
h = _self.options.radius * ( Math.cos( beta / 2 ) ),
// angle formed by the x-axis and the left most point of the chord.
alpha = Math.acos( ( _self.dtWord / 2 - iteratorX ) / _self.options.radius ),
// angle formed by the x-axis and the right most point of the chord.
theta = alpha + beta / 2,
// distances of the sides of the triangle formed by h and the orthogonal to the x-axis.
x = Math.cos( theta ) * h,
y = Math.sin( theta ) * h,
// the value for the coordinate x of the middle point of the chord.
xpos = iteratorX + Math.abs( _self.dtWord / 2 - x - iteratorX ),
// finally, calculate how much to translate each letter, given its center point.
// also calculate the angle to rotate the letter accordingly.
xval = 0| xpos - $letter.data( 'center' ),
yval = 0| _self.options.radius - y,
angle = ( _self.options.rotate ) ? 0| -Math.asin( x / _self.options.radius ) * ( 180 / Math.PI ) : 0;
// the iteratorX will be positioned on the second point of each semi arc
iteratorX = 2 * xpos - iteratorX;
// save these values
$letter.data({
x : xval,
y : ( _self.options.dir === 1 ) ? yval : -yval,
a : ( _self.options.dir === 1 ) ? angle : -angle
});
});
},
_rotateWord : function( animation ) {
if( !this.$el.data('arctext') ) return false;
var _self = this;
this.$letters.each( function(i) {
var $letter = $(this),
transformation = ( _self.options.radius === -1 ) ? 'none' : 'translateX(' + $letter.data('x') + 'px) translateY(' + $letter.data('y') + 'px) rotate(' + $letter.data('a') + 'deg)',
transition = ( animation ) ? 'all ' + ( animation.speed || 0 ) + 'ms ' + ( animation.easing || 'linear' ) : 'none';
$letter.css({
'-webkit-transition' : transition,
'-moz-transition' : transition,
'-o-transition' : transition,
'-ms-transition' : transition,
'transition' : transition
})
.css({
'-webkit-transform' : transformation,
'-moz-transform' : transformation,
'-o-transform' : transformation,
'-ms-transform' : transformation,
'transform' : transformation
});
});
},
_loadEvents : function() {
if( this.options.fitText ) {
var _self = this;
$(window).on( 'resize.arctext', function() {
_self._calc();
// apply transformation.
_self._rotateWord();
});
}
},
set : function( opts ) {
if( !opts.radius &&
!opts.dir &&
opts.rotate === 'undefined' ) {
return false;
}
this.options.radius = opts.radius || this.options.radius;
this.options.dir = opts.dir || this.options.dir;
if( opts.rotate !== undefined ) {
this.options.rotate = opts.rotate;
}
this._calc();
this._rotateWord( opts.animation );
},
destroy : function() {
this.options.radius = -1;
this._rotateWord();
this.$letters.removeData('x y a center');
this.$el.removeData('arctext');
$(window).off('.arctext');
}
};
var logError = function( message ) {
if ( this.console ) {
console.error( message );
}
};
$.fn.arctext = function( options ) {
if ( typeof options === 'string' ) {
var args = Array.prototype.slice.call( arguments, 1 );
this.each(function() {
var instance = $.data( this, 'arctext' );
if ( !instance ) {
logError( "cannot call methods on arctext prior to initialization; " +
"attempted to call method '" + options + "'" );
return;
}
if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) {
logError( "no such method '" + options + "' for arctext instance" );
return;
}
instance[ options ].apply( instance, args );
});
}
else {
this.each(function() {
var instance = $.data( this, 'arctext' );
if ( !instance ) {
$.data( this, 'arctext', new $.Arctext( options, this ) );
}
});
}
return this;
};
})( jQuery );
/*
* CircleType 0.36
* Peter Hrynkow
* Copyright 2014, Licensed GPL & MIT
*
*/
$.fn.circleType = function(options) {
var self = this,
settings = {
dir: 1,
position: 'relative',
};
if (typeof($.fn.lettering) !== 'function') {
console.log('Lettering.js is required');
return;
}
return this.each(function () {
if (options) {
$.extend(settings, options);
}
var elem = this,
delta = (180 / Math.PI),
fs = parseInt($(elem).css('font-size'), 10),
ch = parseInt($(elem).css('line-height'), 10) || fs,
txt = elem.innerHTML.replace(/^\s+|\s+$/g, '').replace(/\s/g, ' '),
letters,
center;
elem.innerHTML = txt
$(elem).lettering();
elem.style.position = settings.position;
letters = elem.getElementsByTagName('span');
center = Math.floor(letters.length / 2)
var layout = function () {
var tw = 0,
i,
offset = 0,
minRadius,
origin,
innerRadius,
l, style, r, transform;
for (i = 0; i < letters.length; i++) {
tw += letters[i].offsetWidth;
}
minRadius = (tw / Math.PI) / 2 + ch;
if (settings.fluid && !settings.fitText) {
settings.radius = Math.max(elem.offsetWidth / 2, minRadius);
}
else if (!settings.radius) {
settings.radius = minRadius;
}
if (settings.dir === -1) {
origin = 'center ' + (-settings.radius + ch) / fs + 'em';
} else {
origin = 'center ' + settings.radius / fs + 'em';
}
innerRadius = settings.radius - ch;
for (i = 0; i < letters.length; i++) {
l = letters[i];
offset += l.offsetWidth / 2 / innerRadius * delta;
l.rot = offset;
offset += l.offsetWidth / 2 / innerRadius * delta;
}
for (i = 0; i < letters.length; i++) {
l = letters[i]
style = l.style
r = (-offset * settings.dir / 2) + l.rot * settings.dir
transform = 'rotate(' + r + 'deg)';
style.position = 'absolute';
style.left = '50%';
style.marginLeft = -(l.offsetWidth / 2) / fs + 'em';
style.webkitTransform = transform;
style.MozTransform = transform;
style.OTransform = transform;
style.msTransform = transform;
style.transform = transform;
style.webkitTransformOrigin = origin;
style.MozTransformOrigin = origin;
style.OTransformOrigin = origin;
style.msTransformOrigin = origin;
style.transformOrigin = origin;
if(settings.dir === -1) {
style.bottom = 0;
}
}
if (settings.fitText) {
if (typeof($.fn.fitText) !== 'function') {
console.log('FitText.js is required when using the fitText option');
} else {
$(elem).fitText();
$(window).resize(function () {
updateHeight();
});
}
}
updateHeight();
if (typeof settings.callback === 'function') {
// Execute our callback with the element we transformed as `this`
settings.callback.apply(elem);
}
};
var getBounds = function (elem) {
var docElem = document.documentElement,
box = elem.getBoundingClientRect();
return {
top: box.top + window.pageYOffset - docElem.clientTop,
left: box.left + window.pageXOffset - docElem.clientLeft,
height: box.height
};
};
var updateHeight = function () {
var mid = getBounds(letters[center]),
first = getBounds(letters[0]),
h;
if (mid.top < first.top) {
h = first.top - mid.top + first.height;
} else {
h = mid.top - first.top + first.height;
}
elem.style.height = h + 'px';
}
if (settings.fluid && !settings.fitText) {
$(window).resize(function () {
layout();
});
}
if (document.readyState !== "complete") {
elem.style.visibility = 'hidden';
$(window).load(function () {
elem.style.visibility = 'visible';
layout();
});
} else {
layout();
}
});
};
<form id="myform">
<select id="fs">
<option value="Arial">Arial</option>
<option value="Verdana ">Verdana </option>
<option value="Impact ">Impact </option>
<option value="Comic Sans MS">Comic Sans MS</option>
</select>
<select id="size">
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="14">14</option>
<option value="16">16</option>
<option value="18">18</option>
<option value="20">20</option>
<option value="22">22</option>
<option value="24">24</option>
<option value="26">26</option>
<option value="28">28</option>
<option value="30">30</option>
<option value="32">32</option>
<option value="34">34</option>
<option value="36">36</option>
</select>
<div id="demo1">Here is some text I would like to see in a different shape.</div>
</form>
<br/>
<div id="container" class="changeMe">
Hello World 1234567890<div id="float">
</div>
</div>
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script><link rel="stylesheet"
href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet"
href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://circletype.labwire.ca/js/circletype.js"></script>
<script src="https://tympanus.net/Development/Arctext/js/jquery.arctext.js"></script>
我猜你的问题出在这段代码上：
$("#demo1").click(function(){
$('.changeMe').circleType("fitText:true", $(this).attr('radius: 180'));
});
您没有合适的 div 匹配此代码。我会在一分钟内回到这个，但首先你应该知道通常不会直接进入和编辑库。我的建议是您在自己单独的 <script> 标签内使用您的代码。
所以也许在您完成加载库之后：
<script>
$("#fs").change(function() {
//alert($(this).val());
$('.changeMe').css("font-family", $(this).val());
});
$("#size").change(function() {
$('.changeMe').css("font-size", $(this).val() + "px");
});
$("#demo1").click(function(){
$('.changeMe').circleType("fitText:true", $(this).attr('radius: 180'));
});
</script>
然后你只需要修改你的HTML，这样你就有一个demo1 div，它不是一个按钮：
<div id="demo1">Here is some text I would like to see in a different shape.</div>
此代码可能喜欢 运行 反对常规的旧 HTML 文本而不是按钮。
希望对您有所帮助！
更新： 我去掉了你的冗余库并简化了你的代码。当放置在 HTML 文档中的 <body> 标签之间时，此示例应该有效。单击每一行以查看其运行情况。我还将您的样式表移到了它们所属的文档 <head> 标记中。
<div id="demo1">Here is some text I would like to see in a different shape.</div>
<div id="demo2">Here is some text I would like to see in a different shape.</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="http://circletype.labwire.ca/js/circletype.js"></script>
<script src="http://tympanus.net/Development/Arctext/js/jquery.arctext.js"></script>
<script>
$("#demo1").click(function(){
$('#demo1').circleType({radius:384});
});
$("#demo2").click(function(){
$('#demo2').circleType({radius:384, dir:-1});
});
</script>