html部分：

.showBox{

width: 200px;

height: 200px;

margin: 100px auto;

border: 1px solid gray;

}

var btns = document.querySelectorAll('input');

// 循环绑定点击事件

for (var i = 0; i < btns.length; i++) {

btns[i].onclick = function(){

// 创建

var ajax = new XMLHttpRequest();

// 修改 url的值 01.changeImg.php?starName =

// 获取 data-自定义属性

console.log(this.dataset.name);

// 设置

ajax.open('get','01.changeImg.php?starName='+this.dataset.name);

// 发送

ajax.send();

// 注册

ajax.onreadystatechange = function(){

if(ajax.readyState==4 &&ajax.status==200){

// 判断并使用

console.log(ajax.responseText);

// 设置 展示div的 background属性

document.querySelector('.showBox').style.background = 'url('+ajax.responseText+') no-repeat center/cover';

}

}

}

};

PHP部分：

// 获取提交的数据 明星数据 key

$starKey = $_GET['starName'];

// 关系型数组 key->value

$starArr = array(

'pyy'=>'img/pyy.jpg',

'jay'=>'img/jay.jpg',

'cgx'=>'img/cgx.jpg'

);

// echo value

// 通过key 获取对应的 value

echo $starArr[$starKey];

?>

ajax提交表单、ajax实现文件上传

ajax提交表单.ajax实现文件上传,有需要的朋友可以参考下. 方式一:利用from表单的targer属性 + 隐藏的iframe 达到类似效果, 支持提交含有文件和普通数据的复杂表单 方式二:使用 ...

Django项目--web聊天室

需求 做一个web聊天室,主要练习前端ajax与后台的交互: 一对一聊天和群组聊天 添加用户为好友 搜索并添加群组 管理员可以审批用户加群请求,群管理员可以有多个,群管理员可以删除,添加禁言群友 与聊 ...

基于OpenCV性别识别

叙述性说明 所谓的性别识别推断检测到的面部是男性还是女性.它是一个二值分类问题. 识别算法可以用于SVM,BP神经网络.LDA,PCA,PCA+LDA等等.OpenCV官网给出的文档是基于Fisher ...

(二)Jquery Mobile介绍以及Jquery Mobile页面与对话框

Jquery Mobile介绍以及Jquery Mobile页面与对话框  一. Adobe Dreamweaver CS6 环境 最新版本的cs6会支持JM的使用,有自动提示功能,很强大.安装说明地 ...

Python-Django-BBS

一个项目从无到有 1 需求分析 -登录ajax,图形验证码 -注册forms和ajax,上传头像,头像预览 -博客首页 -个人站点 -点赞,点踩 -评论 -根评论 -子评论 -后台展示 -添加文章 - ...

swiper轮播在ie浏览器上遇到的显示问题探索

前言: 最近项目有一个需求,想要下图效果,鼠标指向头像图片,图片会放大同时上面的轮播会跟着切换: 鼠标移开头像图片,图片变回原来的大小 注:下图是我根据上面需求已经实现的效果,所以截图方便说明 思考: ...

BBS总结

表设计 from django.db import models from django.contrib.auth.models import AbstractUser # Create your m ...

02&period;Jquery Mobile介绍以及Jquery Mobile页面与对话框

一.为什么要学Jquery Mobile   JqueryMobile 是jquery的移动版本,懂基本的jquery知识,会简单的html+css就可以完成很多复杂的功能,还有就是这个框架在企业中用 ...

小记 vue 打包&lpar;build&rpar;需要注意的一些事

记录 vue 项目打包的一些事情 首先声明项目都是由 vue-cli 生成; vue 项目从 dev 切换到 prod 时有很多地方需要注意; 首先是大家最需要注意的 ajax 切换环节 以前一开始用 ...

随机推荐

dojo tree edit的使用&lbrack;前端&rsqb;

var store = new mydata.JsonRestStore({ target: "

Jenkins - 持续集成环境搭建

1. Jenkins 概述 Jenkins是一个开源的持续集成工具.持续集成主要功能是进行自动化的构建.自动化构建包括自动编译.发布和测试,从而尽快地发现集成错误,让团队能够更快的开发内聚的软件. 2 ...

PHP面试题汇总

1.用PHP打印出前一天的时间格式是2014-01-13 12:10:21(2分) 2.echo(),print(),print_r()的区别(3分) 3.能够使HTML和PHP分离开使用的模板(1分 ...

ios开发之UIView的frame、bounds跟center属性的区别&lpar;附图&rpar;

博文暂时想到什么写什么,不顺理成章,不顺章成篇. 先看几个概念 坐标点Poit:向右侧为X轴正方向的值x,原点下侧为Y轴正方向的值y 大小Size:由宽度width和高度height构成,表示一个矩形 ...

Distinct Substrings

spoj694:http://www.spoj.com/problems/DISUBSTR/ 题意:给以一个串,求这个串的所有不同子串的个数. 题解:第一次接触后缀数组,这里可以转化成,求所有子串后缀 ...

在Ubuntu 14&period;04安装 Let’s Encrypt并配置ssl

1.下载安装 Let's Encrypt客户端 cd /usr/local/sbin sudo wget https://dl.eff.org/certbot-auto 2.添加执行权限 sudo c ...

华为oj---合并数组

题目标题: 将两个整型数组按照升序合并,并且过滤掉重复数组元素 详细描述: 接口说明 原型: voidCombineBySort(int* pArray1,intiArray1Num,int* pAr ...

MongoDB基础教程系列--第九篇 MongoDB 分片

1.分片介绍 分片(sharding)是将数据拆分,将其分散存到不同机器上的过程.MongoDB 支持自动分片,可以使数据库架构对应用程序不可见.对于应用程序来说,好像始终在使用一个单机的 Mongo ...

浅谈React数据流管理

引言:为什么数据流管理如此重要?react的核心思想就是:UI=render(data),data就是我们说的数据流,render是react提供的纯函数,所以用户界面的展示完全取决于数据层.这篇文章 ...

&lpar;PMP&rpar;第5章-----项目范围管理

产品范围:所具有的特征和功能 项目范围:必须完成的工作. 5.1 规划范围管理 输入 工具与技术 输出 1.项目章程 2.项目管理计划 (质量管理计划, 项目生命周期描述, 开发方法) 3.事业环境因 ...

又是好多天没有写文章了，最近一段时间一直在弄驾照的事情，而且还要为自己做的品牌弄这弄那的。今天终于有了些闲暇的时间，便整理一篇有关wordpress评论系统头像的特效文章吧。至于那个利用wordpress搭建企业站点的系列文章还要整理下思绪推出后续文章，今天估计是不够时间去捯饬了，一直在等待的朋友还需再耐心等待一下，明天总要弄出一篇后续文章出来的。

今天给大家提供的小技巧，其实并不算是很新鲜的话题了，而且在很多技术博客中都会有相似的文章存在。话说这个站点是主要针对一些wordpress用户的，更全面的相关文章汇总才是建站的最终目的，所以补上这篇文章也仅仅是为了wordpress教程的补足而已，知道这个方法的朋友完全可以无视掉。

多说评论插件的使用面积还是挺大的，好多人懒的去捯饬那简易的不能再简易的wordpress自带评论系统，多说自然是一个不错的选择。但对于一些热衷于DIY、动手能力比较强的朋友，还是渴望着自己去捯饬默认的评论系统来实现更加个性化的模式。我的评论系统一直有问题，在chrome浏览器下当评论出现翻页时会出现错位、空位及不能正常显示的bug,肯定是因为css代码部分出的问题，一直说要去修改也总是被其他琐事所遗忘。反正这个个人小站最终还要进行改版，赶上扁平化设计的潮流，等有时间去捯饬吧！

很多朋友看中了多说评论插件的那个圆形的、当鼠标划过时会旋转的评论头像特效，总认为实现起来很麻烦。其实方法异常的简单，只要用css进行一些美化就完全可以实现了。因为css代码是css3的，所以并不难呢过被一些以ie9版本以下的浏览器所兼容，所以如果您所面对的受众中使用ie9版本以下浏览器的比例过多，还请您慎重选择。当然了，一个完整的网站设计也必然要预备几套方案出来，以适用不同的浏览器版本，使得不同浏览器版本下都能显示较好的显示效果。

不再废话了，直接来方法吧！

请打开您所使用主题的主题包，打开style.css文件，并在里面写上下面一些代码：

.avatar {

float:left;

margin-right:8px;

padding:1px;

border:1px solid #cfd9e1;

width:40px;

height:40px; /*设置头像的长和宽*/

border-radius: 20px;/*设置头像圆角效果,在这里我直接设置了超过width/2的像素，即为圆形了*/

-webkit-border-radius: 20px;/*圆角效果：兼容webkit浏览器*/

-moz-border-radius:20px;

box-shadow: inset 0 -1px 0 #3333sf;/*设置头像阴影效果*/

-webkit-box-shadow: inset 0 -1px 0 #3333sf;

-webkit-transition: 0.4s;

-webkit-transition: -webkit-transform 0.4s ease-out;

transition: transform 0.4s ease-out;/*变化时间设置为0.4秒(变化动作即为下面的图像旋转360度)*/

-moz-transition: -moz-transform 0.4s ease-out;

}

.avatar:hover {

/*鼠标滑过，图像旋转*/

box-shadow: 0 0 10px #fff;

rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);

-webkit-box-shadow: 0 0 10px #fff;

rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);

transform: rotateZ(360deg);/*图像旋转360度*/

-webkit-transform: rotateZ(360deg);

-moz-transform: rotateZ(360deg);

}

以上的代码我们仅仅加入了一些阴影、圆形及鼠标滑过旋转三个特效，您完全可以根据上面的代码去调整出自己与众不同的效果，比如缩小圆角的大小而弄成圆角矩形，也可以调整头像宽高而成椭圆形，更可以使用css滤镜中的反相、黑白或者透明度增减而实现更丰富的鼠标悬停效果。

OK!今天的内容就先到这里吧，接下来的几天会有些闲暇时间，我会尽力去捯饬一些文章出来的。

(责任编辑：最模板)