导航:首页 > 万维百科 > 网页设计图片滚动特效

网页设计图片滚动特效

发布时间:2021-03-21 08:33:23

1、网页上怎么制作滚动的图片

网站循环滚动图片需要js代码制作
第一步,可以去相关的js特效网站下载一个你所需要的代码
第二步,用DW修改路径改为你自己网站的路径
第三步,把你所做的图片上传到空间
第四步,添加代码路径及调用js文件网站保存

2、谁会网页设计?帮忙增加一个图片自动滚动效果,谢谢

你好,图片自动滚动效果属于JS范畴,这个效果开源的程序很多,可以在百度中搜索,如果找到的程序不会调试,那你可以到想立成科技网找技术咨询。

3、网页制作 图片滚动

<marquee direction=up height=75 onMouseOut=this.start() onMouseOver=this.stop() scrollamount=1 scrolldelay=100 width="180" id=MARQUEE1>滚动内容</marquee>

Direction 参数可设置:up down left right (控制滚动方向)

Scrolldelay = 100 (100就是速度,值越大滚动越快……)

onMouseOut=this.start() ........鼠标移出状态滚动

onMouseOver=this.stop() .........鼠标经过时停止滚动

基本语法
<marquee> ... </marquee>
移动属性的设置 ,这种移动不仅仅局限于文字,也可以应用于图片,表格等等

方向
<direction=#> #=left, right ,up ,down <marquee direction=left>从右向左移!</marquee>

方式
<bihavior=#> #=scroll, slide, alternate <marquee behavior=scroll>一圈一圈绕着走!</marquee>
<marquee behavior=slide>只走一次就歇了!</marquee>
<marquee behavior=alternate>来回走</marquee>

循环
<loop=#> #=次数;若未指定则循环不止(infinite) <marquee loop=3 width=50% behavior=scroll>只走 3 趟</marquee> <P>
<marquee loop=3 width=50% behavior=slide>只走 3 趟</marquee>
<marquee loop=3 width=50% behavior=alternate>只走 3 趟!</marquee>

速度
<scrollamount=#> <marquee scrollamount=20>啦啦啦,我走得好快哟!</marquee>

延时
<scrolldelay=#> <marquee scrolldelay=500 scrollamount=100>啦啦啦,我走一步,停一停!</marquee>

外观(Layout)设置

对齐方式(Align)
<align=#> #=top, middle, bottom <font size=6>
<marquee align=# width=400>啦啦啦,我会移动耶!</marquee>
</font>

底色
<bgcolor=#> #=rrggbb 16 进制数码,或者是下列预定义色彩:
Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,
Fuchsia, White, Green, Purple, Silver, Yellow, Aqua <marquee bgcolor=aaaaee>颜色!</marquee>

面积
<height=# width=#> <marquee height=40 width=50% bgcolor=aaeeaa>面积!</marquee>

空白
(Margins)<hspace=# vspace=#>
<marquee hspace=20 vspace=20 width=150 bgcolor=ffaaaa align=middle>面积!</marquee>

4、网页制作怎样让图片滚动?

网页图片无缝滚动实现代码:
<style type="text/css">
<!--
ul,li,div{margin:0; padding:0; font-size:12px;}
#demo {
width:678px; float:right; overflow:hidden;height:144px; border:none;
}
#indemo {
float: left;
width: 800%;
}
#demo1,#demo2{height:144px;float:left; display:inline-table;}
#demo1 li,#demo2 li{ width:127px; height:144px; float:left; padding-left:8px; }
#demo1 li img,#demo2 li img{ display:block; background:#ccc; padding:1px; border:1px solid #ccc;}
#demo1 li span,#demo2 li span{ width:127px; height:30px; line-height:30px; text-align:center; overflow:hidden;}
#demo1 {
float: left;
}
#demo2 {
float: left;
}
-->
</style>
<div id="demo">
<div id="indemo">
<div id="demo1">
<ul>
<li><a href="#"><img src="http://boaer.comimg/temp01.gif" width="123" height="110" /></a><span><a href="#">产品名称</a></span></li>
<li><a href="#"><img src="http://boaer.comimg/temp02.gif" width="123" height="110" /></a><span><a href="#">产品名称</a></span></li>
<li><a href="#"><img src="http://boaer.comimg/temp03.gif" height="110" /></a><span><a href="#">产品名称</a></span></li>
</ul></div><div id="图片展示代码例子"></div></div></div><script>
<!--
var speed=20; //数字越大速度越慢
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></td>
</tr>
</table>

5、用DW做网页设计,就是那种图片在循环滚动,点击就可以进入,这种效果如何做

最简单可以用<marquee></marquee>标签、只是不是无缝滚动、可以把加超链接的图片放进这个标签就可以、

6、网页设计 图片滚动代码

素材的准备。为了更好的表现网站的风格和特色,具备一些更富表现力和吸引力的图片是必不可少的。同理,准备了一些与网页主题密切相关的图片,用于做为实现图片滚动效果的素材。

打开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”网页文件,最终效果如果所示:

7、网页中制作文字与图片滚动效果

里面的table自己改
我给你贴代码

<div id=demo style="overflow:hidden; width:213px; height:100px;"> <div id=demo1>
<table width="336" border="0" cellpadding="0" cellspacing="0">
<%set rs=server.CreateObject("adodb.recordset")
sql="select top 10 * from news where lm2_id=146 order by id desc"
rs.open sql,conn,1,1
if rs.eof and rs.bof then
response.Write("<tr><td>无记录</td></tr>")
else
for i=1 to rs.recordcount%>

<tr>
<td><a href="liang.asp?id=<%=rs("id")%>&lm=<%=Server.URLEncode("重要企业展台")%>"><%=left(rs("subject"),33)%></a>...</td>

</tr>

<%rs.movenext
next
end if%></table></div>
<div id=demo2></div>
</div> <script language="javascript">
var speed=30 // 值越大速度越慢
demo2.innerHTML=demo1.innerHTML
function Marquee(){

if(demo2.offsetTop-demo.scrollTop<=0)
demo.scrollTop-=demo1.offsetHeight
else{
demo.scrollTop++
}

//上下左右无间隙滚动 最主要是 if 语句的代码修改
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>

8、dreamweaver网页设计中图片滚动切换的效果怎么弄?

你可以通过JS来实现,这类的代码还是很多的,直接下载稍微修改就能使用。

9、如何在网页制作中将图片设置为滚动

1、素材的准备。为了更好的表现网站的风格和特色,具备一些更富表现力和吸引力的图片是必不可少的;

2、在电脑上找到并且打开Dreamweaver8,重新建立一个网页文件,并且把网页文件保存,且命名为“index.html"文件;

3、在完成网页文件保存和命名为“index.html"文件以后,切换至代码编辑界面,输入相应的程序代码;

4、新建一CSS样式表文件,并将该文件保存到与“index.html”相同的目录下,文件名称为“MyStyle.css";

5、在样式表文件"MyStyle.css”文件的完成以后,打开样式表文件"MyStyle.css”文件输入相应的程序代码;

6、在网页文件"index.html"中添加对该样式表的引用:“<link rel="stylesheet" type="text/css" href="MyStyle.css">”,同时新建一个JS文件,并将该文件另存为“MoveEffect.js";

7、在JS文件”MoveEffect.js“文件建立完成以后,同样打开JS文件”MoveEffect.js“文件输入程序的代码;

8、完成上述程序运行以后,在主页文件"index.html”中添加对该“MoveEffect.js”文件的引用,“<script type="text/javascript" src="MoveEffect.js"></script>”,打开“index.html”网页文件即可。

与网页设计图片滚动特效相关的知识