永利开户送38元体验金,  帮客之家(www.Bkjia.com)教程
最近要做一个首页图片无间隙的滚动的效果,原先准备用marquee来做,但是<marquee>循环滚动时有间隙.在网上找了下。 

在网页中嵌入多媒体内容,网页嵌入多媒体

第10章 在网页中嵌入多媒体内容

现在在制作网页时,除了可以在网页中放置文本、图片外,还可以在页面中嵌入声音、视频、动画等多媒体内容,使得页面看上去更加丰富多彩、动感十足。

10.1 设置滚动字幕<marquee> 属性          属性值              
              说明
———————————————————————————————————————————————————————————
demo:<marquee
direction=”up”>文字从下往上循环滚动</marquee>

      up(从下往上)down(从上往下) direction    
left(从右往左,默认滚动方向)       设置滚动字幕的滚动方向 (滚动方向)    
right(从左往右)
———————————————————————————————————————————————————————————
demo:<marquee
behavior=”alternate”>设置文字循环交替往返进行滚动</marquee>

behavior      scroll      设置文字循环往复滚动(默认行为) (滚动行为)
    slide       设置文字只进行一次滚动        alternate  
设置文字循环交替往返进行滚动  
———————————————————————————————————————————————————————————
demo:<marquee scorllamount=”滚动速度值”
scrolldelay=”延迟时间”>滚动文字</marquee> scorllamount
 设置文字滚动速度,取值为某个数字,越大滚动越快,默认的速度值是6
scrolldelay  
设置文字在每一次滚动后,延迟一段时间后再进行下一次滚动,value以毫秒为单位,值越小越快,默认值是100ms
———————————————————————————————————————————————————————————
设置字幕的滚动区域、背景颜色、与周围对象的间距等 width        
设置文字滚动区域的宽度,可以是数字像素或百分比数值% height      
 设置文字滚动区域的宽度,可以是数字像素或百分比数值% bgcolor      
设置文字滚动区域的背景颜色 hspace        水平间距 vspace        垂直间距
——————————————————————————————————————————————————————————— 10.2
设置背景音乐<bgsound>
<bgsound src=”路径/文件名称”
loop=”循环次数”>
<–loop默认情况下,背景音乐播放一次;如果取值为-1,则表示背景音乐循环不断地播放–>
10.3 嵌入音视频文件<embed> <embed
src=”路径/文件名称”></embed> 属性     说明 src      文件路径
width    以像素为单位定义嵌入式对象的宽度 height  
以像素为单位定义嵌入式对象的宽度 loop    
设置嵌入式对象的播放是否循环不断,取值true时循环不断,否则只播放一次,默认值是false
hidden   设置多媒体播放软件的可视性,默认值是false 10.4
嵌入Flash动画<object>
关于flash在html的引用 ——OBJECT
EMBED:链接1  链接2 HTML插入Flash的全兼容完美解决方案:点此链接 demo:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="500" height="300" id="忍耐中爆发" >
<param name="movie" value="忍耐中爆发.swf">
<param name="FlashVars" value="prizeResult=3">
<param name="quality" value="high">
<param name="menu" value="false">
<param name="wmode" value="transparent">
<param name="allowScriptAccess" value="always" />
<embed src="images/忍耐中爆发.swf" FlashVars="prizeResult=3" allowScriptAccess="always" wmode="transparent" menu="false" quality="high" width="500" height="300" type="application/x-shockwave-flash" pluginspage="http://get.adobe.com/cn/flashplayer/" name="忍耐中爆发"/>
</object>

其中 OBJECT
classidcodebase的值是必须这么写的,告诉浏览器自动下载flash
player的地址,OBJECT标签是用于windows平台的IE浏览器的,EMBED是用于windows和Macintosh平台下的Netscape
Navigator浏览器以及Macintosh平台下的IE浏览器,就是所谓的非IE浏览器。windows平台的IE利用Activex控件来播放flash而其它的浏览器则使用Netscape插件技术来播放flash。
代码效果显示如下:
由于不知道博客园怎么上传swf格式的视频,故截图展示代码效果,显示如下:
永利开户送38元体验金 1 10.5
嵌入Java Applet(扩展)
Applet 是用
Java开发的一种小程序,不能独立运行,必须嵌入HTML文件中,并通过支持Java的浏览器来运行。
基本语法:<applet code=”XXX.class” width=”区域宽度”
height=”区域高度”></applet>
语法说明:XXX.class表示所嵌入的applet类文件,width、height属性用来设置applet文件显示区域,单位是像素。

第10章
在网页中嵌入多媒体内容
现在在制作网页时,除了可以在网页中放置文本、图片外,还…

    
这个相对简单,实现思路:一个设定宽度并且隐藏超出它宽度的内容的容器demo,里面放demo1和demo2,
demo1是滚动内容,demo2为demo1的直接克隆,通过不断改变demo1的scrollTop或者scrollLeft达到滚动的目的,当滚动至demo1与demo2的交界处时直接跳回初始位置,因为demo1与demo2一样,所以分不出跳动的瞬间,从而达到“无缝”滚动的目的。

    先了解一下对象的几个的属性:

以下为引用的内容:
innerHTML:设置或获取位于对象起始和结束标签内的 HTML
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
offsetWidth:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度
<html>
<head>
<title>烈火建站学院 www.bkjia.com</title>

<style type="text/css">
body{}{margin:0px auto; padding:0px;}
ul,li{}{margin:0px; padding:0px;list-style:none;}
.sqBorder {}{width:602px; height:64px; padding:10px; border:1px #000000 solid; background:#555555;}
.scroll_div {}{width:600px; height:62px;margin:0 auto; overflow: hidden; white-space: nowrap; background:#ffffff;}
.scroll_div img {}{width:120px;height:60px;border: 0;margin: auto 8px; border:1px #efefef solid;}
#scroll_begin, #scroll_end, #scroll_begin ul, #scroll_end ul, #scroll_begin ul li, #scroll_end ul li{}{display:inline;}/**//*设置ul和li横排*/
</style>

</head>
<body>
<h2 align="center">向左滚动</h2>
<div style="text-align:center">
<div class="sqBorder">

<div id="scroll_div" class="scroll_div">
<div id="scroll_begin">
<ul>
<li <img src="http://www.bkjia.com/images/logo.gif" _fcksavedurl="http://www.bkjia.com/images/logo.gif" _fcksavedurl="http://www.bkjia.com/images/logo.gif" /></li>
<li><img src="http://www.bkjia.com/images/logo.gif" _fcksavedurl="http://www.bkjia.com/images/logo.gif" _fcksavedurl="http://www.bkjia.com/images/logo.gif" /></li>
<li><img src="http://www.bkjia.com/images/logo.gif" _fcksavedurl="http://www.bkjia.com/images/logo.gif" _fcksavedurl="http://www.bkjia.com/images/logo.gif" /></li>
<li><img src="http://www.bkjia.com/images/logo.gif" _fcksavedurl="http://www.bkjia.com/images/logo.gif" _fcksavedurl="http://www.bkjia.com/images/logo.gif" /></li>
<li><img src="http://www.bkjia.com/images/logo.gif" _fcksavedurl="http://www.bkjia.com/images/logo.gif" _fcksavedurl="http://www.bkjia.com/images/logo.gif" /></li>
</ul>
</div>
<div id="scroll_end"></div>
</div>

</div>

</div>


<style type="text/css">
body{}{margin:0px auto; padding:0px;}
ul,li{}{margin:0px; padding:0px;list-style:none;}
.sqBorder {}{width:122px; height:182px; padding:10px; border:1px #000000 solid; background:#555555;}
.scroll_div {}{width:122px; height:180px; margin:0 auto; overflow: hidden; white-space: nowrap; background:#ffffff;}
.scroll_div img {}{width:120px;height:60px;border:0;margin: 8px auto; border:1px #efefef solid;}
</style>

<h2 align="center">向上滚动</h2>
<div style="text-align:center">
<div class="sqBorder">

<div id="scroll_div" class="scroll_div">
<div id="scroll_begin">
<ul>
<li><img src="http://www.bkjia.com/images/logo.gif" _fcksavedurl="http://www.bkjia.com/images/logo.gif" _fcksavedurl="http://www.bkjia.com/images/logo.gif" /></li>
<li><img src="http://www.bkjia.com/images/logo.gif" _fcksavedurl="http://www.bkjia.com/images/logo.gif" _fcksavedurl="http://www.bkjia.com/images/logo.gif" /></li>
<li><img src="http://www.bkjia.com/images/logo.gif" _fcksavedurl="http://www.bkjia.com/images/logo.gif" _fcksavedurl="http://www.bkjia.com/images/logo.gif" /></li>
<li><img src="http://www.bkjia.com/images/logo.gif" _fcksavedurl="http://www.bkjia.com/images/logo.gif" _fcksavedurl="http://www.bkjia.com/images/logo.gif" /></li>
<li><img src="http://www.bkjia.com/images/logo.gif" _fcksavedurl="http://www.bkjia.com/images/logo.gif" _fcksavedurl="http://www.bkjia.com/images/logo.gif" /></li>
<li><img src="http://www.bkjia.com/images/logo.gif" _fcksavedurl="http://www.bkjia.com/images/logo.gif" _fcksavedurl="http://www.bkjia.com/images/logo.gif" /></li>
</ul>
</div>
<div id="scroll_end"></div>
</div>

</div>

</div>

</body>
</html><br /><center>如不能显示效果,请按Ctrl+F5刷新本页,更多网页代码:<a href='http://www.bkjia.com/' _fcksavedurl='http://www.bkjia.com/' target='_blank'>http://www.bkjia.com/</a></center>

提示:可修改后代码再运行!

最近要做一个首页图片无间隙的滚动的效果,原先准备用marquee来做,但是marquee循环滚动时有间隙.在网上找了下。
这个相…

相关文章