CSS 渐变背景的6个演示代码- Javascript

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > CSS 渐变背景的6个演示代码

Javascript: 给初学者提供几本学习js值得看的书; Javascript----文件操作; Vml+Js算法:完成5个小球在网页运动(碰壁返回)的游戏,详细注释; Vml+Dhtml:制作一个应用渐变颜色效果不错的进度条; Dhtml+Js算法:5个小球运动的简化版,变通实现更简单的飞行的图片; Vml+Dhtml:小小的页面效果,叫它"淘气鬼"好了; 判断客户浏览器是否支持cookie; 几种常用的表单输入判断; CSDN无限级树数据库版(ASP+ACCESS); JavaScript 寫遊戲 : 俄羅斯方塊; JavaScript 寫遊戲 : 搬吖; JavaScript 遊戲 : 貪吃蛇; JavaScript 寫時鍾日曆; VML:经典的图片叠加效果(灰色调); 一个简单的仿xp的js下拉菜单; JScript 寫 sortNode; 关于javascript中数组元素删除问题的讨论; IE中非模式对话框(showModelessDialog)应用; Dhtml:用ondrag事件简单的实现鼠标拖动物件.; 对WebUI技术感兴趣的说

No. « ‹ 7 8 9 10 › »

技术文章搜索

关键字

Javascript 中的 CSS 渐变背景的6个演示代码

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-01-10 浏览: 108 ::

收藏到网摘: n/a

百度用到的Js日历大家可以看看 Jquery 弹出层插件实现代码

CSS渐变背景的六个示例，个人觉得这是非常实用的一个常用技巧，不使用任何图片实现Div背景渐变，而且兼容IE和FF2，以后想要类似的效果，可有的参考了。

<!doctype html public '-//w3c//dtd html 4.01//en' 'http://www.w3.org/tr/html4/strict.dtd'>
<html>
<head>
<meta http-equiv=content-type content="text/html; charset=gbk">
<title>CSS渐变背景</title>
<script>
var setGradient = (function(){ 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;
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; 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; }; } }
})();
</script>
<style>
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>
<body>
<div id="example1" class="example">软晨学习网（ruanchen.com）提供JavaScript/CSS特效代码。</div>
<div id="example2" class="example">软晨学习网各类编程源码、 </div>
<div id="example3" class="example">提供各类编程源码</div>
<div id="example4" class="example">软晨学习网（ruanchen.com） </div>
<div id="example5" class="example">ruanchen.com </div>
<div id="example6" class="example">软晨学习网 </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>
</body>
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

百度用到的Js日历大家可以看看 Jquery 弹出层插件实现代码

Javascript 中的 CSS 渐变背景的6个演示代码

评论 (0) All