JavaScript和CSS的交互
常见的CSS样式:JavaScript中常用的事件列表:实际应用:跟随滑动条:放大镜(低配版):
常见的CSS样式:
单位为px、也可以使用%(使用js操作CSS时必须加单位)
文本属性:
font-size:字体大小
font-family:字体类型
边框属性:
border:设置四个边框的所有属性
border-width:设置边框的宽度
border-style:设置边框的样式
border-color:设置边框的颜色
边界属性:
margin:设置所有外边框属性
margin-left:设置元素的左外边距
margin-right:设置元素的右外边距
margin-top:设置元素的上外边距
margin-bottom:设置元素的下外边距
填充属性:
padding:设置元素所有的内边距
padding-left:设置元素的左内边距
padding-right:设置元素的右内边距
padding-top:设置元素的上内边距
padding-bottom:设置元素的下内边距
JavaScript中常用的事件列表:
onclick:当用户单击某个对象时调用事件
onmouseover:鼠标移到某元素之上
onmouseout:鼠标从某元素移开
onmousedown:鼠标按钮被按下
onmousemove:鼠标移动
onscroll:滑动事件
实际应用:
跟随滑动条:
实现类似于网页中的跟随广告
div{
border: 2px solid black;
/*绝对布局的特点:可以随便调整位置*/
position: absolute;
/*使用绝对布局之后有四个属性可以设置*/
/*top(上) bottom(下) left(左) right(右)*/
/*用来调整标签与四个方位间隔的距离*/
right: 20px;
top: 40px;
/*用来设置广告跟随的速度*/
transition: .5s;
}
CSDN:绥彼岸
CSDN:绥彼岸
CSDN:绥彼岸
CSDN:绥彼岸
CSDN:绥彼岸
CSDN:绥彼岸
CSDN:绥彼岸
CSDN:绥彼岸
CSDN:绥彼岸
CSDN:绥彼岸
CSDN:绥彼岸
CSDN:绥彼岸
CSDN:绥彼岸
CSDN:绥彼岸
CSDN:绥彼岸
CSDN:绥彼岸
CSDN:绥彼岸
CSDN:绥彼岸
CSDN:绥彼岸
CSDN:绥彼岸
CSDN:绥彼岸
CSDN:绥彼岸
CSDN:绥彼岸
CSDN:绥彼岸
CSDN:绥彼岸
CSDN:绥彼岸
CSDN:绥彼岸
CSDN:绥彼岸
CSDN:绥彼岸
CSDN:绥彼岸
CSDN:绥彼岸
CSDN:绥彼岸
CSDN:绥彼岸
CSDN:绥彼岸
CSDN:绥彼岸
CSDN:绥彼岸
CSDN:绥彼岸
CSDN:绥彼岸
CSDN:绥彼岸
CSDN:绥彼岸
CSDN:绥彼岸
CSDN:绥彼岸
CSDN:绥彼岸
CSDN:绥彼岸
CSDN:绥彼岸
CSDN:绥彼岸
CSDN:绥彼岸
CSDN:绥彼岸
//设置一个窗口滑动事件
window.onscroll=()=>{//箭头函数
//必须要加px单位
ad.style.top=40+document.documentElement.scrollTop+"px"
}
放大镜(低配版):
在style中写一个class选择器,然后使用js代码给需要的标签设置class属性,起到给标签样式的作用 class是关键字,标签中的class属性在js中的class都叫做className 在标签上写对象事件没有效果,必须要在js中写事件对象
div{
width: 512px;
height: 320px;
background: url("newxitong_18.jpg") center/cover;
position: absolute;
/*设置事件全部无效*/
pointer-events: none;
display: none;
}
.cls{
position: absolute;
right: 50%;
top: 50%;
transform: translate(50%,-50%);
}
// 设置img的class属性
m1.className="cls"
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+"px"
div.style.top=e.clientY+"px"
div.style.background="url("+m1.src+") center/cover"
}
以上就是本文所有的内容了,谢谢观看,我之后还会写一些与HTML相关的文章,喜欢的可以点个赞+收藏+关注。
相关阅读
发表评论