Web实训——5.17

demo1.txt

snudhuaihduiashsudhas

sadiosdoasjiodji

text in span p1

在webstorm的相同文件夹下创建index.html文件和demo.txt文件,jquery文件
在load（）中callback是可选的参数，callback(回调函数)规定当“load”方法完成后所需要执行的
回调函数。callback回调函数的参数设置；
responseTxt 包含回调成功后的返回结果内容（相应类型）
statexTxt 回调状态

：eg 首先在load（）方法成功完成后显示一个提示框，如果load方法执行成功，则提示“外部内容加载成功”
如果失败
node：成功——‘success’ 失败—‘error’

jquery --ajax 的get()和post（）方法：主要通过HTTP get或 post请求
请求在服务器里面请求数据

get 问指定的资源提交要处理的数据

post 向指定的资源提交要处理的数据 post也可以从服务器获取数据并且

常用于同请求一起发送数据。不会缓存(cookie)数据。
AJAX–>GET()方法， 语法:$(selector).get(url、callback)
url-必需参数 callback-可选参数
使用get方法从服务器上的一个文件。
/* $=== jquery–一个全局变量

load的实现几乎等同于get的实现，在ajax获取机制上没有差别
load方法的另一个和get的重要区别：load可以指定要插入文档的某个部分（如：load（“demo.txt #p1”））

总结：

• jquery ajax中load方法将返回的数据放在指定的元素中，不是全局函数
  *get（）同样是jquery的ajax的函数。它的作用把返回的数据交给用户处理。是全局函数

*load 的实现几乎等于get的实现，在ajax获取机制上没有区别。
*load方法的另一个和get的重要区别：load可以指定要插入文档的某个部分。
*/

轮播图
方法1.通过CSS3的animate以及@keyframes属性实现。

首先学习CSS3的@keyframes 和 animate

keyframes 创建动画，在@keyframes规定某个CSS样式，就是创建由当前样式逐渐变成样式的动画效果

浏览器支持internet explorer 10（ie10）、firefox、opera 支持animate属性以及@keyframes规则

eg：@keyframes 语法：@keyframes 函数名(自定义){
内容
}
eg：

@keyframes firstAnimate{
    from{background：yellow}
    to{background：red}
}

// safari 和 chrome
@-wekit-@keyframes firstAnimate{
            from{background：yellow}
            to{background：red}
        }


            @keyframes firstAnimate {
            0%{background：yellow；}
            50%{background：red；}
            100%{background; black;}
            }
            div{
            animation: firstAnimate 3s;
            height:100px;
            width:100;
            }

 */
 /*
 #screen{
    height:9999px;
    width:9999px;
    animation: myfirst 3s;

 }
  #screen img{
    float:left;

  }
  @keyframes myfirst{
  0%{}
  25%{transform:translateX(0px)}
  30%{transform:translateX(0px)}
  50%{transform:translateX(-300px)}
  55%{transform:translateX(-300px)}
  75%{transform:translateX(-600px)}
  80%{transform:translateX(-600px)}
  100%{transform:translateX(-900px)}


  }
  main{
   width:300px;
   height:300px;
   overflow:hidden;

  }

 */
 /*
 <div id="main">
 <div id="screen">
 <img src="" height:"200" width="300"/>
 <img src="" height:"200" width="300"/>
 <img src="" height:"200" width="300"/>
 <img src="" height:"200" width="300"/>
 <img src="" height:"200" width="300"/>
 </div>
 */

方法2：通过jquery的新形式实现。