60%为鼠标悬浮显示
/* 鼠标悬停阴影效果 */
.works-pic>li:hover {
/* 小手标 */
cursor: pointer;
/* 开启盒子阴影效果 */
box-shadow: 2px 10px 15px #333;
}
40%为Ajax链接显示
// 创建ajax实例
let xhr = new XMLHttpRequest();
// 创建请求 (挂请求信息 内容等)
xhr.open('GET','https://dog.ceo/api/breeds/image/random');
// 发送请求
xhr.send()
let pic =document.querySelector('#pic')
//响应请求
xhr.onload = function(){
// 判断一下 你请求服务器的状态码是否 200 200状态码表示成功
if(xhr.status === 200){
// 打印服务器回馈给我的信息 拿到是一个json格式
// console.log(xhr.response);
// 需要在js中使用json格式 需要转换一下 用反序列化变为 对象
let date = JSON.parse(xhr.response);
// date来接收一下对象
console.log(date);
// 拿到这个随机图片的地址
console.log(date.message);
// 拿到随机图片地址 插入到我的img标签的src属性
pic.src=`${date.message}`
}
}
点击空白处退出提示
评论