html如何让字体变形,jquery实现字体变形特效-css字体变成圆形
1.[代码][JavaScript]代码
$.fn.circleType = function(options) {
var 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),
ch = parseInt($(elem).css('line-height'), 10),
fs = parseInt($(elem).css('font-size'), 10),
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();
};
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();
}
});
};
html如何让字体变形,jquery实现字体变形特效-css字体变成圆形相关推荐
- css设置字体大小会受分辨影响吗,CSS字体大小设置时的参考(转)
font-size 设置的绝对关键字: 以下几个绝对字体大小的设置是有效的.当然他们是浏览器预定义设置的.给元素指定了绝对关键字font-size的时候,该元素就不会继承父元素的字体大小 font-s ...
- html字体变色特效,css字体特效,渐变颜色+动画效果
css属性中有一个background-clip,用于设置绘图的背景,它的值可以是content-box,padding-box,border-box,text,其中text就是把颜色绘制到文字上,还 ...
- html 字体形状,二十款漂亮的CSS字体样式
样式一:body { margin: 0; padding: 0; line-height: 1.5em; font-family: 'Times New Roman', Times, serif; ...
- linux设置echo字体大小,Linux 用echo输出带特效的字体
echo显示带颜色,需要使用参数-e 格式如下: echo -e "\033[字背景颜色;文字颜色m字符串\033[0m" 例如:echo -e "\033[43;31m ...
- CSS教程--CSS字体
CSS 字体系列 在 CSS 中,有两种不同类型的字体系列名称: 通用字体系列 - 拥有相似外观的字体系统组合(比如 "Serif" 或 "Monospace" ...
- 从零开始学前端:CSS字体属性和文本属性 --- 今天你学习了吗?(CSS:Day08)
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:CSS引入 - 今天你学习了吗?(CSS:Day07) 文章目录 从零开始学前端:程序猿小白也可以完全掌握 ...
- css字体倾斜角度_css怎么设置倾斜的字体样式?(代码详解)
css怎么设置倾斜的字体样式?本篇文章就给大家介绍用css设置倾斜字体样式的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 首先我们要知道在css中设置对象内字体倾斜常常是使用 ...
- 如何实现CSS字体渐变和字体颜色随时间来回变动
前言:CSS代表层叠样式表(Cascading Style Sheets),是一种用于定义网页外观和样式的语言.通过CSS,网页开发人员可以指定如何呈现HTML元素,包括颜色.字体.大小.布局和其他视 ...
- html 在线排版控件,10个超级有用的HTML字体排版jQuery插件推荐
从来没有人说过,网页排版是容易的,但是近些年来我们采用了网页字体后,排版工作变得容易得多,在这篇文章中您将看到,10个超级有用的HTML字体排版jQuery插件,这将有利于你在网页中设计和创造流畅的文 ...
- css 字体样式设置
css字体样式(Font Style),属性 时间:2014-05-08 21:49 来源:我爱学习网 | 作者:我爱学习网 | 本文已影响 68353 人 css字体样式(Font Style)是网 ...
最新文章
- 使用HttpWebRequest提交ASP.NET表单并保持Session和Cookie
- 计算字符在字符串是出现的次数
- matlab相机标定_【显微视界】基于视觉伺服的工业机器人系统研究(摄像机标定、手眼标定、目标单目定位)...
- python函数进阶小结_python之函数进阶
- 解决兼容低版本浏览的痛:IE中的CSS3不完全兼容方案
- 2018数学建模国赛A题《高温作业专用服装设计》优秀论文(本文由西南民族大学白白不加糖、薄荷CC糖原创)
- 在linux系统中使用shc指令,Linux编译安装SHC加密组件
- Python实现自动通关别踩白块儿
- php有个schost.exe_svchost.exe是什么
- 获两个千亿IPO投资人王刚:要逼自己在质上进取,不是在量上贪婪
- web开发网页嵌入flash
- 【机器学习基础】EM算法
- 使用python画k均值分类图
- Geekban极客班 第三周
- phd计算机考试,21校计算机Phd详细申请经验
- 【C语言】把一个结构体指针转换为另一个结构体指针
- UNP编程:31---名字与地址转换之(服务解析函数:getservbyname()、getservbyport()、struct servent)
- 机器学习17:用Keras实现图片数据增广的方法和实践
- 操作系统学习总结(上)
- MATLAB搭建LINGO环境并调用LINDO API求解线性规划等问题
热门文章
- cba篮球暂停次数和时间_NBA和CBA篮球规则的主要不同
- 密码算法测试向量——Cipher MAC SM4
- 【系统化学习】CSDN算法技能树测评
- C#中Action和=>用法(入门)
- linux perl 升级,科学网—一次Perl版本升级引发的吐槽大会 - 黄健的博文
- 光伏电站运维常见故障及处理汇总
- python生成中文字符画_python制作字符画
- 词法语法分析器EDG C++
- 【LTE学习日记01】子载波功率与信道功率的换算
- 【超超超easy】5分钟:自制酷炫猫咪词云图,会点鼠标即可。