html+css+js实现关键词随机图片

2401_84097510

于 2024-04-19 09:23:25 发布

阅读量766

点赞数 11

分类专栏：程序员文章标签： css html javascript

本文链接：https://blog.csdn.net/2401_84097510/article/details/137950327

版权

程序员专栏收录该内容

157 篇文章 0 订阅

订阅专栏

本文介绍了如何使用CSS和HTML构建搜索样式，PHP编写接口从堆糖网站抓取图片，以及通过Ajax实现动态加载和图片选择。重点在于前端与后端的交互和图片数据处理。

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

defaule.css:

body, html { font-size: 100%; padding: 0; margin: 0;}

.clearfix:before,

.clearfix:after {

content: " ";

display: table;

}

.clearfix:after {

clear: both;

}

body{

color: #fff;

font-weight: 500;

font-size: 1.05em;

font-family: “Microsoft YaHei”,“宋体”,“Segoe UI”, “Lucida Grande”, Helvetica, Arial,sans-serif, FreeSans, Arimo;

}

a{color: #2fa0ec;text-decoration: none;outline: none;}

a:hover,a:focus{color:#74777b;}

search-form.css:

html,body {height: 100%;}

body {padding: 0px; margin:0px; background:url(…/images/1.jpg) ; background-position: center; background-size: cover; background-attachment: fixed; background-repeat: no-repeat;}

.search-wrapper {

position: absolute;

-webkit-transform: translate(-50%, -50%);

-moz-transform: translate(-50%, -50%);

transform: translate(-50%, -50%);

top:50px;

left:50%;

}

.search-wrapper.active {}

.search-wrapper .input-holder {

overflow: hidden;

height: 70px;

background: rgba(255,255,255,0);

border-radius:6px;

position: relative;

width:70px;

-webkit-transition: all 0.3s ease-in-out;

-moz-transition: all 0.3s ease-in-out;

transition: all 0.3s ease-in-out;

}

.search-wrapper.active .input-holder {

border-radius: 50px;

width:450px;

background: rgba(0,0,0,0.5);

-webkit-transition: all .5s cubic-bezier(0.000, 0.105, 0.035, 1.570);

-moz-transition: all .5s cubic-bezier(0.000, 0.105, 0.035, 1.570);

transition: all .5s cubic-bezier(0.000, 0.105, 0.035, 1.570);

}

.search-wrapper .input-holder .search-input {

width:100%;

height: 50px;

padding:0px 70px 0 20px;

opacity: 0;

position: absolute;

top:0px;

left:0px;

background: transparent;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

border:none;

outline:none;

font-family:“Open Sans”, Arial, Verdana;

font-size: 16px;

font-weight: 400;

line-height: 20px;

color:#FFF;

-webkit-transform: translate(0, 60px);

-moz-transform: translate(0, 60px);

transform: translate(0, 60px);

-webkit-transition: all .3s cubic-bezier(0.000, 0.105, 0.035, 1.570);

-moz-transition: all .3s cubic-bezier(0.000, 0.105, 0.035, 1.570);

transition: all .3s cubic-bezier(0.000, 0.105, 0.035, 1.570);

-webkit-transition-delay: 0.3s;

-moz-transition-delay: 0.3s;

transition-delay: 0.3s;

}

.search-wrapper.active .input-holder .search-input {

opacity: 1;

-webkit-transform: translate(0, 10px);

-moz-transform: translate(0, 10px);

transform: translate(0, 10px);

}

.search-wrapper .input-holder .search-icon {

width:70px;

height:70px;

border:none;

border-radius:6px;

background: #FFF;

padding:0px;

outline:none;

position: relative;

z-index: 2;

float:right;

cursor: pointer;

-webkit-transition: all 0.3s ease-in-out;

-moz-transition: all 0.3s ease-in-out;

transition: all 0.3s ease-in-out;

}

.search-wrapper.active .input-holder .search-icon {

width: 50px;

height:50px;

margin: 10px;

border-radius: 30px;

}

.search-wrapper .input-holder .search-icon span {

width:22px;

height:22px;

display: inline-block;

vertical-align: middle;

position:relative;

-webkit-transform: rotate(45deg);

-moz-transform: rotate(45deg);

transform: rotate(45deg);

-webkit-transition: all .4s cubic-bezier(0.650, -0.600, 0.240, 1.650);

-moz-transition: all .4s cubic-bezier(0.650, -0.600, 0.240, 1.650);

transition: all .4s cubic-bezier(0.650, -0.600, 0.240, 1.650);

}

.search-wrapper.active .input-holder .search-icon span {

-webkit-transform: rotate(-45deg);

-moz-transform: rotate(-45deg);

transform: rotate(-45deg);

}

.search-wrapper .input-holder .search-icon span::before, .search-wrapper .input-holder .search-icon span::after {

position: absolute;

content:‘’;

}

.search-wrapper .input-holder .search-icon span::before {

width: 4px;

height: 11px;

left: 9px;

top: 18px;

border-radius: 2px;

background: #e09e4b;

}

.search-wrapper .input-holder .search-icon span::after {

width: 14px;

height: 14px;

left: 0px;

top: 0px;

border-radius: 16px;

border: 4px solid #e09e4b;

}

.search-wrapper .close {

position: absolute;

z-index: 1;

top:24px;

right:20px;

width:25px;

height:25px;

cursor: pointer;

-webkit-transform: rotate(-180deg);

-moz-transform: rotate(-180deg);

transform: rotate(-180deg);

-webkit-transition: all .3s cubic-bezier(0.285, -0.450, 0.935, 0.110);

-moz-transition: all .3s cubic-bezier(0.285, -0.450, 0.935, 0.110);

transition: all .3s cubic-bezier(0.285, -0.450, 0.935, 0.110);

-webkit-transition-delay: 0.2s;

-moz-transition-delay: 0.2s;

transition-delay: 0.2s;

}

.search-wrapper.active .close {

right:-50px;

-webkit-transform: rotate(45deg);

-moz-transform: rotate(45deg);

transform: rotate(45deg);

-webkit-transition: all .6s cubic-bezier(0.000, 0.105, 0.035, 1.570);

-moz-transition: all .6s cubic-bezier(0.000, 0.105, 0.035, 1.570);

transition: all .6s cubic-bezier(0.000, 0.105, 0.035, 1.570);

-webkit-transition-delay: 0.5s;

-moz-transition-delay: 0.5s;

transition-delay: 0.5s;

}

.search-wrapper .close::before, .search-wrapper .close::after {

position:absolute;

content:‘’;

background: #FFF;

border-radius: 2px;

}

.search-wrapper .close::before {

width: 5px;

height: 25px;

left: 10px;

top: 0px;

}

.search-wrapper .close::after {

width: 25px;

height: 5px;

left: 0px;

top: 10px;

}

.search-wrapper .result-container {

width: 100%;

position: absolute;

top:80px;

left:0px;

text-align: center;

font-family: “Open Sans”, Arial, Verdana;

font-size: 14px;

display:none;

color:#B7B7B7;

}

@media screen and (max-width: 560px) {

.search-wrapper.active .input-holder {width:300px;}

}

php接口

要实现一个php接口需要找一个图片网站，我找的网站是：堆糖

根据关键词会返回许多图片，质量也是不错的。

在这里插入图片描述

f12进入开发者模式，点击网络，再点击XHR，此时是空的。

在这里插入图片描述

不要着急，我们鼠标一直往下滑，使其加载更多图片，可以看到出现了一行东西，那个就是图片的接口url了。

在这里插入图片描述

往下滑可以看到请求参数，最重要的是kw和after_id。分别是关键词和下一个图片开始的序号，比如此时24表示最后一个图片序号为23，说明已经一次接口可以返回24张图片。

在这里插入图片描述

把两个参数放在请求url后面。（下面的链接复制到网上即可看到密密麻麻的json数据）

https://www.duitang.com/napi/blogv2/list/by_search/?kw=头像&after_id=24

当然我们也可以直接点击预览，可以看到有24条数据，每条数据里面都有图片链接。

在这里插入图片描述

前端需要传入的参数为kw和after_id，然后再解析数据返回。

pictures.php：

<?php header('Content-Type:application/json'); $ke=$_POST['str']; $id=$_POST['id']; $data = file_get_contents('https://www.duitang.com/napi/blogv2/list/by_search/?&after_id='.$id.'&kw='.$ke); print_r($data); ?>

文章前面我已经给了完整的html代码，在这里我简单的说明一下。

$.ajax({

type:“post”,

url:“pictures.php”,

data:{“str”:value,‘id’:id},

dataType:“json”,

success: function(msg){

console.log(msg);

var i=Math.floor(Math.random()*(msg.data.object_list.length));

document.getElementById(‘img’).src=msg.data.object_list[i].photo.path;

}

});

post请求pictures.php传入的数据为{“str”:value,‘id’:id}，其中value就是输入关键词，id是随机生成的24的倍数的整数。返回的数据类型为json，然后获取长度再随机选择一个图片链接。

value = $(obj).find(‘.search-input’).val().trim();

var a = Math.random(); //生成0——1的随机数

a = a*5; //0——5的随机数

a = Math.ceil(a); //上取整，完成随机生成1——5的整数

var id=a*24;

总结

要实现这个页面，需要的文件有背景图片（命名为1.jpg）、pictures.html、default.css、search-form.css、pictures.php。

目录结构（那两个css文件放在css文件夹里面）：

在这里插入图片描述

电脑为配置php环境怎么办？

电脑没有配置php环境的小伙伴也不要着急，可以定义一个数组，里面存放图片链接，或者本地图片都可以。

找到文章前面的pictures.html里面的submitFn函数，把下面代码替换掉之前的。然后在img_list数组里面放图片的链接即可。

2401_84097510

关注

11
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
html+css+js实现关键词随机图片

post请求pictures.php传入的数据为{“str”:value,‘id’:id}，其中value就是输入关键词，id是随机生成的24的倍数的整数。要实现这个页面，需要的文件有背景图片（命名为1.jpg）、pictures.html、default.css、search-form.css、pictures.php。不要着急，我们鼠标一直往下滑，使其加载更多图片，可以看到出现了一行东西，那个就是图片的接口url了。当然我们也可以直接点击预览，可以看到有24条数据，每条数据里面都有图片链接。
复制链接

扫一扫