DIV+CSS网页图片滚动源代码

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;>

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;>

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

2012.6.29

html网页图片滚动代码用css和div,DIV+CSS网页图片滚动源代码相关推荐

  1. 网页广告代码php,【网页广告特效代码】精选5种常用的网页广告特效代码

    网站少不了发布一些活动广告,网页中的广告显示效果有很多种,一般是采用JS或者JQ实现多种网页广告显示效果,以下是php中文网精选5种常用的网页广告特效代码推荐给大家下载使用! 效果预览和下载地址:ht ...

  2. php图片滑动代码,基于mootools 1.3框架下的图片滑动效果代码_Mootools

    效果预览如下: 实现原理: 容器采用相对定位,图片采用绝对定位,当鼠标移动到相应的图片上,改变去left属性,用tween实现动画效果. 代码分析:写一个picSlider类实现代码封装 CSS样式 ...

  3. html怎么使背景图片充屏,css如何使div背景图片填充

    2016-07-08 00:56车庆云 客户经理 css代码添加背景图片常用代码 1 背景颜色 {background-color:数值} 2 背景图片 {background-image: url( ...

  4. JiaThis™图片分享代码

    JiaThis™"图片分享"代码: 您想将网站上精美图片分享到各大微博等社交媒体上,与好友一同分享吗?JiaThis 图片分享可以帮助您! 加入下面的代码后,用户将鼠标移动到指定的 ...

  5. 【Python黑科技】图片太大不能上传?三种压缩图片大小的方法(代码注释详细)

    目录 实现效果 原图大小8.46MB PIL库quality降低图片质量方式压缩图片366KB PIL库thumbnail压缩图片大小来压缩图片985KB OpenCV缩放图片大小来压缩图片 177K ...

  6. JS+CSS控制左右切换鼠标可控的无缝图片滚动代码

    代码简介: 以前见过这种效果,但是是基于FLASH技术,现在是纯用JS实现的,代码有点多,不过效果还不错,实际上它也是一个图片滚动,只不过它完全是用鼠标点击控制的,也就是说鼠标不点击的时候它是静止的, ...

  7. php图片左右滚动代码怎么写,css图片滚动代码怎么写?轮播图横向滚动展示

    在日常工作中网页上的轮播图展示必不可少,那么对于刚入门的小白而言本篇文章关于css图片滚动代码的介绍更是浅显易懂.希望本篇文章对大家有所帮助. css图片滚动代码示例具体如下: css图片滚动代码示例 ...

  8. 一款JS+CSS实现的无缝平滑图片滚动代码

    代码简介: 非常平滑的JS图片滚动特效代码,无缝循环,速度可自定义,鼠标悬停时停止.它的特点是JS和图片地址分离,这样做你就经易的从数据库动态调用每张图片的地址,方便控制,因此它非常的应用. 代码内容 ...

  9. html图片滚动红点_HTML中更换或添加网站背景图片的代码怎么写?(示例)

    本篇文章主要介绍了HTML代码中如何更换或添加网站背景图片?对于小白来说,最简单的方法就是,如果是更换背景图片的话. 我们可以在网页上点击鼠标右键查看网站源代码,然后找到css里面的背景图这一段代码, ...

  10. 做网页很实用代码集合和CSS制作网页小技巧整理

    做网页很实用代码集合 控制横向和纵向滚动条的显隐?<body style="overflow-y:hidden"> 去掉x轴 <body style=" ...

最新文章

  1. @RequestMapping执行过程
  2. hibernate查询之条件查询
  3. 【NLP】Contrastive Learning NLP Papers
  4. SAP CRM WebClient UI图标url的生成逻辑
  5. python大学什么专业学校_好学校的差专业和一般大学的好专业,该怎么选?我来说真话……...
  6. 深入学习二叉树(四) 二叉排序树
  7. android包结构规范,【Android】Android产品-开发规范
  8. GitHub Actions使用学习最全文档
  9. prim算法_历时两月,终拿字节跳动offer,算法面试题分享「带答案」
  10. 计算机一级综合第九套试题及答案,2012年计算机一级B第九套选择题精选及参考答案...
  11. [PVE]解决 ProXmoX VE升级 apt-get update 报错的问题
  12. 线程挂起 阻止有什么区别c#
  13. dosbox使用教程创建masm5
  14. Jasperreports5.6支持PDF微软雅黑字体
  15. Laravel 下使用 FFmpeg 处理多媒体文件
  16. Myshare.cc 图床对接ShareX自定义图片上传
  17. pip 生成 requirement.txt 文件
  18. 【前端三剑客二】CSS手术刀剖析第二篇
  19. kdj值应用口诀_KDJ应用口诀,一文教你巧妙利用KDJ买卖股票
  20. 2019个人成长计划

热门文章

  1. 【机器学习】 - 作业4: 基于K-近邻的车牌号识别
  2. 主数据供应商有哪些!
  3. 人工智能、神经网络、深度学习、机器学习傻傻分不清?来看看AI奠基人的解答!...
  4. SQL Server存储过程
  5. 软件项目管理 7.2.传统历时估算
  6. SQL:case when then else用法!
  7. 软件项目需求分析为什么困难?
  8. 计算机硬件的主要技术指标
  9. js websocket发送文本与二进制实验
  10. java修改运行时实体类中属性上面的注解值