html5做文字颜色渐变代码,神奇!js+CSS+DIV实现文字颜色渐变效果_javascript技巧
本文实例为大家分享了DIV+CSS+JS实现的文字颜色渐变效果,供大家参考,具体内容如下
下面是 CSS 部分代码:
body{ font:12px/1.5 Microsoft Yahei;}h3{ padding:10px; margin:0; background-color:#999; color:#fff; font:16px/1.5 Microsoft Yahei; text-align:center;}.box{ position:relative; background-color:#fff; width:auto; margin:0 auto; padding:0 30px; font:700 20px/1.5 "Microsoft Yahei",Microsoft Yahei; border-top:1px dashed #ccc; border-bottom:1px dashed #ccc; height:30px; margin-top:8px;}.box a{ position:absolute; font-style:normal; white-space:nowrap;}.f999{ color:#999;}
下面是 DIV 部分代码:
CSS多彩渐变字文字:
R值: RGB颜色中的R值(0-255)
G值: RGB颜色中的G值(0-255)
B值: RGB颜色中的B值(0-255)
渐变方式: 灰度渐变变化R值变化G值变化B值 相应的数值会强制在0~255之间变化
OK,上色!
以下是 JavaScript 部分代码:
// JavaScript代码开始var rs = document.getElementById("rvalue");var gs = document.getElementById("gvalue");var bs = document.getElementById("bvalue");function init(){ var str; for(var i=0;i<=255;i++){ var opr = document.createElement("option"); var opg = document.createElement("option"); var opb = document.createElement("option"); opr.innerHTML = i; opg.innerHTML = i; opb.innerHTML = i; switch(i){ case 100:opb.selected="selected";break; case 200:opg.selected="selected";break; } gs.appendChild(opg); rs.appendChild(opr); bs.appendChild(opb); } setDiv();}function setDiv(){ var font = document.getElementById("ctext").value; var dObj = document.getElementById("box"); dObj.innerHTML=font;}function createData(){ var font = document.getElementById("ctext").value; var r = rs.options[rs.selectedIndex].text; var g = gs.options[gs.selectedIndex].text; var b = bs.options[bs.selectedIndex].text; var type = document.getElementById("ctype").value; if(font==""||font=="undefined"){ font="文字不能为空,使用默认文字"; document.getElementById("ctext").value = font; } colorful('box',font,r,g,b,type);}function colorful(obj,font,r,g,b,type){ var boxObj; if(typeof(obj)=="string"||typeof(obj)=="number"){ boxObj = document.getElementById(obj); }else{ boxObj = obj; } boxObj.innerHTML=""; var num = boxObj.getElementsByTagName("a")[0].scrollWidth; boxObj.innerHTML=""; for(var i=0;i<=num;i++){ var j=i+1; var c=Math.round(255/num*i); switch(Number(type)){ case 0:r=c;g=c;b=c;break; case 1:r=c;break; case 2:g=c;break; case 3:b=c;break; } var iObj = document.createElement("A"); iObj.innerHTML=font; iObj.style.clip="rect(auto "+j+"px auto "+i+"px)"; iObj.style.color="rgb("+r+","+g+","+b+")"; //iObj.href="#"; // 生成的文字超链接 boxObj.appendChild(iObj); }}init();《script》
html5做文字颜色渐变代码,神奇!js+CSS+DIV实现文字颜色渐变效果_javascript技巧相关推荐
- 网页背景颜色php代码怎么写,CSS控制网页背景颜色的代码
我想大家常常为一些比较合适于自己的网页背景的图片而发愁吧,这个我想也是有的,因为这些图片不是太大就是太小,或者太乱,那么有没有办法让图片能合自己的主页的胃口呢?答案是肯定的. 想知道怎么来实现嘛,好吧 ...
- c语言改变输出字体颜色渐变,如何为Qt视图中的文字实现彩虹渐变效果
前言 将view中的文本内容用自定义的颜色显示是一种十分常见的需求.今天我们稍微改变些"花样".下面话不多说了,来一起看看详细的介绍吧 需求定义 我们的需求很简单,现在有一些在vi ...
- python的print输出为红色以及其他颜色的代码示例,Python print()输出文字带颜色设置方法
格式示例 标准格式: print("\033[显示方式:前景颜色:背景颜色m-\033[0m") 显示方式 显示方式 值 颜色 前景色 背景色 默认 0 黑色 30 40 高亮显示 ...
- 做网页很实用代码集合和CSS制作网页小技巧整理
做网页很实用代码集合 控制横向和纵向滚动条的显隐?<body style="overflow-y:hidden"> 去掉x轴 <body style=" ...
- 程序员520❤七夕情人节表白代码Html+Js+Css花瓣相册网页模板❤程序员表白必备
❉ 520程序员求婚Html+Js+Css花瓣相册❤ (爱心3D动画,自定义文字)/ 程序员表白必备 一年一度的/520情人节/七夕情人节/生日礼物/告白师妹/程序员表白, 非常经典的程序员式的表达爱 ...
- html中 导航条置顶的代码6,JS+CSS实现六级网站导航主菜单效果
本文实例讲述了JS+CSS实现六级网站导航主菜单效果.分享给大家供大家参考.具体如下: 这是一款JS+CSS实现支持6级的网站导航主菜单,级级相信够大家用了,外观蓝色风格,也是使用最多的一种菜单颜色, ...
- html简单边框制作--特效文字制作及代码,HTML简单边框制作--特效文字制作及代码...
特效文字制作及代码 一.删除线 删除线 代 码 如 下:文字内容 文字顶部加横线 代 码 如 下:文字顶部加横线 三.带背景字体 带背景字体 代 码 如 下:带背景字体 四.投影效果 投影效果 代 码 ...
- matlab到word文字转变,Matlab代码或中文复制到word变成乱码的解决技巧
Matlab代码或中文复制到word变成乱码怎么处理?本节就主要介绍了Matlab代码或中文复制到word变成乱码的解决技巧,还不了解的朋友就跟着小编学习一下吧,希望对你们有所帮助. 这是小编在Mat ...
- 【小5聊】使用js+css+div布局方式画一棵圣诞树,带闪烁霓虹灯效果
虽然jQuery时代已经逐渐退出历史舞台,在拥抱vue的同时,也还是可以用jQuery锻炼下编程思维,毕竟比较灵活. 1.适合基础入门的前端小伙伴 2.适合使用jQuery锻炼实现前端效果小伙伴 3. ...
最新文章
- 如何有效编写软件的75条建议
- 【 FPGA/IC 】谈谈复位
- babel编译html文件,使用webpack+babel来_编译_JS代码
- 运维与自动化运维发展概括
- 谈谈CTO、技术总监、首席架构师的区别
- 杰出人士的34个好习惯
- spring-第十六篇之AOP面向切面编程之Spring AOP
- 计算机显示u盘隐藏分区,电脑删除U盘隐藏分区的三种方法
- c语言题库及详解答案 免费下载,C语言题库(带详解答案).pdf
- 三十三个免费匿名临时邮箱服务
- 纯屏和液晶显示器有什么区别
- 一阶线性偏微分方程通解法和特征线法(一)| 两个自变量情况 | 偏微分方程(七)
- 国医眼科大师-唐由之-干眼症熏方
- Matlab论文插图绘制模板第60期—瀑布图(Waterfall)
- 全网刷屏的可达鸭,单个炒到2000元?湖北人要错过了?
- 如何运行从网上下载的iWatch项目详细步骤.
- ctf新手总结--web做题
- Space Invaders 太空侵略者
- Word转PDF功能实现,文档转换工具通过PHP开发
- JavaWeb学习案例——学生管理系统
热门文章
- halcon1D测量算子,持续更新
- 【数据库bug修复】——Authentication plugin ‘caching_sha2_password‘ is not supported
- 【图像处理】——图像特效处理(马赛克、图像融合、毛玻璃等)
- DEV C++如何不需要通过建项目可以调试程序
- java设计模式懒汉_java设计模式-懒汉设计模式
- C++的字符串分割函数
- python2协程_python中的协程(二)
- python向数据库中添加参数_第四篇:python操作数据库时的传参问题
- Redis(四):Spring + JedisCluster操作Redis(集群)
- 动态规划(冬令营课堂笔记)