晓飞扬 - 博客园

2012年3月14日

XHTML块级元素有哪些呢？

　　◎ address – 地址

　　◎ blockquote – 块引用

　　◎ center – 举中对齐块

　　◎ dir – 目录列表

　　◎ div – 常用块级容易，也是css layout的主要标签

　　◎ dl – 定义列表

　　◎ fieldset – form控制组

　　◎ form – 交互表单

　　◎ h1 – 大标题

　　◎ h2 – 副标题

　　◎ h3 – 3级标题

　　◎ h4 – 4级标题

　　◎ h5 – 5级标题

　　◎ h6 – 6级标题

　　◎ hr – 水平分隔线

　　◎ isindex – input prompt

　　◎ menu – 菜单列表

　　◎ noframes – frames可选内容，（对于不支持frame的浏览器显示此区块内容

　　◎ noscript – 可选脚本内容（对于不支持script的浏览器显示此内容）

　　◎ ol – 排序表单

　　◎ p – 段落

　　◎ pre – 格式化文本

　　◎ table – 表格

　　◎ ul – 非排序列表

   XHTML行内元素有哪些呢？

　　◎ a – 锚点◎ abbr – 缩写

　　◎ acronym – 首字

　　◎ b – 粗体(不推荐)

　　◎ bdo – bidi override

　　◎ big – 大字体

　　◎ br – 换行

　　◎ cite – 引用

　　◎ code – 计算机代码(在引用源码的时候需要)

　　◎ dfn – 定义字段

　　◎ em – 强调

　　◎ font – 字体设定(不推荐)

　　◎ i – 斜体

　　◎ img – 图片

　　◎ input – 输入框

　　◎ kbd – 定义键盘文本

　　◎ label – 表格标签

　　◎ q – 短引用

　　◎ s – 中划线(不推荐)

　　◎ samp – 定义范例计算机代码

　　◎ select – 项目选择

　　◎ small – 小字体文本

　　◎ span – 常用内联容器，定义文本内区块

　　◎ strike – 中划线

　　◎ strong – 粗体强调

　　◎ sub – 下标

　　◎ sup – 上标

　　◎ textarea – 多行文本输入框

　　◎ tt – 电传文本

　　◎ u – 下划线

　　◎ var – 定义变量

   关于可变元素

   当块内元素和行内元素随环境而变化时，它就变成了可根据上下文关系确定该元素是块元素或者行内元素，即可变元素。可变元素还是属于上述两种元素类别，一旦上下文关系确定了他的类别，他就要遵循块元素或者内联元素的规则限制。

   可变元素有哪些呢？

   可变元素为根据上下文语境决定该元素为块元素或者内联元素。

　　◎ applet – java applet

　　◎ button – 按钮

　　◎ del – 删除文本

　　◎ iframe – inline frame

　　◎ ins – 插入的文本

　　◎ map – 图片区块(map)

　　◎ object – object对象

　　◎ script – 客户端脚本

posted @ 2012-03-14 15:34 晓飞扬阅读(55) 评论(0) 编辑

2011年1月22日

Js幻灯片展示播放效果

上次的jQuery幻灯片播放效果使用jQuery做的，这次我们再尝试用原生的js做一个，嘿嘿

还是老一套，先是html和css，如下：

<div id="slidBox">
	<ul>
		<li>
			<a href="http://www.baidu.com" target="_blank"><img src="1.jpg" title="百度" alt="百度" /></a>
		</li>
		<li>
			<a href="http://www.google.cn" target="_blank"><img src="2.jpg" title="谷歌" alt="谷歌" /></a>
		</li>
		<li>
			<a href="http://www.bing.com" target="_blank"><img src="3.jpg" title="必应" alt="必应" /></a>
		</li>
		<li>
			<a href="http://www.youdao.com" target="_blank"><img src="4.jpg" title="有道" alt="有道" /></a>
		</li>				
	</ul>
	<p>
		<a href="#nogo"></a>
		<a href="#nogo"></a>
		<a href="#nogo"></a>
		<a href="#nogo"></a>
		<span></span>
	</p>
</div>

body{font-size:12px; background-color:#FFF; text-align:center;}
#page{ width:950px; margin:0 auto; text-align:left;}
a,a:link,a:visited,a:hover,a:active{text-decoration:none;}
p,a img,ul,li{margin:0; padding:0;}
a img{ border:none; }
ul,li{list-style-type:none;}

#slidBox{padding:4px; width:410px; height:324px; border:1px solid red;}
#slidBox  ul li{ float:left; padding:1px;}
#slidBox  ul li img{ width:203px; height:160px; display:block;}
#slidBox ul.slidBoxImages{ width:410px; height:300px; overflow:hidden; }
#slidBox ul.slidBoxImages li{position:relative; width:410px; height:300px; top:0; left:0; }
#slidBox ul.slidBoxImages li img{width:410px; height:300px;}
#slidBox p{ background:#F5F5F5; height:18px; line-height:18px; margin-top:2px; padding:2px 10px; font-weight:bold; position:relative; display:none;}
#slidBox p span{float:right; margin-right:60px;}
#slidBox p a { display:block; width:18px; height:18px; background:transparent url(t1.jpg) no-repeat; position:relative; left:4px; float:left;}
#slidBox p a.current{background-image:url(t2.jpg);}

这次使用的是ul li 保存图片，而且定义了在没有js的情况下图片的展示效果，保证用户禁用js之后还能让图片正常展示：

禁用了js的显示效果：

使用js的效果：

哈哈，看着还不错。下面我们来说最主要的东西：js，嘿嘿，代码如下：

function getTarget(e){//获得事件源
　　  var target=e?e.target:(window.event?window.event.srcElement:null);
	if(!target){return null;}
	while(target.nodeType!=1&&target.nodeName.toLowerCase()!="body"){target=target.parentNode;}
	return target;
}
var slideImages={
	//公共变量
	"slideBoxId":"",
	"dynamicClass":"",
	"IntervalSpeed":4000,
	"nowPosition":0,
	
	"liList":null,				//图片列表
	"pointerList":null,			//幻灯片下方的指示器列表
	"slideIntro":null,			//各个大图的说明
	"interval":null,			//幻灯片轮转
	
	"init":function(slideBoxId,dynamicClass,IntervalSpeed){
		if(!document.getElementById||!document.createTextNode) {return;}
		if(!dynamicClass||!slideBoxId){return;}
		
		slideImages.slideBoxId=slideBoxId;										//图片幻灯片容器id
		slideImages.dynamicClass=dynamicClass;									//变换后的类名
		slideImages.IntervalSpeed=(!IntervalSpeed)?slideImages.IntervalSpeed:IntervalSpeed;	//轮换的时间间隔
		slideImages.nowPosition=Math.floor(Math.random()*4);					//指示现在所轮换到的图片
		
		//得到幻灯片容器，并且为函数中经常使用的变量赋值
		var targetObj=document.getElementById(slideImages.slideBoxId);			//幻灯片容器
		if(!targetObj){return;}
		var slideUl=targetObj.getElementsByTagName("ul");		
		if(!slideUl){return;}	
		slideImages.liList=slideUl[0].getElementsByTagName("li");				//得到图片集合li
		if(!slideImages.liList){return;}
		var slideP=targetObj.getElementsByTagName("p");
		if(!slideP){return;}
		slideImages.pointerList=slideP[0].getElementsByTagName("a");			//得到指示器集合a
		if(!slideImages.pointerList){return;}
		slideImages.slideIntro=slideP[0].getElementsByTagName("span");
		if(!slideImages.slideIntro){return;}
		slideImages.slideIntro=slideImages.slideIntro[0];						//得到说明性文字span
				
		for(var i=0;i<slideImages.liList.length;i++){							//隐藏其他的图片,显示nowPosition指示的那一张图片
			if(i!=slideImages.nowPosition) slideImages.liList[i].style.display="none";
		}
		slideP[0].style.display="block";
		slideImages.pointerList[slideImages.nowPosition].className="current";
		slideImages.slideIntro.innerHTML=slideImages.liList[slideImages.nowPosition].getElementsByTagName("img")[0].getAttribute("title");
		
		slideUl[0].className=slideImages.dynamicClass;							//改变图片的显示状态
		slideImages.interval=setInterval(slideImages.playIt,slideImages.IntervalSpeed);
		slideImages.addPointerMouseEvent();										//添加鼠标事件
	},
	//工具方法	
	"getPointerIndex":function(pointer){										//得到特定指示器的位置
		for(var i=0;i<slideImages.pointerList.length;i++){
			if(slideImages.pointerList[i]==pointer){return i;}
		}
		return -1;
	},
	"mouseOverPointer":function (e){											//鼠标放在特定的指示器上面
		clearInterval(slideImages.interval);
		slideImages.liList[slideImages.nowPosition].style.display="none";		//隐藏上一个
		
		var pointer=getTarget(e);
		var index=slideImages.getPointerIndex(pointer);
		slideImages.pointerList[slideImages.nowPosition].className="";
		slideImages.nowPosition=(index-1+4)%4;
		slideImages.playIt();
	},
	"mouseOutPointer":function (e){												//鼠标离开指示器
		slideImages.interval=setInterval(slideImages.playIt,slideImages.IntervalSpeed);
	},
	"playIt":function (){														//播放幻灯片
		slideImages.liList[slideImages.nowPosition].style.display="none";		//隐藏上一个
		slideImages.pointerList[slideImages.nowPosition].className="";
		
		slideImages.nowPosition=(slideImages.nowPosition+1)%4;					//显示下一个
		slideImages.liList[slideImages.nowPosition].style.display="";
		slideImages.pointerList[slideImages.nowPosition].className="current";	//改变指示器和说明文字
		slideImages.slideIntro.innerHTML=slideImages.liList[slideImages.nowPosition].getElementsByTagName("img")[0].getAttribute("title");										
	},
	"addPointerMouseEvent":function (){											//添加指示器鼠标事件
		for(var i=0;i<slideImages.pointerList.length;i++){
			slideImages.pointerList[i].onmouseover=slideImages.mouseOverPointer;
			slideImages.pointerList[i].onmouseout=slideImages.mouseOutPointer;
		}
	}
};
slideImages.init("slidBox","slidBoxImages");

唉，真是的，jQuery的几代码就搞定的东西现在我们用js写的话就用近百行代码啦，哈哈，不过原生的js的代码执行的效率快得多，毕竟少了jQuery这个框架。

首先是这个getTarget方法，用来获得一个事件的事件源，获取事件源ie和其他的浏览器有不同的方法，ie的是window.event.secElement，而其他的浏览器是e.target就行了，嘿嘿。

这次主要使用了一个js对象slideImages来保存使用到的方法，最最主要的方法就是init方法，他增加了各种对象的事件添加方法。呵呵，结束……

posted @ 2011-01-22 20:02 晓飞扬阅读(380) 评论(0) 编辑

jQuery图片幻灯片展示

闲来无事，使用jQuery做了一个图片幻灯片，贴出来大家都看看，多扔砖头……

先说前台吧，很简单，如下所示：

<div class="slidBox">
	<div class="slidBoxImages">
	        <a href="http://www.baidu.com" target="_blank"><img src="1.jpg" title="" alt="" /></a>
		<a href="http://www.youdao.com" target="_blank"><img src="2.jpg" title="" alt="" /></a>
		<a href="http://www.bing.com" target="_blank"><img src="3.jpg" title="" alt="" /></a>
		<a href="http://www.google.cn" target="_blank"><img src="4.jpg" title="" alt="" /></a>
	</div>
	<p>
		<a href="#nogo"></a>
		<a href="#nogo"></a>
		<a href="#nogo"></a>
		<a href="#nogo"></a>
		<span></span>
	</p>
</div>

再说css，如下：

body{font-size:12px; background-color:#FFF; text-align:center;}
#page{ width:950px; margin:0 auto; text-align:left;}
a,a:link,a:visited,a:hover,a:active{text-decoration:none;}
p,a img{margin:0; padding:0;}
a img{ border:none;}

.slidBox{padding:4px; width:410px; border:1px solid red;}
.slidBoxImages{position:relative; width:410px; height:300px; overflow:hidden; top:0; left:0; }
.slidBoxImages img{width:410px; height:300px;}
.slidBox p{ background:#F5F5F5; height:18px; line-height:18px; margin-top:2px; padding:2px 10px; font-weight:bold; position:relative;}
.slidBox p span{float:right; margin-right:60px;}
.slidBox p a { display:block; width:18px; height:18px; background:transparent url(t1.jpg) no-repeat; position:relative; left:4px; float:left;}
.slidBox p a.current{background-image:url(t2.jpg);}

很简单，总体上一个slidBox，上面一部分是图片列表，下面是指示器，指示当前所展示的图片，里面还有一个span，是图的说明。

现在来说js，嘿嘿，有一点，千万别忘了加载jQuery，题目，就是jQuery做的，这个可是很重要的

<script type="text/javascript" src="http://files.cnblogs.com/wangdetian168/jquery-1.4.2.min.js"></script>

然后我们新建一个文件吧，写咱们自己js，代码如下：

$(document).ready(function(){
//slidetext数组为变换的文字
var slidetext=new Array();
slidetext[0]="焦点图01";
slidetext[1]="焦点图02";
slidetext[2]="焦点图03";
slidetext[3]="焦点图04";

//幻灯片自动播放的速度
var IntervalSpeed=5000;
//幻灯片渐隐的速度
var slidOutSpeed=1000;
//幻灯片渐显的速度
var slidInSpeed=2000;
//总的幻灯片的数量
var picNum=4;
//幻灯片播放到的位置,默认从第一个开始播放
var nowPosition=Math.floor(Math.random()*picNum);
$(".slidBox p a").eq(nowPosition).addClass("current");
$(".slidBox p span").text(slidetext[nowPosition]);
//幻灯片自动播放
var interval = setInterval(playIt,IntervalSpeed);
function playIt(){
	//当前幻灯片消失，下一个显现
	$(".slidBoxImages a img").fadeOut(slidOutSpeed,function(){				
		$(".slidBoxImages a img").fadeIn(slidInSpeed);
	});
	$(".slidBox p a.current").removeClass("current");
	//改变大图说明和下面的小按钮，以及点击大图之后跳转到的链接
	nowPosition=(nowPosition+1)%picNum;
	$(".slidBox p a").eq(nowPosition).addClass("current");
	$(".slidBox p span").text(slidetext[nowPosition]);
}
$(".slidBox p a").mouseover(function(){
	clearInterval(interval);
	nowPosition=$(this).index(".slidBox p a")-1;
	playIt();
});	
$(".slidBox p a").mouseout(function(){	
	interval = setInterval(playIt,IntervalSpeed);
});
});

slidetext保存各个图片的说明，nowPosition保存图片当前滑动到的位置。有一个interval，设置的图片多长时间轮换一次，，每次执行的playIt这个函数。每执行一次，nowPosition就会增加一。当鼠标放在指示器上面时候，就会移动到指定的位置。mouseover和mouseout函数是清除和重新启动那个interval的。

嘿嘿，这些其实看起来都不难，只要你会基本的jQuery就ok……

posted @ 2011-01-22 18:31 晓飞扬阅读(1975) 评论(0) 编辑