当前位置:  编程技术>WEB前端
本页文章导读:
    ▪CSS+JS实现结构化无限级导航菜单列表(直接调用)       今天跟大家分享一下如何通过HTML的结构化方式实现无限级导航菜单列表的功能!首先让大家看一下两个实例演示—— [无限级竖式菜单列表] [无限级横式菜单列表] 这里详细分析的并非JS的源.........
    ▪获得css中的计算样式      要获得css元素中的计算样式(即经过层叠之后,最终的样式),支持W3C的浏览器可以使用document.defaultView.getComputedSyle方法。该方法接受两个参数,第一个参数为要获得样式的元素,第二个参数为一.........
    ▪网页上播放mp3或flash      <object id="player1" type="application/x-oleobject" height="360" width="300" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"> <param NAME="AutoStart" VALUE="-1"> <!--是否自动播放--> <param NAME="url".........

[1]CSS+JS实现结构化无限级导航菜单列表(直接调用)
    来源: 互联网  发布时间: 2013-11-06

今天跟大家分享一下如何通过HTML的结构化方式实现无限级导航菜单列表的功能!首先让大家看一下两个实例演示——

[无限级竖式菜单列表] [无限级横式菜单列表]

这里详细分析的并非JS的源码部分(封装好的JS源码是从国外网站摘录下来的),而是前台直接调用的关键部分,主要有三点——

1、直接调用的JS函数

ddlevelsmenu.setup(导航菜单ID, 列表方式);

显然易见,我们要预先给导航菜单设定一个ID,这里没固定是DIV还是UL等其它HTML标签。而“列表方式”的参数值有两个——topbar:竖式列表显示,sidebar:横式列表显示。

2、HTML的结构

这里包含的结构主要有主菜单(导航)、下级菜单两种HTML结构和rel标签属性。

(1)其中主菜单的结构是用基本的UL、LI(li里面有超链接内容)结构,形如:

<ul id=’NavBar’>
<li><a href=/blog_article/’/index.html rel=’Menu1’></li>
<li><a href=/blog_article/’/index.html rel=’Menu2’></li>
<li><a href=/blog_article/’/index.html rel=’Menu3’></li>
<li><a href=/blog_article/’/index.html rel=’Menu4’></li>
……
</ul>

其中,rel的属性值在这相当于id的作用——没有rel表示没有下级菜单,否则表示有;而其值跟下级菜单的id是一一对应的。比如:rel=’Menu1’表示对象id=’Menu1’是它的下级菜单内容,如此类推。

(2)下级菜单结构同样由ul、li来组成,不同的是没有了rel属性。如果想继续增加下级菜单,在该菜单的后面(li标签外)再添加一个ul、li的基本机构……就类似这样,一层一层地往下无限添加下级菜单……

3、CSS样式设置

至于菜单的样式问题,其实跟上述的JS和HTML布局是完全无关的,设计者可以跟平常一样任意设定。

从以上分析可知,无论是竖式还是横式的菜单列表,它们的HTML结构是完全一样的,只要设定主函数的属性值即可灵活实现。另外,该实例中式包含了分级菜单的指示图标。这个是可以改变的,具体可以打开ddlevelsfiles/ddlevelsmenu.js文件,找到arrowpointers的设置,里面包含了图片的相对位置和长宽大小(如果长宽设置为0可视为不使用图标方式)。有兴趣的朋友可以根据自个需要进行调整。

最后把完整的实例源码打包跟大家分享一下。

【下载页面】

作者:gee_56 发表于2013-3-11 14:29:05 原文链接
阅读:64 评论:0 查看评论

    
[2]获得css中的计算样式
    来源:    发布时间: 2013-11-06

要获得css元素中的计算样式(即经过层叠之后,最终的样式),支持W3C的浏览器可以使用document.defaultView.getComputedSyle方法。该方法接受两个参数,第一个参数为要获得样式的元素,第二个参数为一个伪元素字符串(例如:":after",如果没有,就置为null)。该方法返回一个StyleSheetDeclaration对象,在通过该对象的getPropertyValue(propertyName)获得最终的样式属性值。注意,这里的proprtyName为wrold-world类型(如: background-color)。而IE中使用element.currentStyle[propertyName]方法,注意这里的propertyName为worldWorld类型(如:backgroundColor)。

本文链接


    
[3]网页上播放mp3或flash
    来源:    发布时间: 2013-11-06
<object id="player1" type="application/x-oleobject" height="360" width="300" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
<param NAME="AutoStart" VALUE="-1"> <!--是否自动播放-->
<param NAME="url" value="D:\FireAlarm.mp3"> <!--播放的文件地址-->
<param NAME="PlayCount" VALUE="1">
</object>


<img src="/blog_article/1.jpg" onclick="player1.controls.play();" alt="播放" >
<img src="/blog_article/1.jpg" onclick="player1.controls.pause();" alt="暂停" >
<img src="/blog_article/1.jpg" onclick="player1.controls.Stop();" alt="停止" >
<img src="/blog_article/1.jpg" onclick="javascript:if(player1.playState==3)wmp.fullScreen=true;" alt="全屏"

>
<img src="/blog_article/1.jpg" onclick="player1.settings.mute = !player1.settings.mute;" alt="静音"

>

附一:

控制播放器控件

media player控制
对应控件 <object classid="clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6"

player.URL = url; 设置文件来源
player.controls.play(); 播放
player.controls.stop(); 停止
player.controls.pause(); 暂停
player.controls.currentPosition 返回播放文件的当前时间位置(以秒为单位)
player.controls.currentPositionString 时间格式的字符串 "0:32"
player.currentMedia.duration 返回播放文件的总长度(以秒为单位)
player.currentMedia.durationString 时间格式的字符串 "4:34"
player.settings.volume 音量 (0-100)
player.settings.balance 声道,通过它应该可以进行立体声、左声道、右声道的控制。但对应的取值尚不清楚。
player.settings.mute = s 静音(s取值为true和false)
player.closedCaption.CaptioningID 网页中出现字幕的容器的ID
player.closedCaption.SAMIFileName 字幕文件地址
player.playState 返回播放器状态( 3:正在播放,2:暂停1:已停止)
player.fullscreen=1 全屏播放(全屏后按ESC返回)



======================================================

REAL PLAYER控制
对应控件 <object classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" 

player.DoPlay() 播放
player.DoPause() 暂停
player.DoStop() 停止
player.GetLength() 返回播放文件的总长度(以毫秒为单位)
player.GetPosition() 返回播放文件的当前时间位置(以毫秒为单位)
player.GetPlayState() 返回播放器状态(0:停止,1:连接,2:缓冲,3:播放,4:暂停,5:寻找)
player.SetPosition(n) 时间位置跳到n的地方(n取值以毫秒为单位)
player.SetVolume(n) 设置音量(n取值为0到100)
player.SetMute(s) 静音(s取值为true和false)
player.SetFullScreen() 全屏(全屏后按ESC返回)
player.setSource() 设置文件来源

 
附二:
param name标签 部分(播放器代码) 

<param name="playcount" value="1"><!--控制重复次数: “x”为几重复播放几次; x=0,无限循环。-->
<param name="autostart" value="0"><!--控制播放方式: x=1,打开网页自动播放; x=0,按播放键播放。-->
<param name="clicktoplay" value="1"><!--控制播放开关: x=1,可鼠标点击控制播放或暂停状态; x=0,禁用此功能。-->
<param name="displaysize" value="0"><!--控制播放画面: x=0,原始大小; x=1,一半大小; x=2,2倍大小。-->
<param name="enablefullscreen controls" value="1"><!--控制切换全屏: x=1,允许切换为全屏; x=0,禁用此功能。-->
<param name="showaudio controls" value="1"><!--控制音量: x=1,允许调节音量; x=0,禁止音量调节。-->
<param name="enablecontext menu" value="1"><!--控制快捷菜单: x=1,允许使用右键菜单; x=0,禁用右键菜单。-->
<param name="showdisplay" value="1"><!--控制版权信息: x=1,显示电影及作者信息;x=0,不显示相关信息-->
<param NAME="AutoStart" VALUE="-1"><!--是否自动播放-->
<param NAME="Balance" VALUE="0"><!--调整左右声道平衡,同上面旧播放器代码-->
<param name="enabled" value="-1"><!--播放器是否可人为控制-->
<param NAME="EnableContextMenu" VALUE="-1"><!--是否启用上下文菜单-->
<param NAME="url" VALUE="http://1.wma"> <!--播放的文件地址--><param NAME="PlayCount" VALUE="1"><!--播放次数控制,为整数-->
<param name="rate" value="1"><!--播放速率控制,1为正常,允许小数,1.0-2.0-->
<param name="currentPosition" value="0"><!--控件设置:当前位置-->
<param name="currentMarker" value="0"><!--控件设置:当前标记-->
<param name="defaultFrame" value=""><!--显示默认框架-->
<param name="invokeURLs" value="0"><!--脚本命令设置:是否调用URL-->
<param name="baseURL" value=""><!--脚本命令设置:被调用的URL-->
<param name="stretchToFit" value="0"><!--是否按比例伸展-->
<param name="volume" value="50"><!--默认声音大小0%-100%,50则为50%-->
<param name="mute" value="0"><!--是否静音--
<param name="uiMode" value="mini"><!--播放器显示模式:Full显示全部;mini最简化;None不显示播放控制,只显示视频窗口;invisible全部不显示--><param name="windowlessVideo" value

    
最新技术文章:
▪css white-space:nowrap属性用法(可以强制文字不...
▪IE里button设置border:none属性无效解决方法
▪border:none与border:0使用区别
▪html清除浮动的6种方法示例
▪三个不常见的 HTML5 实用新特性简介
▪css代码优化的12个技巧
▪低版本IE正常运行HTML5+CSS3网站的3种解决方案
▪CSS Hack大全-教你如何区分出IE6-IE10、FireFox、Chr...
▪ie6,ie7,ie8完美支持position:fixed的终极解决方案
▪小技巧处理div内容溢出
▪html小技巧之td,div标签里内容不换行
▪纯CSS实现鼠标放上去改变文字内容
▪li中插入img图片间有空隙的解决方案
▪CSS3中Transition属性详解以及示例分享
▪父div高度不能自适应子div高度的解决方案
▪告别AJAX实现无刷新提交表单
▪从零学CSS系列之文本属性
▪HTML 标签
▪CSS3+Js实现响应式导航条
▪CSS3实例分享之多重背景的实现(Multiple background...
▪用css截取字符的几种方法详解(css排版隐藏溢...
▪页面遮罩层,并且阻止页面body滚动。bootstrap...
▪CSS可以做的几个令你叹为观止的实例分享
▪详细分析css float 属性以及position:absolute 的区...
▪IE6/IE7/IE8/IE9中tbody的innerHTML不能赋值的完美解...
▪CSS小例子(只显示下划线的文本框,像文字一...
▪可以给img元素设置背景图
▪不通过JavaScript实现的自动滚动视差效果
▪div+CSS 兼容小摘
▪CSS的inherit与auto使用分析
 


站内导航:


特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

©2012-2021,,E-mail:www_#163.com(请将#改为@)

浙ICP备11055608号-3