m.lom599.com_手机版乐白家网址_乐百家手机首页登录

说的比较清楚的一篇文章,jQuery层动画定位滑动

作者: 手机版乐白家网址  发布:2019-08-15

HTML5的八大技术特征:  

jQuery层动画定位滑动效果代码,jquery层动画滑动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
<html xmlns=";
<head>
<title>jQuery层动画定位滑动</title>
<style type="text/css">
<!--
body {
font-family: 'Signika Negative', sans-serif;
}
#head {
z-index:10;
position:absolute;
top:0;
left:0;
width:100%;
height:30px;
border-color:#0055ff;
border-width:0 0 10px 0;
border-style:solid;
background:#0088ff;
}
#head li{
list-style:none;
float:left;
display:block;
height:30px;
padding:0 10px; 0 10px;
cursor:pointer;
font-size:26px;
}
#head li:hover{
color:#ffffff;
background:#0055ff;
border-color:#0011ff;
border-width:0 0 10px 0;
border-style:solid;
}
#box {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
overflow:hidden;
}
#bg {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
overflow:visible;
background:;
}
.cell {
width:100%;
height:100%;
overflow:auto;
}
.list {
position:absolute;
top:50%;
left:50%;
width:800px;
height:600px;
margin:-300px 0 0 -400px;
background:#0088ff;
}
#class_1 {
position:absolute;
top:0;
left:0;
background:;
}
#class_2 {
position:absolute;
top:0;
left:100%;
background:;
}
#class_3 {
position:absolute;
top:0;
left:200%;
background:;
}
#class_4 {
position:absolute;
top:100%;
left:0;
background:;
}
#class_5 {
position:absolute;
top:100%;
left:100%;
background:;
}
#class_6 {
position:absolute;
top:100%;
left:200%;
background:;
}
#class_7 {
position:absolute;
top:200%;
left:0;
background:;
}
#class_8 {
position:absolute;
top:200%;
left:100%;
background:;
}
#class_9 {
position:absolute;
top:200%;
left:200%;
background:;
}
-->
</style>
<script type="text/javascript" src="/ajaxjs/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#l_01").click(function(){
$("#bg").stop().animate({top:0 "%",left:0 "%"},"slow");
});
$("#l_02").click(function(){
$("#bg").stop().animate({top:0 "%",left:-100 "%"},"slow");
});
$("#l_03").click(function(){
$("#bg").stop().animate({top:0 "%",left:-200 "%"},"slow");
});
$("#l_04").click(function(){
$("#bg").stop().animate({top:-100 "%",left:0 "%"},"slow");
});
$("#l_05").click(function(){
$("#bg").stop().animate({top:-100 "%",left:-100 "%"},"slow");
});
$("#l_06").click(function(){
$("#bg").stop().animate({top:-100 "%",left:-200 "%"},"slow");
});
$("#l_07").click(function(){
$("#bg").stop().animate({top:-200 "%",left:0 "%"},"slow");
});
$("#l_08").click(function(){
$("#bg").stop().animate({top:-200 "%",left:-100 "%"},"slow");
});
$("#l_09").click(function(){
$("#bg").stop().animate({top:-200 "%",left:-200 "%"},"slow");
});
});
</script>
</head>
<body>
<div id="head">
<li id="l_01">1</li>
<li id="l_02">2</li>
<li id="l_03">3</li>
<li id="l_04">4</li>
<li id="l_05">5</li>
<li id="l_06">6</li>
<li id="l_07">7</li>
<li id="l_08">8</li>
<li id="l_09">9</li>
</div>
<div id="box">
<div id="bg">
<div class="cell" id="class_1">
<div class="list"></div>
</div>
<div class="cell" id="class_2">
<div class="list"></div>
</div>
<div class="cell" id="class_3">
<div class="list"></div>
</div>
<div class="cell" id="class_4">
<div class="list"></div>
</div>
<div class="cell" id="class_5">
<div class="list"></div>
</div>
<div class="cell" id="class_6">
<div class="list"></div>
</div>
<div class="cell" id="class_7">
<div class="list"></div>
</div>
<div class="cell" id="class_8">
<div class="list"></div>
</div>
<div class="cell" id="class_9">
<div class="list"></div>
</div>
</div>
</div>
<div>;
</body>
</html>

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "...

1、Ajax (Asynchronous JavaScript and XML)

  1. 语义学
     
    作为HTML5的前端和中心,语义学能够赋予框架结构以意义。更详尽的标签组合以及资源描述框架,微型数据和微型格式将为你和你的用户打造一套数据驱动的网络。( 没理解。。 。)  
  2. 本地存储
     
    在应用缓存,本地存储,索引数据库和文件应用程序接口的帮助下,HTML5应用甚至能在没有因特网连接的情况下工作。(我想到了用html5做单机游戏。。。)  
  3. 设备访问
    地理定位只是一个开始,HTML5能够让应用程序访问连结到你计算机上的任何设备。( 这个。。。能做web操作系统吧?!)  
  4. 连结性
    更有效率的连结性将能带来更实时的聊天,更快的游戏速度以及更好的沟通交流。服务器与客户端之间的网络套接字和邮件摄像头将比以往更加便捷。( 做个网页版的QQ,等等。。。。)  
  5. 多媒体
    音频和视频可是HTML5世界的一等公民,他们将与你的应用程序和网站和睦共处。灯光,摄影,开始!( 可以不装播放器了 。。。)  
  6. 平面和三维效果
    在SVG, Canvas, WebGL和CSS3 3D效果这些特性之间,你一定能找到让你的用户眼花缭乱,美不胜收的创意。( 能搞2d,3d的动画是吧?)  
  7. 性能和集成
    使你的应用程序和网络在大量诸如Web Workers和XMLHttpRequest 2这样的技术下更加快速。没有人愿意停下了等你跟进的。( 不晓得。。。)  
  8. CSS3
    在不牺牲你的讲义结构和性能的情况下,CSS3提供了大量的样式效果和加强你的网络应用。另外WOFF(Web Open Font Format)提供了前所未有的印刷灵活性控制。(更漂亮了?!)

Ajax定义:允许客户端浏览器与服务器通信,无须刷新当前页面的技术就为ajax技术。

摘自 yearnfar的博客

2、不刷新页面,与服务器通信的技术有ajax,flash,javaApplet,框架(iframe,frameset),XMLHttpRequest。

1. 语义学 作为HTML5的前端和中心,语义学能够赋予框架结构以意义。更详尽的标签组合以及资源描述框架,微型数据...

其中注意:框架是将多个页面放在框架中,是跨页面操作,与真正的不刷新页面,与服务器通信有区别。只是刷新某个框架中的页面,整体页面不刷新。

3、ajax的核心:是javascript对象XMLHttpRequest。

本文由m.lom599.com发布于手机版乐白家网址,转载请注明出处:说的比较清楚的一篇文章,jQuery层动画定位滑动

关键词: m.lom599.com 乐百家开户