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. 数组、链表、Hash(转)
  2. 用js改变embed标签的src值
  3. 【AWSL】之Linux常用命令,学习Linux,这一篇就够了(type、echo、enable、du、ls、mkdir、touch、ln、cp、rm、mv、find、gzip、bzip、tar)
  4. python 试题答案_python试题答案
  5. 20165334 《java程序设计》第5周学习总结
  6. 7-6 查找整数 (10 分)
  7. spring cloud中微服务之间的调用以及eureka的自我保护机制
  8. 不小心执行了rm -f,除了跑路,如何恢复?
  9. 【UOS统信】安装谷歌浏览器
  10. 生产制造追溯系统-IQC来料检验
  11. OpenStack开源云平台
  12. 传说中 VUE 的“语法糖”到底是啥?
  13. ObjectARX曲线交点的顺序
  14. 梦幻手游服务器维护摆摊公示时间,梦幻西游手游摆摊交易优化 11号维护安卓多区合服...
  15. 首都师范 博弈论 2 4 2双寡头市场结构的古诺模型
  16. Recall, Precision, and Average Precision
  17. Git 如何退出 git log 状态
  18. 隔离日记~记录特别的日子
  19. Silverlight 2.5D RPG游戏技巧与特效处理:(三)动态光影
  20. ABOV E-PGM+提示 “No valid license” or “Received an invalid 32bit LOCTL

热门文章

  1. 大二上学期C++总结
  2. 【实践】RGW+Ganesha环境部署
  3. Qone中的国际化java类
  4. 5.19 使用变形命令制作艺术文字横幅 [Illustrator CC教程]
  5. PE文件格式详解(手工实现一个可执行文件)
  6. 【每日一题】打卡 3
  7. canvas实现画布动画星空网页背景
  8. Linux 下利用netem模拟广域网特性
  9. Vue - v-show
  10. 新手玩荔枝派 f1c100s nano折腾笔记(二)