用于文本渐变的jQuery插件
用于文本渐变的jQuery插件
提问于 2012-05-03 07:32:05
我有一个嵌入字体的文本，它必须有垂直梯度，你能为它提供一个jQuery插件吗？我需要字体系列，大小和其他属性被保留，只有垂直梯度被添加。
我找到了一个( http://www.codefocus.ca/goodies/gradienttext )，但它覆盖了我所有的字体。
回答 4
Stack Overflow用户
发布于 2012-05-04 03:20:12
可以，停那儿吧
只需调用css()方法即可再次应用字体
首先，为什么不在一个现成的函数中同时编写两个代码呢？
其次，解决方案(可能是：)
jQuery(document).ready(function($){ // yup, I like to use it this way - safe
var test1Opts = {
colors: ['#FFF', '#EB9300'],
style: 'vertical',
shadow: true,
shadow_color: '#000000',
shadow_offset_x: 1,
shadow_offset_x: 1,
shadow_blur: 1
},
test2Opts = {
colors: [
'#FF0000',
'#FF6600',
'#CCFF00',
'#00FF00',
'#0066FF',
'#FF00FF'
],
style: 'horizontal'
}
$('#test1')
.gradienttext(test1Opts)
.css('font-family', 'YOUR CUSTOM FONT NAME')
// optionally you can call the following to apply font on all child items
// by uncommenting the 2 lines below
// .find('*')
// .css('font-family', 'YOUR CUSTOM FONT NAME');
// you can also use the short "font" syntax,
// if you have a lot of options in your font-face
$('#test2')
.gradienttext(test2Opts)
// .css('font', 'style weight size/line-height YOUR CUSTOM FONT NAME')
.css('font', 'normal bold 11px/16px YOUR CUSTOM FONT NAME')
.find('*')
.css('font-family', 'YOUR CUSTOM FONT NAME');
});Stack Overflow用户
发布于 2012-05-03 07:44:52
您只需要为需要的文本提供一个id，并在jquery代码中使用此id。下面是一个这样做的演示：
<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.gradienttext-0.1.min.js"></script>
<style>
p{ font-size: 30px; }
</style>
<script>
$(document).ready(function(){
$('#test1').gradienttext({
colors: ['#FFF', '#EB9300'],
style: 'vertical',
shadow: true,
shadow_color: '#000000',
shadow_offset_x: 1,
shadow_offset_x: 1,
shadow_blur: 1
});
});
$(document).ready(function(){
$('#test2').gradienttext({
colors: [
'#FF0000',
'#FF6600',
'#CCFF00',
'#00FF00',
'#0066FF',
'#FF00FF'
],
style: 'horizontal'
});
});
</script>
</head>
<body>
<p id="test1">test 1</p>
<p id="test2">test 2</p>
</body>
</html>Stack Overflow用户
发布于 2012-05-03 08:16:27
实际上，您可以使用纯CSS进行文本渐变。这种技术涉及到用透明的渐变PNG覆盖文本(你也可以使用css3的linear-gradient )。
你可以在这里阅读更多内容：http://webdesignerwall.com/tutorials/css-gradient-text-effect
您可以使用JS (或jQuery)自动添加实际标记中所需的span。
这个效果根本不会改变字体(@ font -face链接或其他)。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/10423147
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号