本文主要是介绍今天俺值班!(图片滚动js),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
今天虽然是周末,但是排班轮到我值班了。值班真不爽,一值班周末就没了,而明天又要开始一周的上班。天宫还不作美,下了一天的雨。昨天洗的衣服明天估计都不干了。前几天帮主席弄的那个网页,他用的TABLE做的静态网页,后来格式出问题了,怎么改都不能实现他要求的那样,右边总是有一段空白。没办法只有把那个网页重新用DIV+CSS重新做了下。感觉还不错,起码改起来比较顺手了。知道那个对应那个!他还要求网页上有个图片滚动的效果,就顺便学习了下那个。
效果就如http://www.cdjgjt.com/上面那个。
<IFRAME name=mq marginWidth=0 marginHeight=0 src="tt.html" frameBorder=no width="99%" scrolling=no height=100></IFRAME>
使用了框架技术,TT.HTML是另外一个网页,用来显示图片轮换效果的。
JS代码下:
-
<SCRIPT language=JavaScript>
<!-- Hide
function killErrors()
{
return true;
}
window.onerror = killErrors;
//清除所有的JS错误
//-->
</SCRIPT>
<SCRIPT language=JavaScript>
<!--//
var x = 0;
var y = 0;
var limdex = 1100;
var dest = 0;
var distance = 0;
var step = 0;
var destination = 0;
var on = true;function scrollit(destination) {
step = 3;
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>
关键部分的调用
<A href="链接地址" target=_blank><IMG οnmοuseοver='javascript:parent.frames
["mq"].stopscroll();' οnmοuseοut='javascript:parent.frames["mq"].startscroll();' src="../../2/image/污水处理厂1.jpg"
width="82" height="82" border="0"> </A>
JS代码没看明白,快下班了!明天继续看!
看到个更简单的实现图片滚动效果的 原文地址:http://wtyf2008.blog.163.com/blog/static/84161442006101404942996/
(从下往上滚动) 代码格式 |
<marquee align=center direction=up scrollamount=1 scrolldelay=3 valign=middle behavior="scroll"> |
基本格式:<marquee scrollamount=1 SCROLLDELAY=1 border=0 direction=up scrolldelay=70 width=180 height=130 align=middle> 把图片的连接地址写在这里 </marquee> |
1.direction属性:决定文本的滚动方向,分为向左left和向右right,up和down默认状态向左。
<marquee direction=left>从右向左滚动</marquee>
<marquee direction=right>从左向右滚动</marquee>
2.behavior属性:指定文本的滚动方式,分为三种:
Scroll:从一端消失后,在另一端出现并继续滚动。
<marquee behavior=scroll>一圈一圈地滚动</marquee>
Slide:从一端滚动,接触到另一端后停止
<marquee behaviro=slide>只滚动一次就停止</marquee>
Alternate:从一端滚动到另一端后,反向滚动。
<marquee behavior=alternate>来回滚动</marquee>
direction=up(left、right、down) 这个属性可以更改,这样就可以实现上下左右了
这篇关于今天俺值班!(图片滚动js)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!