`
liudaoru
  • 浏览: 1578737 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

动态模板效果的实现

    博客分类:
  • Ajax
阅读更多

今天偶然去了google一个哥们的网站http://david.tryse.net/googleearth/,内容倒没有太注意,有一个动态选择样式的效果倒很吸引我的注意力。

 

主要代码如下:

function setActiveStyleSheet(title,allframes) {
	var f, i, a;
	for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
		if(a.getAttribute("rel").indexOf("stylesheet") != -1 && a.getAttribute("title")) {
			a.disabled = true; // not doing if/else since IE wont understand turning on a stylesheet without turning it off first..
			if(a.getAttribute("title") == title) a.disabled = false;
		}
	}
	createCookie('style', title, 7);
}

 

主要的逻辑比较简单,首先在页面的head中将所有的样式都写入:

<link rel="alternate stylesheet" href="../dtstylebw.css" title="black n white" type="text/css">
<link rel="stylesheet" href="../dark.css" title="dark" type="text/css">
<link rel="alternate stylesheet" href="../noshadow.css" title="no shadows" type="text/css">
<link rel="alternate stylesheet" href="../dtstyle.css" title="original" type="text/css">

 

然后遍历样式数组,判断是否需要处理(通过title来区别)。接着将样式设置为不可用a.disabled = true,如果是指定的

title则设置为可用。

 

最后的createCookie是为了记录用户的选择。

 

这种方式在文章里看到过,这是第一次看到实用,感觉还不错。就是样式不能太多,否则加载的成本太大。

2
1
分享到:
评论

相关推荐

    html精品动态模板300选9

    例如,一个模板可能包含一个导航栏,它是通过HTML结构、CSS样式和JavaScript实现动态下拉菜单和路由跳转的。在HTML中,我们可能会看到`&lt;nav&gt;`元素和相应的链接;在CSS中,我们将定义样式,如颜色、位置和动画效果;...

    一个基于jquery实现的很漂亮的404动态页面效果(404动态页面模板)

    这个"一个基于jquery实现的很漂亮的404动态页面效果(404动态页面模板)"项目,提供了一种利用jQuery库创建引人注目的404错误页面的方法。jQuery是一个轻量级、功能丰富的JavaScript库,它简化了HTML文档遍历、事件...

    h5动态模板

    通过使用H5动态模板,开发者可以轻松实现动画效果、滑动切换、交互式表单等丰富的用户体验,同时保持代码的简洁和高效。 标签"**h5动态模板**"进一步确认了我们的讨论主题,即与HTML5相关的动态网页模板。这些模板...

    [开源]可视化大数据交互动态模板网页前端模板.zip

    2. **JavaScript**: JavaScript是实现网页动态效果和交互功能的核心语言。通过JavaScript库如D3.js、ECharts或Highcharts,可以将静态的数据转换成生动的图表,同时处理用户与图表的交互,如鼠标悬停显示详情、点击...

    009_模拟可视化大数据交互动态模板网页前端_

    1. **HTML/CSS/JavaScript**: 这是网页前端开发的基础,HTML用于创建网页结构,CSS用于美化页面样式,而JavaScript则是实现动态效果和用户交互的核心语言。在模拟可视化模板中,这三者结合使用,可以创建出丰富的...

    banner动态效果模板加js/css

    标题中的“banner动态效果模板加js/css”表明这是一个关于网页横幅(banner)设计的资源,其中包含了JavaScript和CSS技术来实现动态效果。在网页设计中,动态效果能提升用户体验,吸引用户注意力,通常用于展示广告...

    c# winform客户端 模板打印实现方式1

    本文将深入探讨如何实现模板打印,并提供一种基于源码参考的实现模式。 首先,我们需要理解模板打印的基本概念。模板打印是预先设计好一个打印格式(模板),然后根据业务数据动态填充这个模板,最终完成打印任务。...

    可视化大数据交互动态模板网页前端模板_可视化大数据交互动态模板网页前端模板_

    HTML负责网页结构,CSS用于样式设计,JavaScript则用于实现动态交互功能。此外,可能还会使用到一些特定的前端库和框架,如Bootstrap、jQuery、D3.js、Highcharts等,它们提供了丰富的图表组件和交互功能,使得数据...

    水墨风格ppt动态模板

    【水墨风格PPT动态模板】通过传统中国水墨画的元素,如山水、花鸟、书法等,注入现代动态视觉效果,实现了古典与现代的无缝对接。此类模板的应用,特别适合于那些希望在演讲或展示中展现中华传统文化韵味的场合,...

    bootstrap动态表格模板

    Bootstrap动态表格模板是一种高效、美观且易于实现的前端开发工具,尤其适用于构建具有实时数据交互功能的网页应用。Bootstrap作为一款流行的开源前端框架,提供了一系列预定义的样式、组件和JavaScript插件,使得...

    动态网站模板

    动态网站模板是现代网页设计的重要组成部分,它们利用CSS(层叠样式表)和JS(JavaScript)等技术,为用户提供互动性和动态效果丰富的网页体验。在建站过程中,这些模板可以帮助开发者快速构建功能齐全、视觉吸引的...

    商务动态网页模板

    这些动态效果通常通过JavaScript库如jQuery或者现代Web技术如HTML5和CSS3实现。 在提供的压缩包文件中,我们可以看到以下几个关键部分: 1. **ReadMe.txt**:这是一个常见的文档,通常包含有关模板的安装指南、...

    html + css实现效果jsp登录界面模板.html

    html + css实现效果jsp登录界面模板 源码

    20套大屏可视化交互动态模板网页前端模板

    在大屏可视化中,动态模板能够根据数据的变化实时调整展示效果,如图表的更新、颜色的变化等,增强信息的实时性。 5. **网页模板**:网页模板是一种预先设计好的网页结构,包含样式、布局和可能的交互元素,开发者...

    网页模板——一个基于jquery实现的很漂亮的404动态页面效果(404动态页面模板).zip

    本资源是一个基于jQuery实现的404动态页面模板,这种页面在用户访问不存在的URL时显示,旨在提供一种友好的用户体验,而不仅仅是简单的错误提示。 jQuery是一款广泛使用的JavaScript库,它简化了HTML文档遍历、事件...

    PPT文字动态效果模板.ppt

    在PPT中实现文字动态效果,可以有效地引导观众的注意力,更生动地传达信息,同时也能让演示更加专业和有趣。 在创建PPT文字动态效果时,有几个关键知识点需要掌握: 1. **动画选择**:PPT提供了多种动画样式,如...

    h5动态主页模板h5动态主页模板

    2. **动画效果**:HTML5引入了新的动画和图形处理API,如Canvas和SVG,使得动态效果的实现更加简单。设计师可以利用这些技术制作出平滑的过渡、滚动效果、粒子动画等,增加页面的吸引力。 3. **交互性**:H5动态...

    动态网页模板

    动态图片则可能是通过CSS3的动画效果或者JavaScript库来实现动态加载、过渡效果等,使得页面视觉效果更加生动。 “网页源码”是指动态网页模板的HTML、CSS和JavaScript代码,这些都是构建网页的基础。HTML定义了...

    一个基于jquery实现的很漂亮的404动态页面效果(404动态页面模板).zip

    这个"一个基于jquery实现的很漂亮的404动态页面效果(404动态页面模板).zip"压缩包提供了一个利用jQuery库创建的精美404错误页面模板。jQuery是一款广泛应用于前端开发的JavaScript库,它简化了DOM操作、事件处理、...

    dz模板discuz模板- MW-T系动态discuz X3.1X3.2模板 商业

    设计的一套动态模板,具有现代化的界面设计和交互效果,能够提升用户体验,增加用户粘性。"动态"可能指的是响应式设计,能够自动适应不同设备的屏幕尺寸,如电脑、平板和手机。 4. Discuz! X3.1和X3.2:这两个版本...

Global site tag (gtag.js) - Google Analytics