1. 全栈程序员必看首页

html中图片连续滚动代码,[转载]网页设计中的图片连续滚动效果——代码「建议收藏」

全栈程序员-站长 • • 未分类 • 阅读 16

html中图片连续滚动代码,[转载]网页设计中的图片连续滚动效果——代码「建议收藏」style=”overflow:hidden;width:500px;”>border=”0″>id=”butong_net_left1″valign=”top”align=”center”>border=”0″>src=”src=”插入需要滚动的图片”>src=”插入需要滚动的图片”>src=”插入需要滚动的图片”>src=”插入需要滚动的图片”&gt…

大家好，又见面了，我是你们的朋友全栈君。

style=”overflow:hidden;width:500px;”>

border=”0″>

id=”butong_net_left1″ valign=”top”

align=”center”>

border=”0″>

src=”

src=”插入需要滚动的图片”>

src=”插入需要滚动的图片”>

src=”插入需要滚动的图片”>

src=”插入需要滚动的图片”>

src=”插入需要滚动的图片”>

valign=”top”>

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)}

style=”overflow:hidden;width:500px;”>

border=”0″>

id=”butong_net_right1″ valign=”top”

align=”center”>

border=”0″>

src=”插入需要滚动的图片”>

src=”插入需要滚动的图片”>

src=”插入需要滚动的图片”>

src=”插入需要滚动的图片”>

src=”插入需要滚动的图片”>

valign=”top”>

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)}

style=overflow:hidden;height:100;width:90;>

%E6%8F%92%E5%85%A5%E9%9C%80%E8%A6%81%E6%BB%9A%E5%8A%A8%E7%9A%84%E5%9B%BE%E7%89%87

%E6%8F%92%E5%85%A5%E9%9C%80%E8%A6%81%E6%BB%9A%E5%8A%A8%E7%9A%84%E5%9B%BE%E7%89%87

%E6%8F%92%E5%85%A5%E9%9C%80%E8%A6%81%E6%BB%9A%E5%8A%A8%E7%9A%84%E5%9B%BE%E7%89%87

%E6%8F%92%E5%85%A5%E9%9C%80%E8%A6%81%E6%BB%9A%E5%8A%A8%E7%9A%84%E5%9B%BE%E7%89%87

%E6%8F%92%E5%85%A5%E9%9C%80%E8%A6%81%E6%BB%9A%E5%8A%A8%E7%9A%84%E5%9B%BE%E7%89%87

id=butong_net_top2>

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)&<60;&<60;

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)}

style=overflow:hidden;height:100;width:90;>

%E6%8F%92%E5%85%A5%E9%9C%80%E8%A6%81%E6%BB%9A%E5%8A%A8%E7%9A%84%E5%9B%BE%E7%89%87

%E6%8F%92%E5%85%A5%E9%9C%80%E8%A6%81%E6%BB%9A%E5%8A%A8%E7%9A%84%E5%9B%BE%E7%89%87

%E6%8F%92%E5%85%A5%E9%9C%80%E8%A6%81%E6%BB%9A%E5%8A%A8%E7%9A%84%E5%9B%BE%E7%89%87

%E6%8F%92%E5%85%A5%E9%9C%80%E8%A6%81%E6%BB%9A%E5%8A%A8%E7%9A%84%E5%9B%BE%E7%89%87

%E6%8F%92%E5%85%A5%E9%9C%80%E8%A6%81%E6%BB%9A%E5%8A%A8%E7%9A%84%E5%9B%BE%E7%89%87

id=butong_net_bottom2>

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)}

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/161317.html原文链接：https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长
0 0


相关推荐

  • 算法练习之DP 求LCM （最长公共子序列）

    算法练习之DP 求LCM （最长公共子序列）

    算法练习之DP 求LCM （最长公共子序列）

    全栈程序员-站长的头像 全栈程序员-站长
    2022年1月25日
    40
  • 移动APP漏洞自动化检测平台建设

    移动APP漏洞自动化检测平台建设

    移动APP漏洞自动化检测平台建设前言：本文是《移动APP客户端安全笔记》系列原创文章中的第一篇，主要讲的是企业移动APP自动化漏洞检测平台建设，移动APP漏洞检测发展史与前沿技术，APP漏洞检测工具与平台，以及笔者的一些思考。希望能对移动App自动化漏洞检测感兴趣的同学有所帮助，限于笔者技术水平与文章篇幅，有些内容暂没有逐一详细分析，后续我争取多学习多分享，在此也欢迎大家指点和交流。一、国内AndroidApp漏洞检测

    全栈程序员-站长的头像 全栈程序员-站长
    2022年5月27日
    31
  • 海洋测绘 知识点 详细

    海洋测绘 知识点 详细

    海洋测绘 知识点 详细一、第一章海洋测绘概述第一节、海洋测绘的发展第二节、世界海洋新格局1.海洋法公约的一些主要概念与定义：（1）内海：也叫内水，指的是领海基线以内的水域，国家对其享有完全排他性主权（2）领海：领海向外延伸12海里的区域(1海里(nmi)=1.852千米(km)，沿海国主权管辖下与其海岸或内水相邻的一定宽度的海域，是国家领土的组成部分（3）毗邻区：毗邻国家领海，并在领海外一定宽度的，供沿…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年6月6日
    60
  • 抖动代码[通俗易懂]

    抖动代码[通俗易懂]

    抖动代码

    全栈程序员-站长的头像 全栈程序员-站长
    2022年1月23日
    43
  • 【hive】hive查询报错INFO: os::commit_memory(0x00000006e9990000, 3597074432, 0) failed； error=‘Cannot alloc

    【hive】hive查询报错INFO: os::commit_memory(0x00000006e9990000, 3597074432, 0) failed； error=‘Cannot alloc

    【hive】hive查询报错INFO: os::commit_memory(0x00000006e9990000, 3597074432, 0) failed； error=‘Cannot alloc报错内容：INFO:Startingtask[Stage-14:MAPREDLOCAL]inserialmodeJavaHotSpot(TM)64-BitServerVMwarning:ignoringoptionMaxPermSize=512M;supportwasremovedin8.0JavaHotSpot(TM)64-BitServerVMwarning:INFO:os::commit_memory(0x00000006e9990000,

    全栈程序员-站长的头像 全栈程序员-站长
    2022年5月15日
    64
  • <span role="heading" aria-level="2">css属性及定位操作

    css属性及定位操作

    字体属性文字字体font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。简单实例：body{font

    全栈程序员-站长的头像 全栈程序员-站长
    2022年3月29日
    64

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号