2023-10-01 09:00来源:m.sf1369.com作者:宇宇
、国际域名。
由于互联网起源于美国,最早的域名没有国家身份,按用途分为几大类,以不同的后缀结尾:.com(商业公司用);.Net(用于网络服务);.Org(用于组织协会等);.gov(用于政府部门);.edu(用于教育机构);.mil(用于军事用途);.int(用于国际组织)。
国家域名(地理顶级域名)
共有243个国家和地区的代码,例如,.cn代表中国,.uk代表英国,.us代表美国。其中,.cn是我国一个特殊的顶级域名,其注册由cnnic管理。以.cn结尾的二级域名简称国内域名。在国家代码顶级域名下注册二级域名的规则和政策与不同国家的政策有关
常见域名com(用于商业公司);.net(用于网络服务);.org(用于组织协会等);.gov(用于政府部门); .edu(用于教育机构)。
.com 这是我们最常见的域名后缀,是商业组织和公司所用后缀。
.net 是网络服务商所用后缀名。
.gov 政府部门所用后缀名,通过这个就可以判断网站是不是正规的政府部门网站了。
.org 非盈利性组织所用后缀名。
.int 国际组织所用后缀名。
.cn 中国国家顶级域名。
.com.cn 中国商业组织和公司所用后缀。
.net.cn 中国网络服务商所用后缀。
.gov.cn 中国政府机构所有后缀。
.org.cn 中国非盈组织所用后缀。
素材的准备。为了更好的表现网站友肢的风格和特色,具备一些更富表现力和吸引力的图片是必不可少的。同理,准备了一些与网页主题密切相关的图片,用于做为实现图片滚动效果的素材。
打开Dreamweaver8,新建一网页文件,并保存为名为“index.html文件。
切换至代码编辑界面,输入如下代码:
<body><div id=photo-list> <ul id=scroll>
<li><a href=#><img src=images/1.jpg width=100px height=100px alt=/></a></li>
<li><a href=#><img src=images/2.jpg width=100px height=100px alt=/></a></li>
<li><a href=#><img src=images/3.jpg width=100px height=100px alt=/></a></li>
<li><a href=#><img src=images/4.jpg width=100px height=100px alt=/></a></li>
<li><a href=#><img src=images/5.jpg width=100px height=100px alt=/></a></li>
<li><a href=#><img src=images/6.jpg width=100px height=100px alt=/></a></li> </ul> </div></body>
对应效果如图所示:
新建一CSS样式表文件,并将该文件保存到与“index.html”相同的目录下,文件名称为“MyStyle.css。
在新建的样式表文件MyStyle.css”文件中输入如下代码:
* { padding:0; margin:0;} /*设置所有对像的内边距为0*/
body { text-align:center;} /*设置页面居中对齐*/
#photo-list {
/* 6张图片的宽度(包清差含宽度、padding、border、图片间的好正世留白)
计算:6*(100+2*2+1*2+9) - 9
之所以减去9是第6张图片的右边留白 */
width:681px;
/* 图片的宽度(包含高度、padding、border)
计算:100+2*2+1*2 */
height:106px;
margin:50px auto;
overflow:hidden; /*溢出部份将被隐藏*/
border:1px dashed #ccc;
}
#photo-list ul { list-style:none;}
#photo-list li { float:left; padding-right:9px;}
#photo-list img { border:1px solid #ddd; background:#fff; padding:2px;}
对应文件内容如图所示:
在网页文件index.html中添加对该样式表的引用:
<link rel=stylesheet type=text/css href=MyStyle.css>
此时网页效果如图所示:
新建一个JS文件,并将该文件另存为“MoveEffect.js。
在”MoveEffect.js“文件中输入如下所示代码:
var id = function(el) { return document.getElementById(el); },
c = id('photo-list');
if(c) {
var ul = id('scroll'),
lis = ul.getElementsByTagName('li'),
itemCount = lis.length,
width = lis[0].offsetWidth, //获得每个img容器的宽度
marquee = function() {
c.scrollLeft += 2;
if(c.scrollLeft % width <= 1){ //当 c.scrollLeft 和 width 相等时,把第一个img追加到最后面
ul.appendChild(ul.getElementsByTagName('li')[0]);
c.scrollLeft = 0;
};
},
speed = 50; //数值越大越慢
ul.style.width = width*itemCount + 'px'; //加载完后设置容器长度
var timer = setInterval(marquee, speed);
c.onmouseover = function() {
clearInterval(timer);
};
c.onmouseout = function() {
timer = setInterval(marquee, speed);
};
};
然后在主页文件index.html”中添加对该“MoveEffect.js”文件的引用。
<script type=text/javascript src=MoveEffect.js></script>
代码如图所示:
打开“index.html”网页文件,最终效果如果所示:
<body>
<style type=text/css首旁>
<!--
#demo {
background: #FFF;
overflow:hidden;
border: 1px dashed #CCC;
width: 500px;
}
#demo img {
border: 3px solid #F2F2F2;
}
#indemo {
float: left;
width: 800%;
}
#demo1 {
float: left;
}
#demo2 {
float: left;
}
-->
</style>
<漏慧div id=demo>
<div id=indemo>
<div id=demo1>
<a href=#><img src=images/01.jpg border=0 /></a>
<a href=#><img src=images/01.jpg border=0 /></a>
<a href=#><img src=images/01.jpg border=0 /></a>
<a href=#><img src=images/01.jpg border=0 /></a>
<a href=#><img src=images/01.jpg border=0 /></a>
<a href=#><img src=images/01.jpg border=0 /></a>
</div>返芹答
<div id=demo2></div>
</div>
</div>
<script>
<!--
var speed=10;
var tab=document.getElementById(demo);
var tab1=document.getElementById(demo1);
var tab2=document.getElementById(demo2);
tab2.innerHTML=tab1.innerHTML;
function Marquee(){
if(tab2.offsetWidth-tab.scrollLeft<=0)
tab.scrollLeft-=tab1.offsetWidth
else{
tab.scrollLeft++;
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
-->
</script>
</body>
如能解惑 还请采纳 谢谢!!
<!--下面是向上滚动代码-->
<div id=butong_net_top
style=overflow:hidden;height:100;width:90;>
<div id=butong_net_top1>
<img src=插入需要滚动的图片>
<img src=罩迹埋插入需要滚动的图片>
<img src=插入需要滚动的图片>
<img src=插入需要滚动的图片>
<img src=插入需要滚动的图片>州伍
</div>
<div
id=butong_net_top2></div>
</div>
<script>
var speed=30
butong_net_top2.innerHTML=butong_net_top1.innerHTML
//克隆butong_net_top1为butong_net_top2
function Marquee1(){
//当滚动至butong_net_top1与butong_net_top2交界时物蚂
if(butong_net_top2.offsetTop-butong_net_top.scrollTop<=0)&<60;&<60;
butong_net_top.scrollTop-=butong_net_top1.offsetHeight
//butong_net_top跳到最顶端
else{
butong_net_top.scrollTop++;
}
}
var MyMar1=setInterval(Marquee1,speed)//设置定时器
//鼠标移上时清除定时器达到滚动停止的目的
butong_net_top.onmouseover=function() {clearInterval(MyMar1)}
//鼠标移开时重设定时器
butong_net_top.onmouseout=function(){MyMar1=setInterval(Marquee1,speed)}
</script>
<!--向上滚动代码结束-->
<br>
<!--下面是向下滚动代码-->
<div id=butong_net_bottom
style=overflow:hidden;height:100;width:90;>
<div id=butong_net_bottom1>
<img src=插入需要滚动的图片>
<img src=插入需要滚动的图片>
<img src=插入需要滚动的图片>
<img src=插入需要滚动的图片>
<img src=插入需要滚动的图片>
</div>
<div
id=butong_net_bottom2></div>
</div>
<script>
var speed=30
butong_net_bottom2.innerHTML=butong_net_bottom1.innerHTML
butong_net_bottom.scrollTop=butong_net_bottom.scrollHeight
function Marquee2(){
if(butong_net_bottom1.offsetTop-butong_net_bottom.scrollTop>=0)
butong_net_bottom.scrollTop+=butong_net_bottom2.offsetHeight
else{
butong_net_bottom.scrollTop--
}
}
var MyMar2=setInterval(Marquee2,speed)
butong_net_bottom.onmouseover=function()
{clearInterval(MyMar2)}
butong_net_bottom.onmouseout=function()
{MyMar2=setInterval(Marquee2,speed)}
</script>
<!--向下滚动代码结束-->
<br>
<!--下面是向左滚动代码-->
<div id=butong_net_left
style=overflow:hidden;width:500px;>
<table cellpadding=0 cellspacing=0
border=0>
<tr><td
id=butong_net_left1 valign=top
align=center>
<table cellpadding=2 cellspacing=0
border=0>
<tr align=center>
<td><img
src=<img
src=插入需要滚动的图片></td>
<td><img
src=插入需要滚动的图片></td>
<td><img
src=插入需要滚动的图片></td>
<td><img
src=插入需要滚动的图片></td>
<td><img
src=插入需要滚动的图片></td>
</tr>
</table>
</td>
<td id=butong_net_left2
valign=top></td>
</tr>
</table>
</div>
<script>
var speed=30//速度数值越大速度越慢
butong_net_left2.innerHTML=butong_net_left1.innerHTML
function Marquee3(){
if(butong_net_left2.offsetWidth-butong_net_left.scrollLeft<=0)
butong_net_left.scrollLeft-=butong_net_left1.offsetWidth
else{
butong_net_left.scrollLeft++
}
}
var MyMar3=setInterval(Marquee3,speed)
butong_net_left.onmouseover=function()
{clearInterval(MyMar3)}
butong_net_left.onmouseout=function()
{MyMar3=setInterval(Marquee3,speed)}
</script>
<!--向左滚动代码结束-->
<br>
<!--下面是向右滚动代码-->
<div id=butong_net_right
style=overflow:hidden;width:500px;>
<table cellpadding=0 cellspacing=0
border=0>
<tr><td
id=butong_net_right1 valign=top
align=center>
<table cellpadding=2 cellspacing=0
border=0>
<tr align=center>
<td><img
src=插入需要滚动的图片></td>
<td><img
src=插入需要滚动的图片></td>
<td><img
src=插入需要滚动的图片></td>
<td><img
src=插入需要滚动的图片></td>
<td><img
src=插入需要滚动的图片></td>
</tr>
</table>
</td>
<td id=butong_net_right2
valign=top></td>
</tr>
</table>
</div>
<script>
var speed=30//速度数值越大速度越慢
butong_net_right2.innerHTML=butong_net_right1.innerHTML
function Marquee4(){
if(butong_net_right.scrollLeft<=0)
butong_net_right.scrollLeft+=butong_net_right2.offsetWidth
else{
butong_net_right.scrollLeft--
}
}
var MyMar4=setInterval(Marquee4,speed)
butong_net_right.onmouseover=function()
{clearInterval(MyMar4)}
butong_net_right.onmouseout=function()
{MyMar4=setInterval(Marquee4,speed)}
</script>
<!--向右滚动代码结束-->
你把正面的代码弄到HTML文件的<body>区应该就行了:
<div id=ShowDiv style=position:relative; overflow:hidden; width:306px; height:102px;>
<div id=div1 style=position:absolute; width: 310px; height: 103px;>
<img src=图片地址1 width=100 height=100 />
<img src=图片地址2 width=100 height=100 />
<img src=图饥郑世片地址3 width=100烂肢 height=100 />
</div>
</div>
<script type='text/javascript'>
var adiv=document.getElementById('div1');
var imgs=document.getElementsByTagName('img');
adiv.style.width=620+'px';
adiv.innerHTML+=adiv.innerHTML;
setInterval(function()
{
adiv.style.left=adiv.offsetLeft-3+'px';
if(adiv.offsetLeft<-adiv.offsetWidth/2)
{
adiv.style.left=0+'丛弯px';
}
},10)
</script>
jquery吧 简单点