web实训知识点0514

最新推荐文章于 2021-03-11 09:05:32 发布

weixin_44766933

最新推荐文章于 2021-03-11 09:05:32 发布

阅读量278

点赞数 2

本文链接：https://blog.csdn.net/weixin_44766933/article/details/90320333

版权

一，轮播图代码：


<!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>

二，图片轮播另一种方法

通过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可以指定要插入文档的某个部分。

weixin_44766933

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
web实训知识点0514

一，轮播图代码：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>轮播图——css3</title> <style> @keyframes divColor{ to {background: yellow;};...
复制链接

扫一扫