今天俺值班!(图片滚动js)
2008-08-24 17:35
260 查看
今天虽然是周末,但是排班轮到我值班了。值班真不爽,一值班周末就没了,而明天又要开始一周的上班。天宫还不作美,下了一天的雨。昨天洗的衣服明天估计都不干了。前几天帮主席弄的那个网页,他用的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 onmouseover='javascript:parent.frames
["mq"].stopscroll();' onmouseout='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/
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) 这个属性可以更改,这样就可以实现上下左右了
效果就如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 onmouseover='javascript:parent.frames
["mq"].stopscroll();' onmouseout='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"> <img border="0" src=" http://要滚动的图片地址1"> <img border="0" src=" http://要滚动的图片地址2"> </marquee> |
基本格式:<marquee scrollamount=1 SCROLLDELAY=1 border=0 direction=up scrolldelay=70 width=180 height=130 align=middle> 把图片的连接地址写在这里 </marquee> |
<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代码
- JS让图片无缝滚动的实现(JS代码讲解,非直拷型内容)
- 今天再做上传图片时候遇到了一个JS 图片预览问题
- js图片无缝滚动代码
- js+div实现图片滚动效果代码
- 一个兼容性比较好的图片左右滚动的js
- js实现图片的无缝轮播滚动
- [转]不间断连续图片滚动效果的制作方法(JS)
- 原生js页面滚动延迟加载图片
- js实现图片无缝滚动特效
- JS,图片上下滚动(主要是定时器的熟练运用)
- jquery.flexslider.js带左右箭头且带按钮可滚动的图片插件
- JS实现图片无缝滚动
- JS图片滚动代码(无缝、平滑)
- JS图片无缝滚动
- 图片滚动(UP)的JS代码详解(offsetTop、scrollTop、offsetHeigh)【转】
- JS图片滚动代码(无缝、平滑)
- JS实现横向图片无缝滚动
- 常用JS图片滚动(无缝、平滑、上下左右滚动)代码大全
- js图片滚动效果 时间随便定 鼠标移上去停止