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

CSS渐变背景

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;
};
}
}
})();

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;}

我们(jb51.net)提供JavaScript/CSS特效代码。

我们各类编程源码、

提供各类编程源码

我们(jb51.net)

jb51.net

我们

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);

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

(0)

相关推荐

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

    CSS渐变背景 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{

  • JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)

    本文实例讲述了JS+CSS实现的漂亮渐变背景特效代码.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <html> <head> <title> JS配合CSS实现的漂亮渐变背景特效6个实例 </title> <script> var setGradient = (function() { var p_dCanvas = document.createElement('canvas'); var p_useCanvas =

  • jquery css 选择器演示代码

    效果如图所示:核心代码: 复制代码 代码如下: <script type="text/javascript"> $('#one').css("background","#fff"); $('div').css("background","#fff"); $('body div').css("background","#bbffaa");//改变body内所

  • php实现的css文件背景图片下载器代码

    本文实例讲述了php实现的css文件背景图片下载器代码.分享给大家供大家参考.具体实现方法如下: 下载css文件里面的背景图片是我们这些盗版份子长期搞的事情,下载个css图片下载器常出现各种广告弹窗,实在扛不住.这里就提供了一个php版的css文件背景图片下载器给大家. 把文件放到php程序目录 dos下面 php.exe cssImages.php 0 http://www.xxxx.com/css/style.css \images\ 先在php程序目录建个images文件夹,呵呵,贴代码:

  • JS实现带圆弧背景渐变效果的导航菜单代码

    本文实例讲述了JS实现带圆弧背景渐变效果的导航菜单代码.分享给大家供大家参考.具体如下: 这是一款效果个性的JS+CSS导航菜单,鼠标经过时出现有趣弧形背景,实际上,这里用CSS调用了背景,用JavaScript控制了背景的移动,用jQuery实现过类似的功能,整体感觉很不错. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-cicle-cha-nav-menu-demo/ 具体代码如下: <!DOCTYPE html PUBLIC

  • JS+DIV+CSS实现的经典标签切换效果代码

    本文实例讲述了JS+DIV+CSS实现的经典标签切换效果代码.分享给大家供大家参考.具体如下: 这里演示JS+DIV+CSS实现的标签切换效果代码,通俗说就是滑动门的实现效果,很不错的实例,希望对你学习JS+CSS布局有帮助. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-div-css-bq-cha-tab-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML

  • JS+CSS实现简易的滑动门效果代码

    本文实例讲述了JS+CSS实现简易的滑动门效果代码.分享给大家供大家参考.具体如下: 看了很多的滑动门和滑动菜单的资料,总算写出来了一个像样的滑动门,虽然外观不怎么样,但可以兼容火狐,还请老前辈们不要笑话,以后有好多西再请大家批评. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-simple-hdtx-demo-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1

  • JS+CSS实现的经典tab选项卡效果代码

    本文实例讲述了JS+CSS实现的经典tab选项卡效果代码.分享给大家供大家参考.具体如下: 这是一款经典的JavaScript+CSS tab选项卡代码,由以前的一款改写而成,自认为不错的东西,发上来分享吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-jd-tab-cha-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio

  • JS+CSS实现仿支付宝菜单选中效果代码

    本文实例讲述了JS+CSS实现仿支付宝菜单选中效果代码.分享给大家供大家参考.具体如下: 这是一个漂亮的JS+CSS仿支付宝菜单,总体风格和形式与支付宝的菜单没什么两样,细心会发现这是一个CSS爱好者自己手功完成的,自己美化图片,重写CSS代码,为作者给我们奉献这么好的菜单而表示感谢. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-f-alipay-style-menu-codes/ 具体代码如下: <!DOCTYPE html

  • JS+CSS实现仿msn风格选项卡效果代码

    本文实例讲述了JS+CSS实现仿msn风格选项卡效果代码.分享给大家供大家参考,具体如下: 这是一款来自MSN网站的选项卡,清新淡蓝色风格,新闻类.资讯类.文章类网站都比较适合使用,代码扩展性高,W3C标准设计,兼容IE.火狐等多种浏览器,整体效果非常不错. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-f-msn-style-menu-demo/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C/

随机推荐