style.js
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;
};
}
}
})();
a.html
<script>
function style(){
setGradient('body1','#b0d6f1','#8ebfeb',0);
//容器ID，开始颜色，结束颜色，0=垂直1=水平
}
</script>
<body id="body1" onload="style()">
</body>
分享到：
相关推荐
CSS3引入了许多新特性，如盒子模型改进、边框半径、渐变、阴影、动画和过渡效果，以及媒体查询实现响应式设计。 3. **JavaScript**：JavaScript是一种动态编程语言，用于实现网页的交互性和动态功能。它可以在用户...
CSS3引入了多个新模块，如选择器（如:nth-child()、:not()等），多列布局，媒体查询（实现响应式设计），动画和过渡效果，以及阴影和渐变等视觉效果。CSS3的模块化设计允许开发者根据需求选择性地使用新特性，提高了...
CSS3带来了更多高级功能，如渐变、阴影、动画、过渡和变形，使得网页视觉效果更丰富。响应式设计（Responsive Design）也是CSS3的一个重要特性，允许网页根据设备屏幕尺寸自动调整布局。 JavaScript是一种客户端...
CSS3引入了更多的选择器（如类选择器、属性选择器），以及边框、阴影、渐变等特效。此外，CSS3还支持媒体查询，允许根据设备特性（如屏幕尺寸）应用不同的样式，从而实现响应式设计，确保在不同设备上的良好显示。 ...
比如，边框半径（border-radius）可以创建圆角，阴影效果（box-shadow和text-shadow）为元素添加立体感，背景渐变（linear-gradient和radial-gradient）以及多背景层都是CSS3的亮点。新的选择器（如nth-child和...
CSS3引入了更多的新特性，如渐变、阴影、动画、媒体查询等，使得网页设计更加丰富多彩。 这份资料的PPT课件可能涵盖了这三个领域的基础知识，从基础语法到实际应用，帮助学习者系统地理解和掌握这些技术。课堂练习...
CSS预处理器如Sass、Less可以帮助编写更简洁、模块化的CSS代码，而JavaScript库和框架如jQuery、React、Vue.js和Angular则提供了更高级的功能，如组件化开发，状态管理，以及帮助开发者更轻松地处理浏览器兼容性问题...
压缩包内的“DIV+CSS浏览器兼容方法的总结.doc”文件很可能是篇详细的教程，涵盖了如何处理常见浏览器（如IE、Firefox、Chrome、Safari等）之间的CSS差异，包括但不限于浮动布局、定位、边距重叠、盒模型差异、透明...
动态网页设计与制作是互联网开发领域中的核心技能之一，它涉及到HTML5、CSS3和JavaScript等关键技术。这些技术的结合使得网页不仅具有丰富的视觉效果，还能实现交互性和动态功能。以下将详细介绍这些知识点： HTML5...
CSS3是最新版本，它带来了更多高级功能，如盒阴影（`box-shadow`）、渐变（`linear-gradient`、`radial-gradient`）、多列布局（`columns`）和媒体查询（`media queries`）用于响应式设计。 JavaScript是一种强大的...
CSS选择器允许开发者精准地选取需要改变样式的元素，而CSS3引入的更多新特性，如阴影、渐变、动画等，进一步增强了网页的视觉效果。 JavaScript在其中起到了关键的交互作用，它可以让网页动态响应用户的操作，如...
在JavaScript的基础上，我们还需要了解CSS2和CSS3，它们是用于网页样式的语言。 CSS2（层叠样式表2）是CSS的第二个主要版本，它极大地扩展了CSS1的功能，引入了浮动元素、定位、多列布局、背景图像和边框等特性。...
8.3 使用渐变背景 226 8.4 边框相关属性 239 8.5 使用opacity控制透明度 246 8.6 padding和margin相关属性 247 8.7 本章小结 249 第9章 大小、定位、轮廓相关属性 250 9.1 width、height相关属性 251 9.2 ...
**JS+CSS Fancy Menu**是一种使用JavaScript和CSS技术创建的高级导航菜单，它以其流畅的交互性和独特的视觉效果而受到广泛关注。在网页设计中，菜单是用户与网站交互的重要元素，一个美观且易于使用的菜单可以极大地...
另外，CSS3还增加了许多视觉效果，如阴影、渐变、动画和过渡，增强了网页的视觉吸引力。 JavaScript是一种轻量级的解释型编程语言，主要用于网页和用户的交互。在HTML5的推动下，JavaScript的功能得到了极大的扩展...
8. W3C标准和浏览器兼容性：遵循W3C标准编写代码，同时考虑不同浏览器之间的差异，确保网页在各主流浏览器上的正常显示。 这个HTML大作业不仅是一份完成的项目，也是一个学习资源，可以帮助初学者理解HTML、CSS和...
本文主要介绍了一种使用JavaScript（JS）和层叠样式表（CSS）相结合的方法，来实现鼠标感应的渐变显示和隐藏DIV层的效果。 首先，我们来理解一下核心的HTML结构。在这个例子中，我们有一个ID为"tip"的DIV元素，它是...
JavaScript（JS）是实现动态效果的关键。在这个表白神器中，JS可能被用来处理用户交互，如点击按钮后弹出动画、播放背景音乐，甚至显示计时器来制造紧张感。例如，JS可以控制一个计时器从999到0倒计时，象征着“永恒...
CSS3引入了许多新的特效，如渐变、阴影、动画和过渡。例如，`transition`属性可以实现元素状态改变时的平滑过渡，而`animation`则可以创建复杂的动画效果。 结合这三者，可以创建各种令人印象深刻的特效。比如，...
HTML5和CSS3是现代网页开发的两大核心技术，它们为创建功能丰富、视觉效果出色的移动商城提供了强大的支持。...在实践中，还需要考虑到浏览器兼容性、安全性以及性能调优等多个方面，以提供最优质的在线购物体验。