用jquery写循环播放div -2
前面所说的class html元素标签的写法也要有层次性, 这个层次性其实也就是常说的 css类写法要有一个"命名空间, 名字空间" "namespace"
在多个div轮播的情况下, 在父容器div下, 都设置成ul 或 ol其实都是可以的, 只是为了在写css代码的时候,为了便于引用
好区别, 所以把一种div写成ul, 另一种写成ol.
关于布局的选择考虑 和position-float的选择?
在元素的div的布局上, 你可以有三种选择: 自然的文档流排列, position:absolute, 和float
这就要根据你的布局效果 动画的表现方式 以及 jquery在实现上是否方便, 来选择了.
比如: div轮播,
- 你选择自然流, 那么动画的路径和位置难以确定,
- 你选择float, 由于float元素是浮动的, 但是多个float是依次排列的, 后面的元素要想跑到前面去,似乎是不可能的,要被"卡住"
- 所以, 在实际的这种 轮播 动画 的应用中, 使用position:absolute绝对定位的是比较常用的, 因为: 一是各个元素之间相互不会发生 排版的干扰, 相互之间没有关系; 二是 jquery在控制动画的时候, 也比较方便, 直接控制css样式中的 left, top等属性就可以了.
dw本身不能算内置浏览器，只是代码和设计视图， 要看测试页面还是在外部浏览器中查看。
只要出现了absolute定位， 随时都要考虑到随后的文档流被脱离了文档流的 div 所覆盖的问题。
div、p、span、li几乎所有的html容器中的内容， 总是从上向下， 从左向右的显示， 因此：
- 容器中的内容，如果指定了容器的宽高大于其中的内容时, 内容不会自动的在 水平和垂直方向上居中的， 总是默认的 靠上靠左
- 如果超出了div的容器范围，被隐藏的总是内容的右边、 下边。
边距的设置：
一般就以5px， 10px， 20px为梯度进行设置... 一般方块形状， 就设置成正方形， 即宽度和高度相等。
Dreamwaver有强大的" 应用源代码格式" , 可是, 只能应用两种代码格式: 一是html标签, 另一个是css, 不能用于php代码格式,
但这对前端足够了.
DW 也有代码提示功能 ctrl+H, 可以针对js, jquery,php等的提示, 很强大.
要正确地 初始化 多个平行 对象的 初始状态?
- 首先定义 表现为 "当前的" 特殊的 不同的那个对象所 添加/具有的类样式, 一般就用 .current, .focus
- 然后, 看初始状态时, 呈现给用户的是哪个对象, 就让那个对象 具有 .current/focus等样式类.
- 其他对象的类样式的变化, 就要根据鼠标点击时的jquery脚本变化了.
一个很重要的问题: 写当前类 .current的时候, 样式表的优先级!!!
- 对同一个元素可以使用多个css样式, 即css样式具有叠加性;
- 但是, 这就引入了一个 css样式的 "冲突性" 问题: 因为作用于同一个元素对象的多个css样式可能都规定了相同的css样式名但是他们的值却不相同, 那么这个时候, 该应用哪一个css的样式呢? 这个就叫冲突, 也可以叫争夺, 竞争..
- 竞争方法就是:
==================================================================
1. 确定三种选择器的权重: html标签的权重=1, 类class=10, id的权重=100
2. 统计每个css样式选择器的权重, 分别把各类选择器的权重统计起来, 然后相加: 即把该样式选择器中的所有的标签的权重 + 所有的类的权重 + 所有的id的权重
3. 统计权重的时候, 不要管空格, 只要有一个(选择器), 就算一个, 就加一个
4. 权重高的css样式, 被优先使用
5. 权重相同的css样式选择器, 按照后面的样式 覆盖前面的样式来决定
==================================================================
6. 因此, 在写类似 div > ol > li 中的.current, .focus等样式时, 就不能只写一个 光光的 .current {....}, 这时,虽然当前的li确实可以用得到这个.current, 但是由于它的css权重更低, 所以跟前面.class ol li相冲突的样式就不起作用了! 这时, 要写成: .class ol .current {....} 这样.current中的样式 跟 .class ol li中相冲突的样式才会被 优先使用!
7. 写轮播器的时候, 当前 "数字选择指示器" <ol> <li> 5 </li></ol> 的类 .current的具体 样式, 不能直接写到元素中, 要写成 .current样式class的 方式, 因为这个 .current 类样式要通过js 分别用到其余几个li元素上.
8. 所以, 这也是前面所说的, 写css样式的时候, 最好也要遵循 "层次性" 的道理. 不仅仅只是层次清晰, 更重要的是, 能确保样式的能够得到 有效使用. 这种方法, 也可以用来 以"层次性" "层级选择器" 代替 写 额外的 class和id.
9. 在写层次的时候, **对最后一级选择器, 通常只在" 标签选择器/类样式/id选择器"中, 只选择写一样就好了. 也就是说, 对class, id只写到它们的父元素那一级就好了, **不要写多:
/* 下面的css选择器的权重是: .all=10, ol=1 li=1, 所以总的权重是: 10+1+1=12 */
.all ol li {
float: left;
border: 1px solid #ccc;
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
margin-left:10px;
cursor: pointer;
}
/* 下面的css选择器的权重是: .all=10, ol=1 .current=10, 所以总的权重是: 10+1+10= 21 */
.all ol .current {
font-weight: bold;
font-size: 2em;
color: red;
width: 30px;
height: 30px;
border: 1px solid blue; // 这里的高度/宽度/边框就跟上面的相冲突了, 由于它的权重大,所以才能应用这个
line-height: 30px; // 否则, 如果只写 .current, 它的权重为10, 小于12, 就不能使li的盒子变大!
}
10. 写.current时, 写到.all ol就可以了, 不要写成: .all ol li.current. 因为后一种方式的写法有两个问题:
一是 繁琐, 增加了无谓的冗余代码
二是, 容易出错, 这里li和.current之间还不能有空格, 否则就表示 祖先/子孙之间的包含关系, 很明显, li下没有.current的子元素了.
当两种li 盒子的高度不同时, 要对它们的 margin 进行调整, 使他们的底线在同一水平线上,
就是要使他们的 margin-top(或者margin-bottom)的值要不同:
.all ol li {
...
margin-top: 10px;
}
.all ol .current {
...
margin-top: 0;
}
// 两个都要设, 不能只设置其中一个.
在jqurey脚本中的 li 中, 各元素的 .current类的切换方法?
- 可以用 li 的 attr方法, 也可以用 addClass/ removeClass方法来实现
- 两者的区别是: attr只能用一种类, add/removeClass可以有多个类.
- 实际上, attr上也可以应用其他不变的, 公用的类样式, 两者的效果基本上差不多.
- 但通常还是 用 attr方法来控制 .current类样式的添加和消除
jquery的事件
- 为了与原生的javascript相区别, 所有的 jquery 事件都不用 on, 也不用 "驼峰"大小写
- 合成事件 hover:
针对使用频繁的onmouseover,onmouseout，jQuery使用了 "合成事件" 的方法：
hover(enter,leave)方法//模拟光标悬停事件，光标移动到 元素上触发enter函数，移出元素时触发leave函数。
<script type="text/javascript">
$(function(){
$("#source").hover(function(){
$("#pointer").text("移入光标");},function(){
$("#pointer").text("移出光标");});
})
</script>
jquery对index的操作?
有三种方式:
get([index]); //返回的是dom元素/dom集合
:eq(index) :gt(index) :lt(index) // 通过选择器来操作 就有大于/小于/等于
eq(index) // 通过过滤器,就只有一种 : "等于".
jquery的组成:
- 核心
- 属性 (attr removeAttr/ addClass removeClas/ html text val)
- css (通用的css/ 特别拿出来的 位置position , 尺寸 height, innerHeight, outerHeight())
- 选择器
- 过滤筛选器
- ajax
- 效果动画
- 事件 等等
jquery的html text val方法?
- 应用对象 html和text方法通常应用于 div p等标签, 而val通常只用在input select等表单元素上
- 返回结果不同:
html返回的是整个 被包含 的标签
text 返回的 只是 被包含的 文字/文本 内容
val 返回的是input/select的value 属性值 - 对选择器集合的操作结果不同:
html始终 返回匹配集合中 的 "第一个" 对象的 html标签
val 也只返回第一个匹配元素的 val属性值 .
text 会返回 所有集合中 所有匹配元素 的文字 "之和" . 有的换行有的不换行...
jquery的attr, css, add/removeClass
-
attr是操作元素的" 属性" , 当然可以用来设置元素的class类, 这个是通过更改 "class"这个属性来实现的, 它是一个覆盖过程. 重要的是, attr不仅可以用来设置 class 类样式, 主要还是设置其他属性, 如src, href等等
-
css是一种设置 "行内样式" 的方法, 更直接. 比如要直接操作元素的 某个style样式, 如width, height, z-index时,
你不能用attr, 因为这个不是属性, 也不能用addClass等, 所以就只能用css! -
addClass是增加/删除/切换类样式的方法, 它需要预先设置一个类. 这个主要是用于这个类是动态的增加/
或删除, "(不会覆盖原来的已经设置的类)" 如常见的div ul 轮播
三种都可以, 看你的需求而定, 各有各的用途! 应该不会有混淆!
最重要的 z-index 如何动态修改?
在jquery中, 以此播放div时 , 与文字/数字 index对应的 div图片的 z-index要设为比其他 同级 div的要大, 但是它又不能是一个固定的数值, 因为下一次播放另一张div时, 它的值也要变为最大, 但是, 不同div的z-index是不能相同的, 所以这个最大的z-index 必须是动态的, 而且是递增的, 所以就用一个变量 z++来表示.
切换动画的先后动作方式?
一般就是 要求 ####你消失的时候是一下子就不见了, 而出现的时候是逐渐出现的.
$uli.css('left', '+500px');
$uli.stop(true,false).animate({'left': '0'},300);
// css 和 animate的内部实现基本上是一样的, 区别只是一个是静态的css, 一个是动态的css变化.
// 第一行的 div消失, 是直接使用的 静态css变化.
// 第二行的 div出现, 是使用的 动态 animate css变化.
浮动导致的父容器高度塌陷指什么？为什么会产生？有几种解决方法
当一个浮动元素的父容器未设置高度，其中元素浮动后, 会脱离文档流，使得父容器无法计算浮动元素的高度，导致父容器高度塌陷。
解决方法有：
1. 单独给父容器设置一个固定高度。
2. 使父容器触发BFC,触发后浮动元素也会计算高度，从而撑开父容器高度。触发方法可以设置：float,overflow,inlink-block;display:table-cell等
3. 在浮动元素后增加一个"为了布局而存在的" 空的div, 设置这个空的div的 css样式: clear: both;
4. 给父容器设置一个伪类
div:after{
content:"";
display:block;
clear:both;
}
关于z-index的应用问题?
-
Z-index属性只能工作于那些被定义了position属性(而不管是定义的 relative还是absolute. fixed)的元素中。这并足够的重视，尤其是对于那些新手。
-
z-index 只对 "同级"的 兄弟元素有效, 对于其 父级容器则无效: (每一个定位元素都归属于一个stacking context, 也就是说, 它只在它所在的 "堆叠上下文"中有效, 在更高一级的 stacking context中无效! )
这就要求:-
在书写z-index的时候, 只在同级元素之间写, 不要在父元素上写z-index
-
子元素的z-index 并不会对父级的元素有效
即: 假设 尽管子元素的z-index为100, 而它们的父容器的z-index为1,
而跟他的父容器平级的 其他元素的z-index 为2, 那么 其他元素仍然在父容器及其所有的字元素的上面!
-
最后的完成代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>pictures display</title>
<style type="text/css">
* {
list-style:none;
}
.all {
width: 500px;
height: 300px;
overflow: hidden;
position: relative;
margin: 30px auto;
}
.all ul {
position: relative;
z-index: 1;
}
.all ul li {
position: absolute;
}
.all ol {
position: absolute;
z-index: 2;
right: 10px;
bottom: 10px;
}
.all ol li {
float: left;
margin-left:10px;
background-color: #666; /* 像这种数字边框 都要求有 背景底色的*/
border: 1px solid #ccc;
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
cursor: pointer;
margin-top: 10px;
}
.all ol .current {
font-weight: bold;
font-size: 1.2em;
color: red;
width: 30px;
height: 30px;
line-height: 30px;
border: 1px solid #F93;
margin-top: 0;
}
</style>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function(){
var z=10;
$('ol li').mouseover(function(){
var idx = $(this).index();
var $uli = $('ul li').eq(idx);
$(this).attr('class', 'current');
$(this).siblings().attr('class','');
z++;
$uli.css('z-index', z);
$uli.css('left', '500px');
$uli.animate({'left': '0'},500);
});
});
</script>
</head>
<body>
<div class="all">
<ul>
<li><img src="img/red.jpg" width="500" height="300"/>1</li>
<li><img src="img/orange.jpg" width="500" height="300" />2</li>
<li><img src="img/green.jpg" width="500" height="300" />3</li>
<li><img src="img/blue.jpg" width="500" height="300" />4</li>
<li><img src="img/purple.jpg" width="500" height="300" />5</li>
</ul>
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li class="current">5</li>
</ol>
</div>
</body>
</html>
