JavaScript 第五章 JavaScript控制CSS
注意:各案例素材已提供下载
1、技术目标
- 使用style属性制作菜单特效
- 使用className属性制作菜单特效
- 使用scrollTop制作随鼠标滚动的广告图片
2、CSS选择器类型
- 标签选择器
- ID选择器
- 类选择器
3、JavaScript如何操作样式?
通过元素的两个常用属性可操作样式:
- style 属性,语法:元素对象.style.样式属性 = "值"
- className 属性,语法:元素对象.className = "类样式名"
4、元素的常用事件
一般样式会由元素的事件触发而改变,先了了解下元素的常用事件,
名称 描述
====================================
onclick 当用户单击某个对象时调用事件
onmouseover 鼠标移到某元素之上
onmouseout 鼠标从某元素移开
onmousedown 鼠标按钮被按下
5、制作菜单特效
效果描述:
当鼠标移动菜单上时,改变菜单样式,使其背景发生变化
鼠标移出菜单时恢复为原来的样式
效果图:
要实现该效果,可以考虑两种方案,
方案1:使用style属性
方案1,示例代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>使用style改变样式</title> <style type="text/css"> li{ font-size: 12px; color: #ffffff; background-image: url(images/bg1.gif); background-repeat: no-repeat; text-align: center; height: 33px; width:104px; line-height:38px; float:left; list-style:none; } </style> </head> <body> <ul> <li>资讯动态</li> <li>产品世界</li> <li>市场营销</li> </ul> <script type="text/javascript"> var len=document.getElementsByTagName("li"); for(var i = 0; i < len.length; i++){ //设置鼠标事件处理函数 len[i].onmouseover = function(){ //鼠标移入列表项时,改变背景图片 this.style.backgroundImage = "url(images/bg2.gif)"; } len[i].onmouseout = function(){ //鼠标移出列表项时,改变背景图片 this.style.backgroundImage = "url(images/bg1.gif)"; } } </script> </body> </html>
方案2:使用className属性
方案2,示例代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>使用className改变样式</title> <style type="text/css"> li{ font-size: 12px; color: #ffffff; background-image: url(images/bg1.gif); background-repeat: no-repeat; text-align: center; height: 33px; width:104px; line-height:38px; float:left; list-style:none; } /*鼠标移出列表项的样式*/ .out{ background-image: url(images/bg1.gif); } /*鼠标移入列表项的样式*/ .over{ background-image: url(images/bg2.gif); color:#ffff00; font-weight:bold; cursor:hand; } </style> </head> <body> <ul> <li>资讯动态</li> <li>产品世界</li> <li>市场营销</li> </ul> <script type="text/javascript"> var len = document.getElementsByTagName("li"); for(var i = 0;i < len.length; i++){ len[i].onmouseover = function(){ this.className = "over"; } len[i].onmouseout = function(){ this.className = "out"; } } </script> </body> </html>
6、制作页面小广告特效
效果描述:
广告图片总是显示在页面上方,并且随滚动条同步移动,还提供
一个关闭广告的操作
效果图:
实现方案:
- 把广告图片放在一个div中,设置div总是显示在页面的上方
- 使用getElementById()方法获取层对象,并且获取层在页面上的初始位置
- 根据鼠标滚动事件,获取滚动条滚动的距离
- 随着滚动条的移动改变广告图片层在页面上的位置
示例代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>带关闭按钮的滚动广告</title> <style type="text/css"> #main{ text-align:center; } #float{ position: absolute; width: 117px; height: 150px; left: 30px; top: 60px; z-index: 1; background-image: url(images/advpic.jpg); text-align: right; } #close{ cursor:hand; } </style> <script type="text/javascript"> var floatTop;//广告图片div初始上边距 var flostLeft;//广告图片div初始左边距 var floatObject;//广告图片div对象 /* 功能:关闭广告图片div */ function adv_close(){ document.getElementById("float").style.display="none"; } /* 功能:保存广告图片div初始上边距和初始左边距 */ function place(){ //获取广告图片div对象 floatObject = document.getElementById("float"); //保存广告图片div初始上边距和初始左边距 if(floatObject.currentStyle){//IE浏览器 floatTop=parseInt(floatObject.currentStyle.top); floatLeft=parseInt(floatObject.currentStyle.left); }else{//fireFox浏览器 floatTop=parseInt(document.defaultView.getComputedStyle(floatObject,null).top); floatLeft=parseInt(document.defaultView.getComputedStyle(floatObject,null).left); } } /* 功能:窗口滚动事件处理函数 */ function roll(){ floatObject.style.top=floatTop+parseInt(document.documentElement.scrollTop) + "px"; floatObject.style.left=floatLeft+parseInt(document.documentElement.scrollLeft) + "px"; } window.onload = place; //滚动事件处理 window.onscroll = roll; </script> </head> <body> <div id="float"> <div id="close" onClick="adv_close()"><img src="images/close.jpg"></div> </div> <div id="main"><img src="images/contentpic.jpg"></div> </body> </html>
7、页面小广告特效代码关键点
获得层的样式对象:
- currentStyle,IE中使用,语法:
层对象.currentStyle; - getComputedStyle(),fireFox中使用,语法:
document.defaultView.getComputedStyle(层对象,null);
如何获取滚动条滚动的距离呢?使用如下样式属性
属性 描述
=============================================
scrollTop 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollLeft 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间
的距离
clientWidth 浏览器中可见内容的高度,不包括滚动条等边线,会随窗口的显示
大小改变
clientHeight 浏览器中可以看到内容的区域的高度
JavaScript 第四章 DOM编程提升
相关推荐
1基于蓝牙的项目开发--蓝牙温度监测器.docx
AppDynamics:性能瓶颈识别与优化
xtrabackup银河麒麟v10rpm安装包
2024年全球产品经理大会(脱敏)PPT合集,共34份。 1、AI 原生产品设计的 7 个反共识 2、AI 时代的策略产品与内容社区推荐实践 3、AI时代的用户界面设计 4、AI智能陪练:大模型赋能销售成长 5、AI浪潮中的应用主义者 6、AI驱动下的B端产品的思考与创新 7、AI驱动业务增长的探索与实践 8、Al Native 生产力工具的发展、价值与商业落地 9、B端产品设计避坑指南 10、GenAl驱动的xGen电商AI平台产品实践与思考 11、Kwaipilot 在快手的落地实践 12、OPPO AI的探索新交互到新生态 13、RPA + AI打造大模型驱动的领先数字员工 14、产品AI化重塑的思考与实践 15、产品分析:通过关键指标助力团队与企业成功 16、从RPA到Al Agent,高价值、可落地的智能助手 17、从流量运营到AI驱动的机器增长 18、做穿越时代的产品 19、创造好工具,创造世界一流产品力 20、医疗健康场景的大模型产品探索 21、即时零售柔性供应链体系建设与AIGC在零售数字化的探索 22、向量数据库的出海实践与未来展望 23、大模型在B端落地思考实践
基于物联网技术的停车场智能管理系统设计用户有单独APP
Adobe XD:AdobeXD高级技巧与最佳实践.docx
ARKit(iOS的增强现实):ARKit的多人AR场景实现
1python自动化脚本.docx
河北省、市、区县及街镇可编辑SVG图
金融工程之量化交易算法:均值回归:时间序列分析与预测.docx
技术资料分享ADV7123非常好的技术资料.zip
Sawmill_cn.ppt
使用LabVIEW输入数字n,然后计算n的阶乘
1无人值守灌溉系统--stm.docx
金融工程之量化交易算法:动量交易:金融数据获取与处理.docx
基于SSM的毕业设计源码
头像图片调试使用用来调试
GITS_sawmill8.5.8.1_x64_linux-ubuntu11.tar.gz
Newspaper 是一个专为新闻、杂志和内容丰富网站设计的 WordPress 主题。它非常适合博客、在线出版和内容展示,具备多种强大功能。以下是 Newspaper 的主要特点: 响应式设计:确保网站在各种设备上(手机、平板、桌面)都能良好显示,优化用户体验。 丰富的预建模板:提供多个专业设计的预建布局和页面模板,用户可以快速导入并根据需求进行修改。 强大的页面构建器:内置的 TagDiv Composer 允许用户通过拖放功能轻松创建和自定义页面,无需编写代码。 SEO 优化:主题经过优化,有助于提升网站在搜索引擎中的排名,增加流量。 多种内容展示选项:提供多种文章格式和布局选项,如网格、列表、视频和画廊,方便展示不同类型的内容。 社交媒体集成:支持社交媒体分享功能,帮助用户轻松与观众互动并提高网站的曝光度。 实时自定义:支持实时预览功能,用户可以在更改设置时即时查看效果。 持续更新和支持:定期更新主题,确保用户获得最新功能和安全性,同时提供专业的技术支持。
国内市场:功能化脂质市场现状研究分析与发展前景预测报告(2024版).docx