图片连续向左向右向下向上滚动和左右运动、指向停止js代码
向左
<div id=demo style="OVERFLOW: hidden; width: 632px; COLOR: #ffffff;height:150">
<table cellSpacing="0" cellPadding="0 "align="left" border="0" cellspace="0">
<tr>
<td id=demo1 valign=top>
<table width="632px" height="150px" border="0" cellpadding="0" cellspacing="10">
<tr>
<td width="114"><a href="http://www.cnblogs.com/flash/s1.swf" style="border:none" ><img src="https://images.cnblogs.com/s1.gif" border="0" /></a></td>
<td width="114"><a href="http://www.cnblogs.com/flash/s2.swf" style="border:none" ><img src="http://images.cnblogs.com/s2.gif" border="0" /></a></td>
<td width="114"><a href="http://www.cnblogs.com/flash/s3.swf" style="border:none" ><img src="http://images.cnblogs.com/s3.gif" border="0" /></a></td>
<td width="114"><a href="http://www.cnblogs.com/flash/s4.swf" style="border:none"><img src="http://images.cnblogs.com/s4.gif" border="0"/></a></td>
<td width="114"><a href="http://www.cnblogs.com/flash/s5.swf" style="border:none" ><img src="http://images.cnblogs.com/s5.gif" border="0" /></a></td>
</tr>
</table></td>
<td id=demo2 valign="top"> </td></tr>
<tr>
<td><SCRIPT language="javascript">
var speed3=25//速度数值越大速度越慢
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed3)
demo.οnmοuseοver=function() {clearInterval(MyMar)}
demo.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed3)}
</SCRIPT>
</td>
</tr>
</table></div>
向右
<!-- 把下列代码加到<body>区域内 -->
<base href="http://hi.baidu.com/baishonglin">
<div id=demo style=overflow:hidden;height:93;width:1000;background:#214984;color:#ffffff>
<table align=left cellpadding=0 cellspace=0 border=0>
<tr>
<td id=demo1 valign=top><img src="http://hiphotos.baidu.com/baishonglin/pic/item/b79b20500f78690043a75b67.jpg"><img src="http://hiphotos.baidu.com/baishonglin/pic/item/b79b20500f78690043a75b67.jpg"><img src="http://hiphotos.baidu.com/baishonglin/pic/item/b79b20500f78690043a75b67.jpg"><img src="http://hiphotos.baidu.com/baishonglin/pic/item/b79b20500f78690043a75b67.jpg">
</td>
<td id=demo2 valign=top></td>
</tr>
</table>
</div>
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
demo.scrollLeft=demo.scrollWidth
function Marquee(){
if(demo.scrollLeft<=0)
demo.scrollLeft+=demo2.offsetWidth
else{
demo.scrollLeft--
}
}
var MyMar=setInterval(Marquee,speed)
demo.οnmοuseοver=function() {clearInterval(MyMar)}
demo.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)}
</script>
向下
<!-- 把下列代码加到<body>区域内 -->
<!-- 指向链接图片url -->
<base href="http://hi.baidu.com/baishonglin">
<div id=demo style=overflow:hidden;height:300;width:130;background:#214984;color:#ffffff>
<div id=demo1>
<!-- 定义图片 -->
<img src="http://hiphotos.baidu.com/baishonglin/pic/item/b79b20500f78690043a75b67.jpg
">
<img src="http://hiphotos.baidu.com/baishonglin/pic/item/b79b20500f78690043a75b67.jpg
">
<img src="http://hiphotos.baidu.com/baishonglin/pic/item/b79b20500f78690043a75b67.jpg
">
<img src="http://hiphotos.baidu.com/baishonglin/pic/item/b79b20500f78690043a75b67.jpg
">
<img src="http://hiphotos.baidu.com/baishonglin/pic/item/b79b20500f78690043a75b67.jpg
">
</div>
<div id=demo2></div>
</div>
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
demo.scrollTop=demo.scrollHeight
function Marquee(){
if(demo1.offsetTop-demo.scrollTop>=0)
demo.scrollTop+=demo2.offsetHeight
else{
demo.scrollTop--
}
}
var MyMar=setInterval(Marquee,speed)
demo.οnmοuseοver=function() {clearInterval(MyMar)}
demo.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)}
</script>
向上
<!-- 把下列代码加到<body>区域内 -->
<!-- 指向链接图片url -->
<base href="http://hi.baidu.com/baishonglin">
<div id=demo style=overflow:hidden;height:300;width:130;background:#214984;color:#ffffff>
<div id=demo1>
<!-- 定义图片 -->
<img src="http://hiphotos.baidu.com/baishonglin/pic/item/b79b20500f78690043a75b67.jpg">
<img src="http://hiphotos.baidu.com/baishonglin/pic/item/b79b20500f78690043a75b67.jpg">
<img src="http://hiphotos.baidu.com/baishonglin/pic/item/b79b20500f78690043a75b67.jpg">
<img src="http://hiphotos.baidu.com/baishonglin/pic/item/b79b20500f78690043a75b67.jpg">
<img src="http://hiphotos.baidu.com/baishonglin/pic/item/b79b20500f78690043a75b67.jpg">
</div>
<div id=demo2></div>
</div>
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetTop-demo.scrollTop<=0)
demo.scrollTop-=demo1.offsetHeight
else{
demo.scrollTop++
}
}
var MyMar=setInterval(Marquee,speed)
demo.οnmοuseοver=function() {clearInterval(MyMar)}
demo.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)}
</script>
左右来回运动
<!--1、将以下代码加入到HEML的<head></head>之间：-->
<script LANGUAGE="JavaScript"><!--
step = 0;
obj = new Image();
function anim(xp,xk,smer) //smer = direction
{
obj.style.left = x;
x += step*smer;
if (x>=(xk+xp)/2) {
if (smer == 1) step--;
else step++;
}
else {
if (smer == 1) step++;
else step--;
}
if (x >= xk) {
x = xk;
smer = -1;
}
if (x <= xp) {
x = xp;
smer = 1;
}
// if (smer > 2) smer = 3;
setTimeout('anim('+xp+','+xk+','+smer+')', 50);
}
function moveLR(objID,movingarea_width,c)
{
if (navigator.appName=="Netscape") window_width = window.innerWidth;
else window_width = document.body.offsetWidth;
obj = document.images[objID];
image_width = obj.width;
x1 = obj.style.left;
x = Number(x1.substring(0,x1.length-2)); // 30px -> 30
if (c == 0) {
if (movingarea_width == 0) {
right_margin = window_width - image_width;
anim(x,right_margin,1);
}
else {
right_margin = x + movingarea_width - image_width;
if (movingarea_width < x + image_width) window.alert("No space for moving!");
else anim(x,right_margin,1);
}
}
else {
if (movingarea_width == 0) right_margin = window_width - image_width;
else {
x = Math.round((window_width-movingarea_width)/2);
right_margin = Math.round((window_width+movingarea_width)/2)-image_width;
}
anim(x,right_margin,1);
}
}
//--></script>
<!--2、将以下代码加入到HEML的<body></body>之间：-->
<img src="http://hiphotos.baidu.com/baishonglin/pic/item/b79b20500f78690043a75b67.jpg" name="picture"
style="position: absolute; top: 70px; left: 30px;" BORDER="0" WIDTH="140" HEIGHT="93">
<script LANGUAGE="JavaScript"><!--
setTimeout("moveLR('picture',300,1)",10);
//--></script>
转载于:https://www.cnblogs.com/shuai/archive/2009/10/21/1587613.html
图片连续向左向右向下向上滚动和左右运动、指向停止js代码相关推荐
- css3实现 png 图片高亮自左到右过渡的方式 (一张图实现不遮住png的透明背景)
文章目录 一.用一张图解释想要实现的效果. 二.思考:如何实现?实现的多种方式. 2.1.2图代码及实现效果 2.2.单图过滤实现效果 2.3.单图遮罩实现效果 一.用一张图解释想要实现的效果. 二. ...
- ArcGIS实现从左到右从下而上顺序自动编号方法
编号需求: 实现步骤: 1)先添加两个双精度字段计算XY坐标最小值; 计算公式: X最小值:!shape.extent.Xmin! Y最小值:!shape.extent.Ymin! 2)使用" ...
- 【Chrome】图片批量下载扩展zzllrr Imager小乐图客V1.4 (支持正则表达式、自定义JS代码、自定义引擎、多网站取图规则)...
小乐图客 - Chrome浏览器图片批量下载工具,升级至V1.4 该版本实现的功能: 1.右下角集成众多网站引擎(相似图片搜索.图片搜索.网页搜索.图片上传等等). 2.选项中增加各类设置的重置.导入 ...
- android 设置textview 左边,Android设置图片在TextView上、下、左、右
一种是在布局文件中的设置 android:drawablePadding="5dp"//图片与文案距离 android:drawableBottom="@drawable ...
- 怎么让图片从左往右移动php,javascript - 想让图片上那个块，在增加块的宽度的时候向右边移动，而不是向左边移动。需要怎么解决？...
javascript - 想让图片上那个块,在增加块的宽度的时候向右边移动,而不是向左边移动.需要怎么解决? 滿天的星座2017-07-05 10:39:20 0 2 212 * { marg ...
- 抖音上css照片动态旋转怎么做,抖音里单张图片平移视频怎么制作？影音制作实现一张图片从左到右滑动视频效果...
今天的影音制作,是实现视频画面中有一张图片从左往右慢慢滑动的视频效果.一张横屏图片要制作成竖视频的时候,要么就会出现图片显示不全的情况,要么显示全了就会出现上下有黑边的情况,基本很难解决这个问题~但是 ...
- php图片滑动怎么做,抖音里单张图片平移视频怎么制作？影音制作实现一张图片从左到右滑动视频效果...
今天的影音制作,是实现视频画面中有一张图片从左往右慢慢滑动的视频效果.一张横屏图片要制作成竖视频的时候,要么就会出现图片显示不全的情况,要么显示全了就会出现上下有黑边的情况,基本很难解决这个问题~但是 ...
- Leetcode06.将一个给定字符串 s 根据给定的行数 numRows ，以从上往下、从左到右进行 Z 字形排列。
文章目录 一.题目 二.数学规律法解题思路 1.特殊情况 2.进行周期分析 3.同行相邻点的位置分析 4.注意事项 5.代码实现 三.模拟法 一.题目 将一个给定字符串 s 根据给定的行数 numRo ...
- 图斑从西北角起始编号，可分村分组，从左到右，从上到下的顺序编号。任意起始方位，任意排列方向，亦可轻松搞定。
目录 一.实现效果 二.实现过程 1.获取图斑中心坐标 2.图斑排序 3.创建顺序号 三.成果整理展示 四.总结 在给图斑编号,标BSM时,经常遇到需要按村.从左上方开始,从左向右,从上向下的顺序进行 ...
最新文章
- ABAP设置输入焦点和表格控件行数的注意事项
- Android Jetpack组件之数据库Room详解(三)
- LAPM×××和php加速器
- 【代码+解析】有理数的类封装
- 【Golang 接口自动化05】使用yml管理自动化用例
- jsp页面格式化时间或数字
- string能存多大数据_信息技术助力精准教学：大数据到底有多好用？
- 前后端分离的用户验证原理及Spring Boot + JWT的框架搭建（附完整的框架代码）之一
- FCPX字幕插件、转场插件、效果插件、MG动画、调色插件、AE模板、AE插件、PR插件
- 2015第一弹：调试自己，挖掘自己的最强手艺
- 【算法】求n的m次方（快速幂取模）
- 【读书笔记】《全域营销：付费增长与流量变现实战讲义》——我的公域私域运营教科书
- B365装服务器系统,七彩虹b365主板安装win7系统及BIOS设置教程(支持8代cpu)
- 介绍python中几种遍历列表的for循环方法
- 学校计算机刷卡机,海口学校食堂系统,食堂就餐刷卡机
- matlab中voa,matlab出现错误 function [w1,w2,VoA,VoB,VoC,VoD,VoE,VA1,VB1,VC1,V
- 广东计算机专插本有哪些学校,广东专插本学校有哪些
- Windows 2008 R2配置IIS环境搭建网站（一）
- Docker 安装启动后无法连接服务器
- matlab怎么运行电路图,电工原理的MATLAB实现