javaScript和css的交互

YY…

已于 2022-03-04 17:39:27 修改

阅读量552

点赞数 9

文章标签： css javascript 交互

于 2022-03-04 17:33:01 首次发布

本文链接：https://blog.csdn.net/m0_64043477/article/details/123281279

版权

前言：欢迎小伙伴们再次进入YY的小小课堂，咱们今天就继续来探讨 js 与 css 的奥秘吧！

目录：

一.使用 style 属性制作菜单特效

二.使用 className 属性制作菜单特效

三.使用 scrollTop 制作随鼠标滚动的广告图片

本堂课新单词：

1.onclick : 点击事件

2.ondblclick ：点击事件

3.onmouseover ：鼠标移入

4.onmouseout ：鼠标移出

5.onmousemove ：鼠标移动

6.onmousedown : 按下鼠标

7.HTMLCollection ：html集合

一.使用 style 属性 制作菜单特效：

1.样式表的基本语法：（3种）

~ 标签选择器

~ ID选择器

~ 类选择器

2.常见样式：

主要分为：文本属性，背景属性，边框属性，边界属性

填充属性，浮动属性，列表属性，定位属性

—— 如何动态改变页面元素的样式？

1. 使用 getElement 系列方法访问元素

2. 改变样式属性：

-- style属性

-- className属性

3.在 <head> 与 </head> 标签之间的 style 样式 :

—— 完善菜单特效：（思路分析）

1.设置项目列表的初始状态

2.使用document.getElementByTagName("li") 来获取所有<li>标签

4.使用style属性制作菜单特效（举例）：

下面代码中的 fn1（）使用的就是 style属性

具体代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.a{
				border: 10px solid green;
				box-shadom:0px 0px 10px yellow;
			}
		</style>
	</head>
	<body>
		<img id="m1" src="img/1.gif" >
		<img id="m2" src="img/2.gif" >
		<img id="m3" src="img/3.gif" >
		<p>
			<button type="button" onclick="fn1()">点我添加边框</button>
			<button type="button" onclick="fn2()">点我添加边框</button>
			<button type="button" onclick="fn3()">点我添加边框</button>
		</p>
		<script type="text/javascript">
			function fn1(){
				// 操作css的第一种方式 ： 直接操作 style
				m1.style.border="5px solid black"
				m1.style.width="40px"
				m1.style.opacity=.5
			}
			function fn2(){
				m2.setAttribute("class","a")
			}
			function fn3(){
				// class 是关键字
				// 标签中的class属性在js中都叫做className
				m3.className="a"
			}
		</script>
	</body>
</html>

运行结果如下图所示：

二.使用 className 属性 制作菜单特效：

下面代码中 fn2（）和 fn3（）使用的就是 className属性

详细代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.a{
				border: 10px solid green;
				box-shadom:0px 0px 10px yellow;
			}
		</style>
	</head>
	<body>
		<img id="m1" src="img/1.gif" >
		<img id="m2" src="img/2.gif" >
		<img id="m3" src="img/3.gif" >
		<p>
			<button type="button" onclick="fn1()">点我添加边框</button>
			<button type="button" onclick="fn2()">点我添加边框</button>
			<button type="button" onclick="fn3()">点我添加边框</button>
		</p>
		<script type="text/javascript">
			function fn1(){
				// 操作css的第一种方式 ： 直接操作 style
				m1.style.border="5px solid black"
				m1.style.width="40px"
				m1.style.opacity=.5
			}
			function fn2(){
				m2.setAttribute("class","a")
			}
			function fn3(){
				// class 是关键字
				// 标签中的class属性在js中都叫做className
				m3.className="a"
			}
		</script>
	</body>
</html>

运行结果如下：

三.使用 scrollTop 制作随鼠标滚动的广告图片：

（举例）：

——如果想要页面中的图片可以 随着鼠标的滚动而滚动，还想要制作带 关闭按钮 的滚动广告，那么可以参考以下代码：

（注意：代码中会用到绝对布局，绝对布局的作用就是可以随便调整位置，还有其中的注释我们可以换成块注释，不然运行结果会不一样哦！）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				border:2px solid black;
				/* 绝对 布局的特点：可以随便调整位置 */
				position:absolute;
				/* top bottom left right */
				right:20px;
				top:40px;
				transition: .1s;
			}
		</style>
	</head>
	<body>
		<div id="ad">
			<button type="button" onclick="ad.style.display='none'">x</button>
			<br>
			<img src="img/5.gif" >
		</div>
		<p>拼多多，拼的多省得多</p>
		<p>拼多多，拼的多省得多</p>
		<p>拼多多，拼的多省得多</p>
		<p>拼多多，拼的多省得多</p>
		<p>拼多多，拼的多省得多</p>
		<p>拼多多，拼的多省得多</p>
		<p>拼多多，拼的多省得多</p>
		<p>拼多多，拼的多省得多</p>
		<p>拼多多，拼的多省得多</p>
		<p>拼多多，拼的多省得多</p>
		<p>拼多多，拼的多省得多</p>
		<p>拼多多，拼的多省得多</p>
		<p>拼多多，拼的多省得多</p>
		<p>拼多多，拼的多省得多</p>
		<p>拼多多，拼的多省得多</p>
		<p>拼多多，拼的多省得多</p>
		<p>拼多多，拼的多省得多</p>
		<p>拼多多，拼的多省得多</p>
		<p>拼多多，拼的多省得多</p>
		<p>拼多多，拼的多省得多</p>
		<p>拼多多，拼的多省得多</p>
		<p>拼多多，拼的多省得多</p>
		<p>拼多多，拼的多省得多</p>
		<p>拼多多，拼的多省得多</p>
		<script type="text/javascript">
			// 窗口的滑动事件
			window.onscroll=()=>{
				// 获得到窗口滚动的距离 scrollTop
				ad.style.top=40+document.documentElement.scrollTop+"px"
			}
		</script>
	</body>
</html>

运行结果如下图：

~~~~scrollTop , scrollLeft 属性

获取滚动条在窗口中滚动的距离：

document.documentElement.scrollTop;

document.documentElement.scrollLeft;

——图片之放大镜效果：

如果想要图片拥有放大的效果，那么可以参考以下代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width:300px;
				height:300px;
				background: pink;
				position:absolute;
				/* 设置事件全部无效 */
				pointer-events:none;
				display:none;
			}
		</style>
	</head>
	<body>
		<img id="m1" src="img/1.gif" >
		<div id="div">
			<script type="text/javascript">
				// onclcik 点击事件
				// ondblclick 点击事件
				// onmouseover 鼠标移入事件
				// onmouseout 鼠标移出事件
				// onmousemove 鼠标移动事件
				
				m1.onmouseover=function(){
					div.style.display="block";
				}
				m1.onmouseout=function(){
					div.style.display="none";
				}
				m1.onmousemove=(e)=>{
					// 需要事件对象 Event
					console.log(e.clientX,e.clientY)
					div.style.left=e.clientX-50+"px"
					div.style.top=e.clientY-50+"px"
					div.style.background="url("+m1.src+") center/cover"
				}
			</script>
		</div>
	</body>
</html>

运行结果如下：

真的都看完了吗？nice

那么我们下次再见！！！

YY…

关注

9
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
javaScript和css的交互

前言：欢迎小伙伴们再次进入YY的小小课堂，咱们今天就继续来探讨 js 与 css 的奥秘吧！目录：一.使用 style 属性制作菜单特效二.使用 className 属性制作菜单特效三.使用 scrollTop 制作随鼠标滚动的广告图片本堂课新单词： 1.onclick : 点击事件 2.ondblclick ：点击事件 ...
复制链接

扫一扫