鼠标移上去透明度渐渐增加,鼠标移出,透明度渐渐减小。关键代码:咸宁市中心小学view source print?1varspeed = 0;2if(target>obj.alpha){3 speed = 5;4}else{5 speed = -5;6}根据目标值和当时值的对比,来决定是正向还是负向速度。view source print?01for(i=0; i < runs_li.length; i++){02 runs_li[i].timer = null;03 runs_li[i].alpha = 30;04 runs_li[i].onmouseover = function(){05 startrun(this,...
这篇文章主要介绍了JS+CSS实现鼠标经过弹出一个p框的实现方法,带缓冲渐变动画效果,涉及鼠标事件的响应及结合时间函数定时触发形成动画渐变效果的相关技巧,需要的朋友可以参考下本文实例讲述了JS+CSS实现鼠标经过弹出一个p框效果。分享给大家供大家参考,具体如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/19...
这次给大家带来鼠标响应式透明度渐变效果的实现,做出鼠标响应式透明度渐变效果的注意事项有哪些,下面就是实战案例,一起来看一下。本文实例讲述了jQuery实现鼠标响应式透明度渐变动画效果。分享给大家供大家参考,具体如下:先来看看运行效果:具体代码如下:<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>js动画-透明度变化</title> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.js"></script> <...
mui内置有H5版本的透明渐变导航控件,教程参考mui官网;透明渐变导航是一种解决滚动条通顶的变通方案,相比双webview,具有更高的性能和更好的动画效果;下面通过本文给大家分享基于原生JS实现 MUI导航栏透明渐变效果,具体内容详情如下所示:首先声明:由于backgroundColor的值采用的是RGBA,IE8及以下不支持,所以此效果不支持IE8及以下的浏览器css代码body,p,h1{margin: 0;} .module-layer{width: 100%;position: fixed;top: 0;...
本文实例讲述了js实现按钮颜色渐变动画效果的方法。分享给大家供大家参考。具体如下:这里演示js实现按钮慢慢变色的方法,鼠标移到按钮上,按钮的背景色就发生变化,是慢慢的变化,点击按钮会打开指定链接,这里主要是演示按钮变色的代码实现方法。运行效果截图如下:具体代码如下:<HTML> <HEAD><TITLE>按钮慢慢变色</TITLE> <STYLE type=text/css> BODY {MARGIN-TOP: 0px; FONT-SIZE: 9pt; MARGIN-LEFT: 0px; MARGIN-RIGHT: 0px;...
这篇文章主要介绍了JavaScript实现的鼠标响应颜色渐变效果,涉及javascript面向对象及事件监听、响应机制相关操作技巧,需要的朋友可以参考下本文实例讲述了JavaScript实现的鼠标响应颜色渐变效果。分享给大家供大家参考,具体如下:运行效果图如下:完整代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/199...
javascriptboy// Flash table Extension for Dreamwever ,by dio(diopex@sina.com) nereidFadeObjects = new Object(); nereidFadeTimers = new Object(); function nereidFade(object, destOp, rate, delta){ if (!document.all) return if (object != "[object]"){ //do this so I can take a string too setTimeout("nereidFade("+object+","+destOp+","+rate+","+delta+")",0); return; } clearTimeout(nereidFadeTimers[objec...
无标题文档 function mhEnter() { window.event.srcElement.filters[0].apply(); window.event.srcElement.className="sy2"; window.event.srcElement.filters[0].play(); } function mhLeave() { window.event.srcElement.filters[0].apply(); window.event.srcElement.className="sy1"; window.event.srcElement.filters[0].play(); } www.gxlcms.com [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
无标题文档 .menu td{ font-size:12px; color:white; font-weight:bold; background-color:#336699; border:1px solid #336699; border:1px solid #336699; filter:blendtrans(duration=1); text-align:center;} function showfilter(obj){ var tds=obj.getElementsByTagName("td"); for(var i=0;i 1111111111111 2222222222222 3333333333333 4444444444444 5555555555555 6666666666666 77777777777777 888888888...
下面是我从网上搜索下来的关于网页的背景色从上下到由蓝色到白色的渐变的代码,但其中的一些参数我不懂,我琢磨不透如果要由下至上的渐变效果到底是修改哪个参数,我试过修改gradientType的值,但没能实现从下到上的渐变效果,只有从左至右的。 希望各位能指点一下,先谢过大家!! style="FILTER: progidXImageTransform.Microsoft.Gradient gradientType=0,startColorStr=#46B5FF,endColorStr=#ffffff)" >FF不支持,还是用背景图兼...
脚本之家 www.gxlcms.com (function($){ $.isPercent = function(p){ return /^(\d*)(\.?)(\d*)%$/.test(p); } var __alert__ = $.alert; $.alert = function(){ var arg,s=""; for(var i=0;arg = arguments[i];i++){ s += arg + "\n" } __alert__(s); } })(window); String.prototype.trim = function(){ return this.replace(/(^\s*)|(\s*$)/g, ""); } var JObj = {}; (function($){ /*------------------------------------...
使用该程序能实现很多常见的动画特效,包括大小变换、位置变换、渐显渐隐等等。 程序说明: 渐变效果的原理就是利用定时器不断设置值,如果要减速效果就设置一个步长(详细看JavaScript 弹簧效果) 。 这里只是把能渐变的属性(透明度、宽、高、left、top)整合在一起,使用相同的渐变级数(Step)使渐变同步,形成多个属性同时渐变的效果。 下面说说有用的地方: 【最终样式】 在JavaScript 图片切割效果的边宽获取中也说到了最终...
程序说明 【ColorGrads颜色梯度】 程序ColorGrads的作用是通过StartColor和EndColor生成颜色梯度集合。 颜色都可以用红(r)、绿(g)、蓝(b)三个颜色来表示。 程序中先通过GetColor把一般的颜色表示形式转化成一个用红(r)、绿(g)、蓝(b)三个颜色值作元素的集合。 那就首先要知道有什么颜色表示形式,从w3c的Colors部分可以知道有以下形式: 关键词模式: em { color: red } RGB颜色模式: em { color: #f00 } em { color: #ff0000 } e...
先截两个图看看: 效果很不错吧?会不会误以为这些字体是图片?这可不是图片,而是用JS实现的在线演示 http://demo.jb51.net/js/gradient-test/demo.htm下面来简单分享下实现过程及原理(网站中使用了jquery这个lib,我们这里就不再自己单独实现了,我们这里分享的也是jquery的实现方法): HTML代码: 代码如下: © 2009 Dragon Interactive. All Rights Reserved. 为了便于代码重用,我们通过class来标识出哪些文字需要增加这个特...
本文实例讲述了jQuery实现的文字hover颜色渐变效果。分享给大家供大家参考,具体如下:$(document).ready(function(){$("a").hover(function(){$("a").animate({width:"80%",height:"40%",fontSize:"100px"},1600,function(){$("a").animate({color:"#FFFFFF"},1600);});},function(){$("a").animate({color:"blue"},1600,function(){$("a").animate({width:"100px",height:"20px",fontSize:"14px"},1600);});}); });我不是淡入淡出...