- 浏览: 74548 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
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 688在我们开发互联网富应用(RIA)时,我们经常写一些JavaSc ... -
跨域iframe高度自适应(兼容IE/FF/OP/Chrome)
2011-11-23 16:23 1012采用JavaScript来控制iframe元素的高度是ifra ... -
微博加关注按钮
2011-11-18 16:00 921新浪微博:uid替换成自己的。 <iframe wid ... -
使用两种简单的方式解析 JSON 格式字符串
2011-08-12 15:33 961//使用两种简单的方式解析 JSON 格式字符串 ... -
ajax请求
2011-07-29 10:53 736window.ajax = function(data){ ... -
Js实现检测、添加、移除样式(className)
2011-07-26 16:27 2370// 说明:添加、移除、检测 className ... -
插入话题后部分文字选中
2011-07-07 20:51 786var btn = document.getElement ... -
阻止事件冒泡
2011-07-07 14:26 716(ev || event).cancelBubble = tr ... -
js常见错误积累
2011-06-29 23:15 684unterminated string literal ... -
Js操作Select大全
2011-05-27 18:28 747判断select选项中 是否存在Value="par ... -
JavaScript blog式日历控件新算法
2011-05-27 17:33 714<!DOCTYPE html PUBLIC &quo ... -
一个随机颜色的函数
2011-05-17 17:07 899function randomColor() { //16进制 ... -
常用JS判断正则
2011-05-06 18:45 903//是否含有汉字 function hasChinese(s ... -
40种网页常用小技巧(javascript)
2011-05-04 10:07 5371. oncontextmenu="window.e ... -
火狐与非火狐获取键值问题keyCode
2011-04-26 20:09 980一次项目中,用到Enter 后ajax提交功能。keyCode ... -
获取浏览器窗口、页面等元素的大小
2011-04-20 12:01 708网页可见区域宽:document.body.clientWid ... -
获取浏览器窗口、页面等元素的大小
2011-04-20 12:00 754网页可见区域宽:document.body.clientWid ... -
自定义一个方法原型,取得json对象某个值
2011-04-19 13:10 891Object.prototype.k = function(n ... -
JS获取父页面元素
2011-04-11 01:22 1024//iframe下获取父元素 var oParent = p ... -
一个关于获取修改后文本域值的问题
2011-04-10 23:56 793一个Textarea文本域问题。 <textarea ...
相关推荐
一个简单的图片放大效果基于jquery animate函数,很简单的,自己可以修改一下用。jquery文件通用自己改一下链接文件。
jquery animate函数不能处理背景色渐变,需要使用jquery.color插件 核心代码: $(function(){ $("#cdiv").animate( { backgroundColor:'#FF0000' },1000 ) }) 完整代码如下: <!DOCTYPE html> <...
下面小编就为大家带来一篇原生js实现jquery函数animate()动画效果的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性(如"height"、"top"或"opacity")。 注意:所有指定的属性必须用骆驼形式,比如用marginLeft代替margin-left. ...
jQuery1.4.2中就预置了两个这样的函数: easing: { linear: function( p, n, firstNum, diff ) { return firstNum + diff * p; }, swing: function( p, n, firstNum, diff ) { return ((-Math.cos(p*Math.PI)/2) + ...
jquery animate网站banner动画效果是一款基于jquery css3 animate属性制作的网站banner动画演示效果代码。
jQuery+animate.css自定义弹窗动画插件,带有多种弹窗方式,具体看下方说明。
jquery数字跳动插件Animate Number是一款增加了数属性和阶跃函数的jQuery动画功能特性。
jquery animate小用例,jquery animate小用例
jquery animate分页标签按钮鼠标悬停滑动展开分页按钮 jquery animate分页标签按钮鼠标悬停滑动展开分页按钮
jQuery第3天知识点:jQuery 属性操作、jQuery三组基本动画、自定义动画animate.zip
jQuery animate事件卷轴打开动画效果
脚本简介jquery animate分页按钮是一款鼠标悬停分页按钮上滑动展开分页按钮,鼠标离开后分页按钮收缩。
jqueryanimate图片无缝滑动javascript网页特效,轮播广告,无缝轮播,精简代码,一看就懂
现在我们可以为 scrollTop 或任何其他属性传递一个函数。 $('#container').animate({ scrollTop: function(){ return $('#container').scrollTop() + $('#container .item.selected').position().top; } }); ...
jquery实例超炫animate动画效果 demo是原版,效果还是相当炫丽 后面自制了两个
通过 jquery animate 制作图片模向滑动特效,适用于展示图片太多的页面,通过点击左右方向按钮,滑动展示更多的图片。功能简单,在IE、Firefox、谷歌浏览器 通过测试。详细示例图片。
通过 jquery animate 制作图片模向滑动特效,适用于展示图片太多的页面,通过点击左右方向按钮,滑动展示更多的图片。功能简单,在IE、Firefox、谷歌浏览器 通过测试。详细示例图片。
Animate Transition 能够以 12 种预设方式来切换图片,且该插件使用了硬件加速 CSS 转换,所以性能极好。该插件可用于网站外观设计,导航,甚至是移动应用程序中的页面切换。 代码示例: AnimateTransition({ ...