一,
图片轮播另一种方法
通过CSS3的animation属性以及 @keyframes规则实现。
首先学习 CSS3当中的@keyframes和animation。
@keyframes规则—用于创建动画,在@keyframes中规定某个CSS样式,就能创建
由当前样式逐渐变成新样式的动画效果。
浏览器支持:
Internet Explorer 10 (IE10)、Firefox 、Opera 支持 animation属性以及 @keyframes规则,chrome、Safari 需要加前缀 “-webkit-”(注意: IE9 以及更早的版本,不支持 animation属性以及 @keyframes规则)
@keyframes 语法: @keyframes 函数名(自定义){
内容:eg:
@keyframes firstAnimation{
from {background: yellow;}
to{ background: red;}
}
// safari和chrome
@-webkit-keyframes firstAnimation{
from {background: yellow;}
to{ background: red;}
} CSS3 动画
用@keyframes规则传创建动画时,需要将其(函数名)绑定到某个选择器,否则不会产生动画效果。
二,
jQuery load() 方法:load() 方法从服务器加载数据,并把返回的数据放入被选元素中。
语法:
$(selector).load(URL,data,callback);
必需的 URL 参数规定加载的 URL。
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback 参数是 load() 方法完成后所执行的函数名称。
三,
1, jquery ajax中的load方法将返回的数据放在指定的元素中,不是全局函数。
2, get()同样是jquery的ajax的函数,它的作用把返回的数据交给用户处理,是全局函数
3,load 的实现几乎等同于get的实现,在ajax获取机制上没有区别。
4, load方法的另一个和get 的重要区别:load可以指定要插入文档的某个部分。
四,
轮播图代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>轮播图——css3</title>
<style>
@keyframes divColor{
to {background: yellow;};
from {background: red;};
}
.screen{
width: 9999px;
height: 9999px;
-webkit-animation: first 8s linear infinite;
}
.screen img{
float: left;
}
.main{
width: 300px;
height: 200px;
overflow: hidden;
}
@keyframes first{
25%{transform: translateX(0px);}
30%{transform: translateX(-300px);}
50%{transform: translateX(-300px);}
55%{transform: translateX(-600px);}
75%{transform: translateX(-600px);}
80%{transform: translateX(-900px);}
100%{transform: translateX(-900px);}
}
</style>
</head>
<body>
<div class="main">
<div class="screen">
<img src="img/20181125213241_1.jpg" height="200" width="300" />
<img src="img/QQ图片20181127215442.png" height="200" width="300" />
<img src="img/黑魂背景.jpg" height="200" width="300" />
<img src="img/20181125213241_1.jpg" height="200" width="300" />
<img src="img/日月孵蛋.jpg" height="200" width="300" />
</div>
</div>
</body>
</html>