收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 5458|回复: 20

鼠标滑过 文字颜色渐变

  [复制链接]
发表于 2012-2-7 14:31:43 | 显示全部楼层 |阅读模式
在一个有链接的的文字上,当鼠标滑入时颜色发生渐变到另外一色,当移出时颜色渐变回原来的颜色,请问不用FLASH如何实现这样的效果?
如这个网站的链接效果http://bont.com/
发表于 2012-2-7 14:36:12 | 显示全部楼层
  1. var mycolor=[0,1,2,3,4,5,6,7,8,9,"A","B","C","D","E","F"]
复制代码
然后划入划出取数组数值到color就OK
回复 支持 反对

使用道具 举报

发表于 2012-2-7 14:45:57 | 显示全部楼层
版主V5啊!!!  加点特效确实不错
回复 支持 反对

使用道具 举报

发表于 2012-2-7 16:00:31 | 显示全部楼层
2楼正解,
回复 支持 反对

使用道具 举报

 楼主| 发表于 2012-2-7 16:00:58 | 显示全部楼层
UED 发表于 2012-2-7 14:36
然后划入划出取数组数值到color就OK

太深奥看不懂的说。
回复 支持 反对

使用道具 举报

发表于 2012-2-7 16:23:47 | 显示全部楼层
本帖最后由 Ferris 于 2012-2-7 16:52 编辑

给你做了一个,就是一个思路,方法有好多种!

 提示:您可以先修改部分代码再运行

回复 支持 反对

使用道具 举报

 楼主| 发表于 2012-2-7 16:47:48 | 显示全部楼层
Ferris 发表于 2012-2-7 16:23
给你做了一个,就是一个思路,方法有好多种!
[html]

谢谢版主。
对JS 不熟呀,感觉复杂,看得也不太懂。。。
回复 支持 反对

使用道具 举报

发表于 2012-2-7 16:57:34 | 显示全部楼层
加点特效确实不错
回复 支持 反对

使用道具 举报

发表于 2012-2-7 17:07:51 | 显示全部楼层
ptliko 发表于 2012-2-7 16:47
谢谢版主。
对JS 不熟呀,感觉复杂,看得也不太懂。。。

建议你把日版的代码一步步的alert.就懂了.
回复 支持 反对

使用道具 举报

发表于 2012-2-7 22:51:01 | 显示全部楼层
各位高人  求救啊   我用jquery写了一个相同的例子,  你们看看

 提示:您可以先修改部分代码再运行



现在是可以让全部的li 都跟着渐变颜色 ,  求个思路让经过每个li 对应的li 变化颜色 (现在主要是$(this)取不到$("ul >li"))的值了
回复 支持 反对

使用道具 举报

发表于 2012-2-8 09:04:25 | 显示全部楼层
UED 发表于 2012-2-7 17:07
建议你把日版的代码一步步的alert.就懂了.

在吗 按照你说得那个方法 写了一个jquery 的  但是在取元素的时候有点问题  指点下..
回复 支持 反对

使用道具 举报

发表于 2012-2-8 09:54:24 | 显示全部楼层

 提示:您可以先修改部分代码再运行

回复 支持 反对

使用道具 举报

 楼主| 发表于 2012-2-8 10:30:36 | 显示全部楼层
UED 发表于 2012-2-7 17:07
建议你把日版的代码一步步的alert.就懂了.

如何指定渐变的两颜色,而不是白色到黑色呢??
试了好久都没有搞明白setColor()。。
回复 支持 反对

使用道具 举报

发表于 2012-2-8 10:33:59 | 显示全部楼层
如何指定渐变的两颜色,而不是白色到黑色呢??
试了好久都没有搞明白setColor()。。

这个你得弄懂16进制颜色代码要如何改变.比如#06C中第二个6变成3 然后颜色就是#03C 这个颜色就比较暗.
回复 支持 反对

使用道具 举报

 楼主| 发表于 2012-2-8 11:35:24 | 显示全部楼层
UED 发表于 2012-2-8 10:33
这个你得弄懂16进制颜色代码要如何改变.比如#06C中第二个6变成3 然后颜色就是#03C 这个颜色就比较暗.

16进制颜色代码的改变会知道,对于‘日久。。‘写的例子,不知道在哪修改?

补充内容 (2012-2-8 11:44):
网站上查到SetColor(COLORNAME , NUMBER , NUMBER , NUMBER)
回复 支持 反对

使用道具 举报

发表于 2012-2-8 13:15:41 | 显示全部楼层
本帖最后由 Afeila 于 2012-2-8 13:19 编辑

 提示:您可以先修改部分代码再运行

我是根据"日久生情"的代码改写的,你看合不合你的要求.

你可以自定义字体色彩变化里开始和结束的颜色
示例是从绿色变到紫色




补充内容 (2012-2-8 14:27):
toHex函数可变成       
function toHex(n) {
                n = Math.round(n);
                n=n.toString(16);
                n = (n.length<2 ? "0"+n : n).toUpperCase();
                return n;
        }
回复 支持 反对

使用道具 举报

 楼主| 发表于 2012-2-8 14:10:25 | 显示全部楼层
Afeila 发表于 2012-2-8 13:15
[html]

很COOOOL。谢谢
回复 支持 反对

使用道具 举报

发表于 2012-2-8 22:44:26 | 显示全部楼层
过来学习了。。。
回复 支持 反对

使用道具 举报

发表于 2012-2-22 15:02:59 | 显示全部楼层
Ferris 发表于 2012-2-7 16:23
给你做了一个,就是一个思路,方法有好多种!
[html]

num ? i-- : i++;   这个究竟是什么意思啊?  解释下
回复 支持 反对

使用道具 举报

发表于 2012-2-22 15:05:19 | 显示全部楼层
CSS代码链接颜色改变,是这个的吗?
回复 支持 反对

使用道具 举报

发表于 2012-2-22 15:14:45 | 显示全部楼层
CSS3的transition可以轻松做到

webkit下
  1. -webkit-transition: color .3s ease-out;
复制代码
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )  

GMT+8, 2020-5-25 10:05 , Processed in 0.109099 second(s), 9 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表