连续滚动图片的制作

  连续滚动的图片,一般都是用Flash制作,现在我们使用Script制作同样的效果:

  制作方法:

  单击这里查看一下演示效果 相关文件:2004082021demo.htm 2004082021scroll.htm

  在页面<body>~</body>相关位置加入代码:
  <iframe frameborder=no height=100 marginheight=0 marginwidth=0 name=mq scrolling=no src="2004082021demo.htm" width="100%"></iframe>
<iframe frameborder=no height=0 marginheight=0 marginwidth=0 name=mq scrolling=no src="2004082021scroll.htm" width=0></iframe>
新建scrollimg-pic.htm页面,插入相同大小的图片若干张。为使它不停顿地连续播放,请在同一行中,连续插入图片二至三次。类似于 2004082021demo.htm 文件。
在每一张的图片上,添加特效:
停顿效果代码:onmouseout=javascript:parent.frames[1].startscroll(); onmouseover=javascript:parent.frames[1].stopscroll()"
手形效果:style="cursor:hand
都添加至<img src="http://www.webjx.com/htmldata/2005-02-24/XXX.jpg">,也可以加入图片的超级链接!
再新建2004082021scroll.htm页面文件,该文件为控制图片滚动的页面。在<head>~</head>中,加入代码:
<SCRIPT language=JavaScript>
<!--//
var x = 0;
var y = 0;
var limdex = 600;
var dest = 0;
var distance = 0;
var step = 0;
var destination = 0;
var on = true;
function scrollit(destination) {
step = 2;
dest = destination;
if (x<dest & x < limdex){
while (x<dest) {
step += (step / 7);
x += step;
parent.frames[0].scroll(x,0);
}
// top.main.scroll(dest,0);
if(dest <=limdex) { parent.frames[0].scroll(dest,0); }
x = dest;
}
if (x > dest) {
while (x>dest) {
step += (step / 7);
if(x >= (0+step)) { x -= step; parent.frames[0].scroll(x,0); }
else break;
}
if(dest >= 0) { parent.frames[0].scroll(dest,0); }
x = dest;
}
if (x<1) { parent.frames[0].scroll(1,0); x=1 }
if (x>limdex) { parent.frames[0].scroll(limdex,0); x=limdex }
x = dest;
}
function scrollnow() {
if (on){
if (x < limdex & x >= 0 ) {
parent.frames[0].scroll(x,0);
x = x + 1;
setTimeout('scrollnow()', 8);
}
else if (x < 0) {
x = limdex;
scrollnow();
}
else {
x=0;
scrollnow();
}
}
}
// *********************************
// 去掉原来的stopscroll()
function stopscroll() {
if (on){
on = false;
}
else {
on = true;
scrollnow();
}
}
function startscroll() { on = true; scrollnow(); }
function stop_start() {
if (on){ on = false;}else { on = true;scrollnow();}
}
scrollnow();
//***********************************
//-->
</SCRIPT>
注意,代码中:var limdex=600; 数字的取值计算为:单张图片的宽度像素 * 使用图片张数
以我们的滚动效果来计算,使用的单张图片宽度为120px,共使用5张,所以var limdex的数字值为600。

连续滚动的图片的特效就制作完成了!

时间: 2016-07-07

连续滚动图片的制作的相关文章

图片组的连续滚动效果

现在的网页上常常见到图片组的连续滚动效果,如果你掌握了AS的基础知识,也能做出这样的效果,如果你想学,那么跟我来吧! 由于源码中只有一帧,所以就不贴图示了.主要的东东是一个图片MC,实例名是"m".制作步骤是这样的.先把一组图连起来,组合,相对舞台选择水平和垂直居中,再复制两个图片组合,分别放在两侧衔接好.新建一个MC,把图片MC(实例名为"m")放进去,相对舞台选择水平和垂直居中,不做别的处理.给这个MC起实例名为"mc".接下来该写代码了,在

PhotoShop制作滚动图片GIF动画效果图文教程

教程利用PhotoShop制作滚动图片GIF动画效果,考虑制作滚动图像多样性效果,我分别介绍三种不同的方法来制作有差异的动画效果,分别是:平行单向滚动动态效果,往复式滚动动画效果和开关门式滚动动画. 大家可以根据自已已经掌握的动画制作知识进行选择性练习,同时,根据教程思路创作出另一种不同风格的动画效果. 先上几个效果: 分类: PS入门教程

JS实现图片的不间断连续滚动的简单实例_javascript技巧

js替代marquee实现图片无缝滚动 可能大家都碰到过,当marquee中滚动的是图片的时候,滚到终点的时候直接就跳回到起点了,而不像文字那样可以无缝滚动,下面介绍的是通过js来实现图片的无缝滚动. 先了解一下下面这几个属性: innerHTML: 设置或获取位于对象起始和结束标签内的 HTML scrollHeight: 获取对象的滚动高度. scrollLeft: 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop: 设置或获取位于对象最顶端和窗口中可见内容

jQuery动画效果实现图片无缝连续滚动_jquery

本文实例介绍了jQuery动画效果实现图片无缝连续滚动的详细代码,分享给大家供大家参考,具体内容如下 效果图如下: 一.HTML代码 <body> <div id="container"> <ul id="content"> <li><a href="#"><img src="images/0.png"/></a></li> <

i see图片专家制作个性网店店招

i see图片专家制作个性网店店招?网店装修最最重要的部分就是制作店招.买家一进店铺,首先看到的就是店招.如何制作出醒目又个性的店招,是每个刚开店的卖家最需要考虑的. iSee现在教大家制作醒目的网店店招.(淘宝网对店招的限制:文件格式GIF.JPG.JPEG.PNG;文件大小100k以内;建议尺寸950PX*150PX.) 先看看醒目店招效果图: 静态店招: 动态店招: 添加动效文字: 添加动态涂鸦: 制作网店店招的步骤: 1. 打开iSee软件,选择"在线搜图",搜到喜欢的素材图.

jquery控制左右箭头滚动图片列表的实例

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content

PS蒙版的图片这种制作过程?

  "蒙版的图片这种制作过程?"现在给大家分享简单粗暴的双重曝光制作思路及方法,方法大同小异,灵活变通 分类: PS图片处理 ps蒙版教程

javascript-求教各位~QQ下载页面的滚动效果如何制作 注:有的浏览器可能不能展示效果

问题描述 求教各位-QQ下载页面的滚动效果如何制作 注:有的浏览器可能不能展示效果 http://music.qq.com/y/static/down/pc100.html?pgv_ref=qqmusic.y.topmenu 问题如上所示,当页面向下滚动到一定位置的时候,下面的浮动层自动向上滚动,若页面向上滚动,则这个浮动层向下下滚,求浮动层(全新页面设置的效果)

非主流_红色女生图片_制作教程

本文章主题是围绕着红色非主流女生图片的制作教程来讲的,我们将把一张普通的照片经过ps调色之后就会达到你想要的红色效果了哦, 效果图, 原照片,下面我们就来看调色教程 调色很简单的只要二步就完了,一是在图像里面调,第二不是图像,只是能色阶进行处理了.