【 View】【收藏】【推荐】【评论】 Css+Js打造渐变背景 (2008-02-27 )

下载 Download：
迅雷下载(推荐)　|　本地下载(电信)

来源：预览网址：请运行代码预览

重要：当提供源代码在代码框显示时，下载和演示地址可能无效，请点击下面的运行代码查看效果！

<!--ctype html public '-//w3c//dtd html 4.01//en' 'http://www.w3.org/tr/html4/strict.dt-->
<meta http-equiv="content-type" content="text/html; charset=gbk" /><script>
 
var setGradient = (function(){
	 
	//private variables;
	var p_dCanvas = document.createElement('canvas');
	var p_useCanvas =  !!( typeof(p_dCanvas.getContext) == 'function');
	var p_dCtx = p_useCanvas?p_dCanvas.getContext('2d'):null;
	var p_isIE = /*@cc_on!@*/false;
	 
	
	 //test if toDataURL() is supported by Canvas since Safari may not support it
	
   try{   p_dCtx.canvas.toDataURL() }catch(err){
          p_useCanvas = false ;
   };
         
	if(p_useCanvas){
	   
	   return function (dEl , sColor1 , sColor2 , bRepeatY ){
			
			if(typeof(dEl) == 'string') dEl =  document.getElementById(dEl);
			if(!dEl) return false;
			var nW = dEl.offsetWidth;
			var nH = dEl.offsetHeight;
			p_dCanvas.width = nW;
			p_dCanvas.height = nH;
			
		
			var dGradient;
			var sRepeat;
			// Create gradients
			if(bRepeatY){
				dGradient = p_dCtx.createLinearGradient(0,0,nW,0);
				sRepeat = 'repeat-y';
			}else{
				dGradient = p_dCtx.createLinearGradient(0,0,0,nH);
				sRepeat = 'repeat-x';
			}		
			
			dGradient.addColorStop(0,sColor1);
			dGradient.addColorStop(1,sColor2);				
			
			p_dCtx.fillStyle = dGradient ; 
			p_dCtx.fillRect(0,0,nW,nH);
			var sDataUrl = p_dCtx.canvas.toDataURL('image/png');
			
			with(dEl.style){
				backgroundRepeat = sRepeat;
				backgroundImage = 'url(' + sDataUrl + ')';
				backgroundColor = sColor2;    
			};
	   }
	}else if(p_isIE){
		
		p_dCanvas = p_useCanvas = p_dCtx =  null;		
		return function (dEl , sColor1 , sColor2 , bRepeatY){
			if(typeof(dEl) == 'string') dEl =  document.getElementById(dEl);
			if(!dEl) return false;
			dEl.style.zoom = 1;
			var sF = dEl.currentStyle.filter;
			dEl.style.filter += ' ' + ['progid:DXImageTransform.Microsoft.gradient(	GradientType=',  +(!!bRepeatY ),',enabled=true,startColorstr=',sColor1,', endColorstr=',sColor2,')'].join('');
		    
		};
	
	}else{
		
		p_dCanvas = p_useCanvas = p_dCtx =  null;
		return function(dEl , sColor1 , sColor2  ){
			
			if(typeof(dEl) == 'string') dEl =  document.getElementById(dEl);
			if(!dEl) return false;
			with(dEl.style){
				 backgroundColor = sColor2; 
			};
			//alert('your browser does not support gradient effet');
		}
	}
})();
 
</script><style type="text/css">

  body{font:0.75em/1.4 Arial;text-align:left;margin:20px;}
  hr{clear:both;visibility:hidden;}
  xmp{font:12px/12px "Courier New";background:#fff;color:#666; border:solid 1px #ccc;}
  div.example{  border:solid 1px #555;margin:0 20px 20px 0;float:left; display:inline;margin:1em;background:#fff;width:300px;padding:40px;color:#222;font:xx-small/1.2 "Tahoma";text-align:justify;}</style>
<h1>渐变背景-beta1</h1>
<h4>IE6,IE7,FF2测试通过.</h4>
<div class="example" id="example1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam blandit nunc lobortis diam bibendum semper. Nunc aliquam aliquam mi. Maecenas porttitor, lorem sed mattis ultrices, lorem risus consequat mi, vitae ullamcorper leo ipsum in tellus. Pellentesque arcu est, sollicitudin sed, ultricies quis, vestibulum a, neque. Duis massa elit, gravida vel, lacinia eu, pretium eget, ipsum. Etiam magna urna, ultrices ut, eu </div>
<div class="example" id="example2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam blandit nunc lobortis diam bibendum semper. Nunc aliquam aliquam mi. Maecenas porttitor, lorem sed mattis ultrices, lorem risus consequat mi, vitae ullamcorper leo ipsum in tellus. Pellentesque arcu est, sollicitudin sed, ultricies quis, vestibulum a, neque. Duis massa elit, gravida vel, lacinia eu, pretiu </div>
<div class="example" id="example3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam blandit nunc lobortis diam bibendum semper. Nunc aliquam aliquam mi. Maecenas porttitor, lorem sed mattis ultrices, lorem risus consequat mi, vitae ullamcorper leo ipsum in tellus. Pellentesque arcu est, sollicitudin sed, ultricies quis, vestibulum a, neque. Duis massa elit, gravida vel, lacinia eu, pretium eget, ipsum. Etiam magna urna </div>
<div class="example" id="example4">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam blandit nunc lobortis diam bibendum semper. Nunc aliquam aliquam mi. Maecenas porttitor, lorem sed mattis ultrices, lorem risus consequat mi, vitae ullamcorper leo ipsum in tellus. Pellentesque arcu est, sollicitudin sed, ultricies quis, vestibulum a, neque. Duis massa elit, gravida vel, lacinia eu, pretium eget, ipsum. Etiam magna urna, ultrices ut, euismod in, lobortis tempus, ipsum. Fusce risus tellus, interdum sit amet, </div>
<div class="example" id="example5">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam blandit nunc lobortis diam bibendum semper. Nunc aliquam aliquam mi. Maecenas porttitor, lorem sed mattis ultrices, lorem risus consequat mi, vitae ullamcorper leo ipsum in tellus. Pellentesque arcu est, sollicitudin sed, ultricies quis, vestibulum a, neque. Duis massa elit, gravida vel, lacinia eu, pretium eget, ipsum. Etiam magna urna, ultrices ut, euismod in, lobortis tempus, ipsum. Fusce risus tellus, interd </div>
<div class="example" id="example6">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam blandit nunc lobortis diam bibendum semper. Nunc aliquam aliquam mi. Maecenas porttitor, lorem sed mattis ultrices, lorem risus consequat mi, vitae ullamcorper leo ipsum in tellus. Pellentesque arcu est, sollicitudin sed, ultricies quis, vestibulum a, neque. Duis massa elit, gravida vel, lacinia eu, pretium eget, ipsum. Etiam magna urna, ultrices ut, euismod in, lobortis tempus, ipsum. Fusce risus tellus, interd </div>
<script>
setGradient('example1','#4ddbbe','#d449cc',1);
setGradient('example2','#46ddbd','#d8b617',0);
setGradient('example3','#c81fc1','#bf445f',1);
setGradient('example4','#2285e5','#d769eb',0);
setGradient('example5','#8b4286','#eac87d',1);
setGradient('example6','black','white',0);
</script>

提示：您可以修改部分代码再运行，复制和保存功能在Firefox下无效。

Css+Js打造渐变背景请运行代码预览

上一篇：CSS自适应宽度按钮下一篇：可关闭并且能最大化的用层模拟的视窗

来源：预览网址：请运行代码预览

上一篇：CSS自适应宽度按钮下一篇：可关闭并且能最大化的用层模拟的视窗

共有 1 位酷友发表了评论, 点此查看全部酷友评论(Comments)

添加评论(Add Comments) 不能超过250字，需审核，请自觉遵守互联网相关政策法规。

昵称：论坛注册

服务赞助商

随机显示10条设计素材

Css+Js打造渐变背景

随机图片效果

CSS强制图片自适应大小

如何用CSS自定义鼠标显示的形状？

图片循环滚动代码(无缝滚动)(分别向上

3个最常用的JS时间特效

CSS分页放大效果

纯CSS代码实现翻页

给表格做链接

如何用CSS实现在新窗口打开链接？

酷站 + 代码 + 实用代码 js div css html + 详细内容

来源： 预览网址：请运行代码预览

上一篇：CSS自适应宽度按钮 下一篇：可关闭并且能最大化的用层模拟的视窗

共有 1 位酷友发表了评论, 点此查看全部 酷友评论(Comments)

添加评论(Add Comments) 不能超过250字，需审核，请自觉遵守互联网相关政策法规。

昵称： 论坛注册 密码： 匿名?

服务赞助商

随机显示10条设计素材

来源：预览网址：请运行代码预览

上一篇：CSS自适应宽度按钮下一篇：可关闭并且能最大化的用层模拟的视窗

共有 1 位酷友发表了评论, 点此查看全部酷友评论(Comments)

昵称：论坛注册