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

本文介绍了如何使用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数组里面放图片的链接即可。

  • 11
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值