javaScript和css交互

最新推荐文章于 2024-11-15 16:45:38 发布

「已注销」

最新推荐文章于 2024-11-15 16:45:38 发布

阅读量899

点赞数 1

文章标签： css javascript html

本文链接：https://blog.csdn.net/qq_64164870/article/details/123413359

版权

本文通过三段代码展示了网页图片的三种交互效果：1.如何为图片添加边框，包括边框颜色、宽度和阴影；2.利用scrollTop实现随鼠标滚动的广告图片效果；3.创建放大镜效果，当鼠标移动到图片上时显示放大部分，并跟随鼠标移动。这些效果都是网页动态视觉设计的基础元素，能提升用户体验。

摘要由CSDN通过智能技术生成

1.如何给图片加边框

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
           <style>
           .a{
               border:5px solid green;
               box-shadow:0px 0px 50px yellow;
           }

           </style>
   </head>
   <body>
       <img id=m1 src="img/1.webp" width=200px height=150px alt="" >
       <img id=m2 src="img/2.webp" width=250px height=150px alt="">
<img id=m3 src="img/3.webp" width=200px height=150px alt="">
       <p>
           <button οnclick="fn1()">点击添加边框</button>
           <button οnclick="fn2()">点击添加边框</button>
           <button οnclick="fn3()">点击添加边框</button>

       <p>
   <script>
   function fn1(){
       //操作css的第一种方式: 直接操作style
       m1.style.border="5px solid red"
       m1.style.width="300px"
       m1.style.height="250px"
       m1.style.opacity=.5
   }
   function fn2(){
       m2.setAttribute("class","a")
   }
       function fn3(){
           //class是关键字
           //标签中的class属性在js中都叫做className
           m3.className="a"
       }
       </script>

   </body>
</html>

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				border:1px solid black;
				/*绝对布局的特点：可以随便调整位置*/
				position:absolute;
				/*top bottom left right */
				right:20px;
				top:150px;
				transition:.1s;
			}
			</style>
	</head>
	<body>
		<div id="gg">
			<button onclick="gg.style.display='none'">x</button>
			<br>
			<img src="img/2.webp" width=250px height=150px alt="">
</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>
		<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>
		<p>欢迎欢迎欢迎欢迎</p>
		<p>欢迎欢迎欢迎欢迎</p>
		<p>欢迎欢迎欢迎欢迎</p>
		<p>欢迎欢迎欢迎欢迎</p>
		<p>欢迎欢迎欢迎欢迎</p>
		<p>欢迎欢迎欢迎欢迎</p>
		<p>欢迎欢迎欢迎欢迎</p>
		<p>欢迎欢迎欢迎欢迎</p>
		<p>欢迎欢迎欢迎欢迎</p>
		<p>欢迎欢迎欢迎欢迎</p>
		<script>
			//窗口的滑动事件
		window.onscroll=()=>{
			//获取到窗口滚动的距离 scrollTop
			gg.style.top=150+document.documentElement.scrollTop+"px"
		}
			
			</script>
	</body>
</html>

3.实现图片放大效果

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style>
       div{
           width:600px;
           height:600px;
           background:red;
           position:absolute;
           /*设置事件全部无效*/
           pointer-events:none;
           display:none;
       }
       </style>
   </head>
   <body>
       <img id="m1" src="img/2.webp" >
       <div id="div">

           </div >

           <script>
           //onclick 点击事件
           //ondblclick 双击事件
           //onmouseover 鼠标移入事件
           //onmouseout 鼠标移出事件
           //onmousemove 鼠标移动
           m1.οnmοuseοver=function(){
               div.style.display="block";
           }
               m1.οnmοuseοut=function(){
               div.style.display="none";

           }
           m1.οnmοusemοve=(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>
   </body>
</html>