php
php,ajax,asp,web技术,开源 我不懂什么叫开源?
posts - 5, comments - 3, trackbacks - 0, articles - 0
PHP博客
::
首页
::
新随笔
:: ::
聚合
::
管理
图片滚动(上下左右)
Posted on 2008-04-26 20:30
ssn
阅读(1842)
评论(1)
编辑
收藏
引用
网摘
所属分类:
ASP技术
代码:
<!--下面是向上滚动代码-->
<div id=butong_net_top style=overflow:hidden;height:100;width:90;>
<div id=butong_net_top1>
<img src="
http://code.xinnew.com/images/logo88.gif
">
<img src="
http://code.xinnew.com/images/logo88.gif
">
<img src="
http://code.xinnew.com/images/logo88.gif
">
<img src="
http://code.xinnew.com/images/logo88.gif
">
<img src="
http://code.xinnew.com/images/logo88.gif
">
<img src="
http://code.xinnew.com/images/logo88.gif
">
<img src="
http://code.xinnew.com/images/logo88.gif
">
<img src="
http://code.xinnew.com/images/logo88.gif
">
<img src="
http://code.xinnew.com/images/logo88.gif
">
</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)
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="
http://code.xinnew.com/images/logo88.gif
">
<img src="
http://code.xinnew.com/images/logo88.gif
">
<img src="
http://code.xinnew.com/images/logo88.gif
">
<img src="
http://code.xinnew.com/images/logo88.gif
">
<img src="
http://code.xinnew.com/images/logo88.gif
">
<img src="
http://code.xinnew.com/images/logo88.gif
">
<img src="
http://code.xinnew.com/images/logo88.gif
">
<img src="
http://code.xinnew.com/images/logo88.gif
">
<img src="
http://code.xinnew.com/images/logo88.gif
">
</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="
http://code.xinnew.com/images/logo88.gif"></td
>
<td><img src="
http://code.xinnew.com/images/logo88.gif"></td
>
<td><img src="
http://code.xinnew.com/images/logo88.gif"></td
>
<td><img src="
http://code.xinnew.com/images/logo88.gif"></td
>
<td><img src="
http://code.xinnew.com/images/logo88.gif"></td><td><img
src="
http://code.xinnew.com/images/logo88.gif
" width="88"></td>
<td><img src="
http://code.xinnew.com/images/logo88.gif"></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="
http://code.xinnew.com/images/logo88.gif"></td
>
<td><img src="
http://code.xinnew.com/images/logo88.gif"></td
>
<td><img src="
http://code.xinnew.com/images/logo88.gif"></td
>
<td><img src="
http://code.xinnew.com/images/logo88.gif"></td
>
<td><img src="
http://code.xinnew.com/images/logo88.gif"></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>
<!--向右滚动代码结束-->
Feedback
#
re: 图片滚动(上下左右)
回复
更多评论
2010-04-28 10:36 by
江桥
这个代码很不错
刷新评论列表
只有注册用户
登录
后才能发表评论。
网站导航:
IT新闻
博客园
BlogJava
博客生活
IT博客网
C++博客
程序员招聘
Powered by:
PHP博客
Copyright © ssn
日历
<
2008年4月
>
日
一
二
三
四
五
六
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
7
8
9
10
公告
在学习,什么都不懂.
.
.
.
.
请原谅!
留言簿
(1)
给我留言
查看公开留言
查看私人留言
随笔分类
(5)
ASP技术(3)
Mysql(1)
PHP技术
一些俗事(1)
随笔档案
(5)
2008年4月 (5)
收藏品
PHP和MySQL.Web开发中文版光盘
php与mysql.web开发中文版.pdf
友情链接
Google
最新随笔
1. 用MySQL创建数据库和数据库表
2. 图片滚动(上下左右)
3. html 调用 asp 文件
4. 郁闷
5. 单击弹出窗口
搜索
积分与排名
积分 - 14226
排名 - 38
最新随笔
1. 用MySQL创建数据库和数据库表
2. 图片滚动(上下左右)
3. html 调用 asp 文件
4. 郁闷
5. 单击弹出窗口
最新评论
1. re: 图片滚动(上下左右)
这个代码很不错
--江桥
2. re: 单击弹出窗口
用jacascript也可实现
--网上买书
3. re: 郁闷
开心点
--ie
阅读排行榜
1. 用MySQL创建数据库和数据库表(7925)
2. html 调用 asp 文件(2804)
3. 图片滚动(上下左右)(1842)
4. 单击弹出窗口(1278)
5. 郁闷(336)
评论排行榜
1. 单击弹出窗口(1)
2. 郁闷(1)
3. 图片滚动(上下左右)(1)
4. 用MySQL创建数据库和数据库表(0)
5. html 调用 asp 文件(0)