`
bulote
  • 浏览: 1353863 次
文章分类
社区版块
存档分类
最新评论

Js控制css——模仿视频网站关灯开灯

 
阅读更多

<head>
<wbr><wbr><wbr> &lt;title&gt;&lt;/title&gt;<br><wbr><wbr><wbr> &lt;style type="text/css"&gt;<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr> .day<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr> {<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> background-color:White;<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr> }<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><br><wbr><wbr><wbr><wbr><wbr><wbr><wbr> .night<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr> {<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> background-color:Black;<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr> }<br><wbr><wbr><wbr> &lt;/style&gt;<br><wbr><wbr><wbr> &lt;script type="text/javascript"&gt;<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr> function SwitchLight() {<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> var btn = document.getElementByIdx_x("btnChange");</wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>

<wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> if (<strong>document.body</strong>.<span style="color:#ed1c24"><strong>className</strong></span> == "night") {<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> document.body.className = "day";<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> btn.value = "关灯";<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> }<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> else if (document.body.className == "day") {<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> document.body.className = "night";<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> btn.value = "开灯";<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr> }<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr> }<br><wbr><wbr><wbr> &lt;/script&gt;<br> &lt;/head&gt;<br> &lt;body class="night"&gt;<br><wbr><wbr><wbr> &lt;input id="btnChange" type="button" value="开灯" onclick="SwitchLight()" /&gt;<br> &lt;/body&gt;</wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>

分享到:
评论

相关推荐

    css3+jQuery开灯关灯动画代码.rar

    css3+jQuery开灯关灯动画代码.rar css3+jQuery开灯关灯动画代码.rar css3+jQuery开灯关灯动画代码.rar css3+jQuery开灯关灯动画代码.rar css3+jQuery开灯关灯动画代码.rar css3+jQuery开灯关灯动画代码.rar css3+...

    jquery视频网站背景关灯开灯效果代码

    在网页设计中,为了提供更好的用户体验,特别是在观看视频时,许多网站会采用“关灯”或“开灯”效果。这种效果允许用户在观看视频时将网页其他部分暗化,焦点集中在视频上,减少视觉干扰。`jQuery`库提供了一个简单...

    js+css3灯泡开关开灯关灯黑白切换特效.zip

    《JS与CSS3实现灯泡开关的开灯关灯及黑白切换特效》 在Web开发领域,JavaScript(JS)和CSS3是两个不可或缺的技术,它们共同构建了网页的动态交互和视觉效果。在这个名为"js+css3灯泡开关开灯关灯黑白切换特效.zip...

    jQuery点击开关按钮视频网站背景开灯关灯代码

    这篇文章将深入探讨“jQuery点击开关按钮视频网站背景...通过以上知识点的综合运用,我们可以创建一个功能完善的视频网站背景开灯关灯功能,提升用户体验。理解并掌握这些技术对于任何Web开发者来说都是重要的技能。

    jQuery点击开关按钮视频网站背景开灯关灯代码.zip

    这个名为"jQuery点击开关按钮视频网站背景开灯关灯代码.zip"的压缩包提供了一套实现视频网站背景开灯关灯效果的jQuery代码。下面将详细介绍这个项目中的关键知识点。 首先,`jquery.allofthelights.css`是样式表...

    css3+jQuery开灯关灯动画代码-haiyong.zip

    css3+jQuery开灯关灯动画代码-haiyong.zip 是一个包含 CSS3 和 jQuery 实现的开灯关灯动画效果的代码资源包。该资源包提供了一种简单而优雅的方式来为网页元素添加开关灯效果,增强了用户体验和交互性。 适用人群:...

    好看table样式 好看的CSS——Table样式表

    网络上收集的css table样式 好看table样式 好看的CSS——Table样式表

    简单的css——simplecss

    **简单的CSS——SimpleCSS** CSS(层叠样式表)是一种用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档样式的语言。在网页设计中,CSS扮演着至关重要的角色,它允许我们将表现(样式)与内容(HTML结构)...

    后台管理系统css——《后台管理系统》同款

    后台管理系统css——《后台管理系统》同款

    CSS——Cascading Style Sheets

    CSS——Cascading Style Sheets 层叠样式表 作用 定义了HTML元素怎样去显示 一般存储在样式表中 也可以存储在外部样式文件.css文件中

    网页开灯关灯的应用

    网页开灯关灯的应用是一种常见的用户体验优化功能,尤其在观看视频或者阅读内容时,用户可以根据环境光线调整网页的亮度,创造出更加舒适的浏览环境。在这个简单的应用中,我们主要涉及到的知识点包括HTML、CSS以及...

    Jquery实现视频播放页面的关灯开灯效果

    JQuery实现视频播放页面的关灯开灯效果是网页前端交互设计的一个小案例,主要通过JQuery库对页面中的元素进行控制,实现动态的视觉效果。在这个案例中,通过点击一个开关按钮,页面背景会变成半透明,模拟“开灯”和...

    jQuery+CSS3黑夜开灯关灯动画特效.zip

    《jQuery+CSS3实现黑夜开灯关灯动画特效详解》 在网页设计中,动态效果是提升用户体验的重要手段。本文将深入探讨如何利用jQuery和CSS3实现一款极具创意的“黑夜开灯关灯”动画特效,该效果可以为网页增添独特的...

    计算机毕业设计HTML+CSS+JavaScript——基于HTML花店购物网站项目与实现.md

    - **项目名称**: HTML+CSS+JavaScript —— 基于HTML的花店购物网站项目与实现 - **项目目标**: 作为计算机专业学生的毕业设计或者HTML5期末考核大作业,该项目旨在帮助学生掌握基本的前端开发技能,包括HTML、CSS...

    HTML CSS——position学习终结者(二).zip

    `position`属性是CSS中一个至关重要的概念,它控制着元素在页面上的定位方式。在这个“HTML CSS——position学习终结者(二)”的资料中,我们预计将深入探讨`position`的各种用法和技巧。 首先,`position`属性用于...

    animate.css——页面动画

    animate.css

    用HTML+CSS做一个漂亮简单的旅游网站——旅游网页设计与实现(6页)HTML+CSS+JavaScript

    ### 一、旅游网站设计与实现的关键知识点 #### 1.1 HTML5基本结构与语义化标签的应用 - **HTML5文档结构**: 每个HTML5文档必须以`&lt;!DOCTYPE html&gt;`声明开始,接着是`&lt;html&gt;`标签,其中包含`&lt;head&gt;`和`&lt;body&gt;`两个...

    基于HTML电商购物项目的设计与实现——html+css+javascript+jquery+bootstarp响应式图书商城

    ### 基于HTML电商购物项目的设计与实现——html+css+javascript+jquery+bootstrap响应式图书商城 #### 一、项目概述 本项目旨在通过HTML、CSS、JavaScript、jQuery以及Bootstrap等技术来构建一个完整的响应式电子...

    云台控制器+css+jQuery+canvas

    在本文中,我们将深入探讨如何使用CSS、jQuery和canvas技术来创建一个云台控制器,尤其关注前端开发中的八方位云台控制。云台控制器通常用于无人机、监控摄像头或其他需要远程调整视角的设备,使得用户可以通过界面...

    网页模板——Vue.js圆形CSS3颜色渐变色拾取器.zip

    在这个“网页模板——Vue.js圆形CSS3颜色渐变色拾取器”项目中,我们可以深入探讨Vue.js如何与CSS3技术结合,创建一个动态的颜色选择工具。 首先,Vue.js的核心在于其响应式数据绑定系统。通过使用`v-model`指令,...

Global site tag (gtag.js) - Google Analytics