- 浏览: 78974 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
128340haha:
这里只是一个前台的 图片裁剪与预览~!要截图的成品 用得到的参 ...
一枚基于jQuery的头像截取插件imgareaselect -
Shmily奕蝶:
指教一下,我按你说的弄了,可怎么还是截不了图啊,这是哪里的原因 ...
一枚基于jQuery的头像截取插件imgareaselect -
snake13456:
小图的定位不够准确,要自行修改一下
一枚基于jQuery的头像截取插件imgareaselect -
fuhao200866:
没事自己坐沙发,哈哈
q:before, q:after { content:''; }问题【记录用】
一个自定义对象fadeColor,来看下底层代码:
调用方法:
window.Sys = function (ua){ var b = { ie: /msie/.test(ua) && !/opera/.test(ua), opera: /opera/.test(ua), safari: /webkit/.test(ua) && !/chrome/.test(ua), firefox: /firefox/.test(ua), chrome: /chrome/.test(ua) },vMark = ""; for (var i in b) { if (b[i]) { vMark = "safari" == i ? "version" : i; break; } } b.version = vMark && RegExp("(?:" + vMark + ")[\\/: ]([\\d.]+)").test(ua) ? RegExp.$1 : "0"; b.ie6 = b.ie && parseInt(b.version, 10) == 6; b.ie7 = b.ie && parseInt(b.version, 10) == 7; b.ie8 = b.ie && parseInt(b.version, 10) == 8; return b; }(window.navigator.userAgent.toLowerCase()); function toHex(num){ var str = "0"+num.toString(16); return str.substring(str.length-2); } function fadeColor(obj){ this.obj = obj; this.bgTimer = null; this.foreTimer = null; this.FPS = 20; }; fadeColor.prototype = { getSrcColor:function(flag){ var srcColor,sR,sG,sB; if(flag){ //bgColor if(window.Sys.ie){ srcColor = this.obj.currentStyle.backgroundColor } else{ var myComputedStyle = document.defaultView.getComputedStyle(this.obj, null); srcColor = myComputedStyle.backgroundColor } } else{ //foreColor if(window.Sys.ie){ srcColor = this.obj.currentStyle.color } else{ var myComputedStyle = document.defaultView.getComputedStyle(this.obj, null); srcColor = myComputedStyle.color } } if(window.Sys.ie){ sR = parseInt(srcColor.substring(1,3),16); sG = parseInt(srcColor.substring(3,5),16); sB = parseInt(srcColor.substring(5),16); } else{ sR = srcColor.match(/\d+/ig)[0]; sG = srcColor.match(/\d+/ig)[1]; sB = srcColor.match(/\d+/ig)[2]; } return (eval("({sR:"+sR+",sG:"+sG+",sB:"+sB+"})")); }, startTimer:function(destColor,duration,flag){ var sR,sG,sB,dR,dG,dB,offR,offG,offB,stepR,stepG,stepB,srcColor,maxOffset,step; var _self = this; srcColor = _self.getSrcColor(flag); sR = srcColor.sR; sG = srcColor.sG; sB = srcColor.sB; dR = parseInt(destColor.substring(1,3),16); dG = parseInt(destColor.substring(3,5),16); dB = parseInt(destColor.substring(5),16); offR = dR - sR; offG = dG - sG; offB = dB - sB; maxOffset = Math.max(Math.abs(offR),Math.abs(offG)); maxOffset = Math.max(maxOffset,Math.abs(offB)); step = Math.ceil(maxOffset/Math.round(_self.FPS/1000*duration)); stepR = (offR == 0 ? 0 : step * (offR / Math.abs(offR))); stepG = (offG == 0 ? 0 : step * (offG / Math.abs(offG))); stepB = (offB == 0 ? 0 : step * (offB / Math.abs(offB))); if(flag){ //bgColor _self.bgTimer = setInterval(function(){ sR += stepR; sG += stepG; sB += stepB; sR = (offR > 0 ? Math.min(sR ,dR) : Math.max(sR,dR)); sG = (offG > 0 ? Math.min(sG ,dG) : Math.max(sG,dG)); sB = (offB > 0 ? Math.min(sB ,dB) : Math.max(sB,dB)); if(sR == dR && sG == dG && sB == dB){ clearInterval(_self.bgTimer); } _self.obj.style.backgroundColor = "#"+toHex(sR)+toHex(sG)+toHex(sB); },_self.FPS); } else{ //foreColor _self.foreTimer = setInterval(function(){ sR += stepR; sG += stepG; sB += stepB; sR = (offR > 0 ? Math.min(sR ,dR) : Math.max(sR,dR)); sG = (offG > 0 ? Math.min(sG ,dG) : Math.max(sG,dG)); sB = (offB > 0 ? Math.min(sB ,dB) : Math.max(sB,dB)); if(sR == dR && sG == dG && sB == dB){ clearInterval(_self.foreTimer); } _self.obj.style.color = "#"+toHex(sR)+toHex(sG)+toHex(sB); },_self.FPS); } }, fadeBgColor:function(destColor , duration){ this.stopTimer(1); this.startTimer(destColor , duration ,1); }, fadeForeColor:function(destColor , duration){ this.stopTimer(0); this.startTimer(destColor , duration ,0); }, stopTimer:function(flag){ if(flag){ clearInterval(this.bgTimer); this.bgTimer = null; } else{ clearInterval(this.foreTimer); this.foreTimer = null; } }, setFPS:function(fps){ this.FPS = fps; } };
调用方法:
window.onload = function(){ var test = document.getElementById("test"); //test为页面中的一个DOM元素。 var fadeObj; fadeObj = new fadeColor(test); test.onmouseover = function(){ fadeObj.fadeBgColor("#FFFFFF",1000); fadeObj.fadeForeColor("#000000",1000); }; test.onmouseout = function(){ fadeObj.fadeBgColor("#5d5c5c",1000); fadeObj.fadeForeColor("#FFFFFF",1000); }; }
发表评论
-
减少浏览器重解析 JavaScript DOM操作优化方案
2011-11-24 10:26 779在我们开发互联网富应用(RIA)时,我们经常写一些JavaSc ... -
跨域iframe高度自适应(兼容IE/FF/OP/Chrome)
2011-11-23 16:23 1066采用JavaScript来控制iframe元素的高度是ifra ... -
微博加关注按钮
2011-11-18 16:00 974新浪微博:uid替换成自己的。 <iframe wid ... -
使用两种简单的方式解析 JSON 格式字符串
2011-08-12 15:33 1077//使用两种简单的方式解析 JSON 格式字符串 ... -
ajax请求
2011-07-29 10:53 794window.ajax = function(data){ ... -
Js实现检测、添加、移除样式(className)
2011-07-26 16:27 2440// 说明:添加、移除、检测 className ... -
插入话题后部分文字选中
2011-07-07 20:51 834var btn = document.getElement ... -
阻止事件冒泡
2011-07-07 14:26 781(ev || event).cancelBubble = tr ... -
js常见错误积累
2011-06-29 23:15 728unterminated string literal ... -
Js操作Select大全
2011-05-27 18:28 850判断select选项中 是否存在Value="par ... -
JavaScript blog式日历控件新算法
2011-05-27 17:33 774<!DOCTYPE html PUBLIC &quo ... -
一个随机颜色的函数
2011-05-17 17:07 956function randomColor() { //16进制 ... -
常用JS判断正则
2011-05-06 18:45 955//是否含有汉字 function hasChinese(s ... -
40种网页常用小技巧(javascript)
2011-05-04 10:07 5841. oncontextmenu="window.e ... -
火狐与非火狐获取键值问题keyCode
2011-04-26 20:09 1041一次项目中,用到Enter 后ajax提交功能。keyCode ... -
获取浏览器窗口、页面等元素的大小
2011-04-20 12:01 816网页可见区域宽:document.body.clientWid ... -
获取浏览器窗口、页面等元素的大小
2011-04-20 12:00 836网页可见区域宽:document.body.clientWid ... -
自定义一个方法原型,取得json对象某个值
2011-04-19 13:10 970Object.prototype.k = function(n ... -
JS获取父页面元素
2011-04-11 01:22 1105//iframe下获取父元素 var oParent = p ... -
一个关于获取修改后文本域值的问题
2011-04-10 23:56 855一个Textarea文本域问题。 <textarea ...
相关推荐
jquery animate函数不能处理背景色渐变,需要使用jquery.color插件 核心代码: $(function(){ $("#cdiv").animate( { backgroundColor:'#FF0000' },1000 ) }) 完整代码如下: <!DOCTYPE html> <...
首先,`jquery color插件`是jQuery的一个扩展,它为jQuery对象添加了对颜色操作的支持。这个插件允许开发者方便地进行颜色转换、动画和过渡效果,如颜色淡入淡出、颜色滑动等。在"jquery color animations"中,我们...
《jQuery实现背景颜色悬停渐变技术详解》 在网页设计中,动态效果常常能提升用户体验,其中背景颜色的渐变变化就是一种常见的交互手段。本文将深入探讨如何使用jQuery库来实现元素背景颜色在鼠标悬停时的渐变效果,...
在这个“jquery自动缩放渐变全屏背景图片代码下载.zip”压缩包中,我们关注的是一个利用jQuery实现的特殊效果,即全屏背景图片的自动缩放和渐变效果。这个功能通常用于提升网站的视觉吸引力,尤其是在设计现代、简洁...
jQuery网页背景渐变色切换特效是一种利用JavaScript库jQuery实现的动态视觉效果,它允许开发者创建出引人注目的网页背景。这种特效的核心在于利用CSS3的渐变特性,结合jQuery的事件处理和动画功能,来实现背景颜色的...
在实际应用中,我们可能需要对菜单项进行更多的定制,例如添加背景色渐变、动态边框等。这可以通过扩展上述CSS和jQuery代码来实现。同时,为确保兼容性,需注意检查用户的浏览器是否支持CSS3的`transition`和`color`...
【jQuery+CSS3可自定义设置数值圆形温度计代码】是一种使用JavaScript库jQuery和CSS3技术实现的交互式用户界面元素。这个温度计允许开发者根据需求动态设置显示的温度值,为用户提供直观的视觉反馈。在本文中,我们...
"jQuery渐变切换Banner焦点图.zip"是一个包含jQuery实现的动态图片展示效果,通常用于网站的首页或者产品展示区域,以吸引用户的注意力并提供视觉上的吸引力。 该jQuery插件的核心特性是其渐变切换效果。渐变效果是...
【jQuery网页背景渐变色切换特效】是一种利用JavaScript库jQuery实现的动态效果,它使得网页的背景颜色能够平滑地从一种渐变色过渡到另一种,从而为用户带来视觉上的吸引力和互动体验。这种特效在现代网页设计中颇为...
jQuery Color插件是jQuery库的一个扩展,用于处理和动画化颜色属性。这个插件使得在JavaScript中实现颜色变换效果变得更加简单。在这个特定的场景中,我们关注的是如何使用jQuery Color来改变元素的背景颜色,同时...
2. **颜色动画**:提供`animate()`方法,可以实现颜色属性的平滑过渡,例如改变元素的背景色、边框色等。开发者可以设置动画的时长、延迟、完成回调函数等参数,实现个性化的动画效果。 3. **颜色操作**:除了动画...
在本文中,我们将深入探讨如何使用jQuery实现一个带有动画效果的TAB切换功能,如同"jQuery TAB 带动画滚动切换.rar"所描述的那样。这个功能允许用户在不同的内容区域之间进行平滑的滚动切换,同时伴随着吸引人的视觉...
这是一个巧妙的方法,避免了引入额外的插件,并利用了jQuery和CSS的特性来实现背景色的动画效果。需要注意的是,如果`removeClass`和`addClass`紧挨着执行,由于它们之间的执行时间间隔太短,可能会导致动画无法正确...
/* 默认背景色 */ } .progress { height: 100%; background-image: linear-gradient(to right, #ff0000, #00ff00, #0000ff); /* 彩虹色渐变 */ } ``` 3. **jQuery 动画**: 使用jQuery的`.animate()`方法来...
3. **CSS样式**:为了视觉上呈现进度条,我们需要为容器和进度元素设置合适的CSS样式,如宽度、背景色、边框等。可以使用渐变背景或者伪元素来实现动画效果。 4. **jQuery操作**:使用jQuery,我们可以监听事件(如...
2. 动画效果:jQuery的`.animate()`函数可以用于平滑地改变CSS属性,如渐变颜色,实现更自然的高亮过渡。 三、手风琴效果 1. 手风琴效果是一种常见的UI组件,其特点是一组可折叠的面板,每次只能打开一个。在本...
4. **可重复性和自适应**:为了使动画更加流畅,我们可以将其封装成一个自定义函数,并在页面不同区域或多个元素上重复使用。同时,确保动画在不同设备和屏幕尺寸下都能良好工作,可能需要使用响应式设计和媒体查询...
此外,还可以通过调整CSS和jQuery代码来添加更多自定义效果,如渐变色、阴影、过渡动画等,以满足不同的设计需求。 总的来说,“jQuery变色动画下拉菜单”结合了HTML、CSS和JavaScript的精华,为用户提供了直观且...
9. **自定义效果**:除了基本的视差滚动外,还可以结合其他jQuery特效,如淡入淡出、渐变色变化等,进一步丰富页面动态表现。 10. **兼容性测试**:由于涉及到CSS3和jQuery,需要测试在主流浏览器(Chrome、Firefox...