Web实训知识点——0514

最新推荐文章于 2021-03-31 22:59:06 发布

是在为难我大雄

最新推荐文章于 2021-03-31 22:59:06 发布

阅读量112

点赞数

本文链接：https://blog.csdn.net/weixin_44781447/article/details/90320010

版权

**一：**jquery AJAX
jquery ajax中的load方法将返回的数据放在指定的元素中，不是全局函数。
get()同样是jquery的ajax的函数，它的作用把返回的数据交给用户处理，是全局函数。 load 的实现几乎等同于get的实现，在ajax获取机制上没有区别。 load方法的另一个和get 的重要区别：load可以指定要插入文档的某个部分。
二：图片轮播
通过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规则传创建动画时，需要将其(函数名)绑定到某个选择器，否则不会产生动画效果。
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
 
        #screen{
            animation: myfirst 8s;
            height:9999px;
            width: 9999px;
 
        }
        #screen img{
            float: left;
        }
        #main{
            height: 300px;
            width: 200px;
            overflow: hidden;
        }
        @keyframes myfirst{
            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 id="main">
    <div id="screen">
        <img src="images/list_1.jpg" height="200px" width="300px"/>
        <img src="images/list_2.jpg" height="200px" width="300px"/>
        <img src="images/list_3.jpg" height="200px" width="300px"/>
        <img src="images/list_4.jpg" height="200px" width="300px"/>
    </div>
</div>
</body>
</html>

是在为难我大雄

关注

0
点赞
踩
0

收藏

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

**一：**jquery AJAXjquery ajax中的load方法将返回的数据放在指定的元素中，不是全局函数。get()同样是jquery的ajax的函数，它的作用把返回的数据交给用户处理，是全局函数。 load 的实现几乎等同于get的实现，在ajax获取机制上没有区别。 load方法的另一个和get 的重要区别：load可以指定要插入文档的某个部分。二：图片轮播通过CSS3的an...
复制链接

扫一扫