html 文字，图片 满屏 滚动代码
下面的图片滚动代码仅用于html网页中，分别可以向上向下向左向右的滚动！把下面此代码插入html网页的<body>< /body>中就可以了！大家看看效果吧！可以条滚动条的高度宽度还有滚动时的速度，下面都有说明了，大家调好自己喜欢的就OK了！
<!--下面是向上滚动代码-->
<div id=butong_net_top style=overflow:hidden;height:100;width:90;>
<div id=butong_net_top1>
<img src="插入需要滚动的图片">
<img src="插入需要滚动的图片">
<img src="插入需要滚动的图片">
<img src="插入需要滚动的图片">
<img src="插入需要滚动的图片">
</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.οnmοuseοver=function() {clearInterval(MyMar1)}
//鼠标移开时重设定时器
butong_net_top.οnmοuseοut=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="插入需要滚动的图片">
<img src="插入需要滚动的图片">
<img src="插入需要滚动的图片">
<img src="插入需要滚动的图片">
<img src="插入需要滚动的图片">
</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.οnmοuseοver=function() {clearInterval(MyMar2)}
butong_net_bottom.οnmοuseοut=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="<img src="插入需要滚动的图片"></td>
<td><img src="插入需要滚动的图片"></td>
<td><img src="插入需要滚动的图片"></td>
<td><img src="插入需要滚动的图片"></td>
<td><img src="插入需要滚动的图片"></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.οnmοuseοver=function() {clearInterval(MyMar3)}
butong_net_left.οnmοuseοut=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="插入需要滚动的图片"></td>
<td><img src="插入需要滚动的图片"></td>
<td><img src="插入需要滚动的图片"></td>
<td><img src="插入需要滚动的图片"></td>
<td><img src="插入需要滚动的图片"></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.οnmοuseοver=function() {clearInterval(MyMar4)}
butong_net_right.οnmοuseοut=function() {MyMar4=setInterval(Marquee4,speed)}
</script>
<!--向右滚动代码结束-->
html 文字，图片 满屏 滚动代码相关推荐
- CSS设置背景图片满屏
折腾了很久,图片长一点或者宽一点,怎么设置宽和高都有问题,设置背景图片满屏,网上也搜了很多,都没有好的解决方案. 最后抠了某个网站的源码,找到了目前的一个解决方案 <!DOCTYPE html& ...
- vue实现滚动鼠标滚轮切换页面，类似于纵向走马灯、满屏滚动
新项目产品被甲方的要求逼疯了,大概返稿了100+次吧,最后甲方网上找了个他们认为的比较有科技感的模板,让我们照着写,首页就是类似于纵向走马灯,鼠标滚动切换,一次切换一整屏的效果.之前没接触过,写了个简 ...
- qq满屏飞吻代码_教你用微信隐藏代码表白！各种微信技巧
阅读本文前,请您先点击上面的"蓝色字体",再点击"关注",这样您就可以继续免费收到文章了.每天都会有分享,都是免费订阅,请您放心关注.注:本文转载自网络,不代表 ...
- 使用fullPage做的大图片全屏滚动
本地的图片和css等文件 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset ...
- html中图片自动循环滚动代码,JavaScript代码实现图片循环滚动效果
1.概述 循环滚动图片,不仅可以增添Web页面的动态效果,而且可以节省页面空间,有效地保证在有限的页面中显示更多的图片. 2.技术要点 主要应用setTimeout()方法实现图片的循环滚动效果.se ...
- Python使用turtle库绘制动态满屏爱心代码
情人节绘制爱心最合适了,但是单单画一个心形怎么能够满足?今天我们尝试用Python的turtle库画出一整个画布的爱心,让它们在上面动态移动.最终效果如下: 绘制爱心 画爱心有很多种画法,我这里用的方 ...
- Python动态满屏爱心形代码
import os import time def heart_animation(): heart = [ " ❤️ ❤️ ", & ...
- Jquery : 上下滚动--单行 批量多行 文字图片翻屏【转】
原文发布时间为:2010-02-01 -- 来源于本人的百度文章 [由搬家工具导入] 注:如果和左右滚动一起使用,则会出现冲突 一单行滚动(ad:http://www.gz138.com) <! ...
- html中图片自动循环滚动代码,实现长图片自动循环滚动效果
实现思路 滚动效果用实现.有个方法,可以滚动到指定位置(有滚动效果,不是直接到指定位置),不了解的看这里种定位滚动方式演示.每一个Item是一张长图,这样首尾相接滚动起来(滚到无限远)就是无限循环的效 ...
- jquery导航图片全屏滚动、首页全屏轮播图，各式相册
1.目录结构 源码 project css js image index1 index2 index3 index4 index.html index1到index4分为四个iframe标签引入的可单 ...
最新文章
- 重磅！新一轮“双一流”，有重大变化！
- FIR和IIR的区别+差分方程的单位冲激响应(matlab图解)
- 逻辑综合——概述与基本概念
- 遵化计算机培训,遵化人力资源培训
- 使用POI 读取 Excel 文件，读取手机号码 变成 1.3471022771E10
- Python+numpy实现蒙特卡罗方法估计圆周率近似值
- 骗术 —— 魔高一尺道高一丈
- Python图像纹理分割
- spring自动注入bean
- nmap扫描之端口“filtered“被过滤的分析
- 电商 秒杀系统 设计思路和实现方法
- 伺服电机（舵机）简单介绍
- 程序员的语言“艳遇史”（四） ——数学系师姐forth
- 旅行青蛙分析(Android篇)
- PowerPC VxWorks BSP分析(4.3)——BSP定制
- 禁止用户从网页上下载图片
- 第1讲 2.2人机交互
- 了解C语言中的pipe()系统调用
- 【LorMe云讲堂】徐凌：利用全基因组促进可持续农业
- 红外图像处理-基于场景的非均匀矫正