用jquery写循环播放div -2

2023-01-27 15:26:45

前面所说的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>

码农公寓