css+div图片滚动效果

最新推荐文章于 2022-07-31 16:28:13 发布
最新推荐文章于 2022-07-31 16:28:13 发布
阅读量3.5k 收藏 4
点赞数
分类专栏： 转载 文章标签： div css scroll border function float


图片滚动经常在网页里面用到，高手们都是自己来写，我不是高手，所以高手们写了，我就搬来用了，偷偷懒，“常用js效果一：div+css图片上下左右滚动代码”这个也是在网上找的，这个被转载了很多次，测试了下，ie6,7,8还有火狐都能兼容的。还有demo哦！！需要的可以下载哈。


这是向上滚动的：

 

XML/HTML代码
<style type="text/css"> 
<!-- 
#demo { 
    background: #FFF; 
    overflow:hidden; 
    border: 1px dashed #CCC; 
    height: 300px; 
    text-align: center; 
    float: left; 
} 
#demo img { 
    border: 3px solid #F2F2F2; 
    display: block; 
} 
--> 
</style> 
向上滚动 
<div id="demo"> 
<div id="demo1"> 
<a href="#"><img src="upload/2011/11/201111111443365181.gif" border="0" /></a> 
<a href="#"><img src="upload/2011/11/201111111443365181.gif" border="0" /></a> 
<a href="#"><img src="upload/2011/11/201111111443365181.gif" border="0" /></a> 
<a href="#"><img src="upload/2011/11/201111111443365181.gif" border="0" /></a> 
<a href="#"><img src="upload/2011/11/201111111443365181.gif" border="0" /></a> 
</div> 
<div id="demo2"></div> 
</div> 
<script> 
<!-- 
var speed=10; //数字越大速度越慢 
var tab=document.getElementById("demo"); 
var tab1=document.getElementById("demo1"); 
var tab2=document.getElementById("demo2"); 
tab2.innerHTML=tab1.innerHTML;          //克隆demo1为demo2 
function Marquee(){ 
if(tab2.offsetTop-tab.scrollTop<=0)//当滚动至demo1与demo2交界时 
tab.scrollTop-=tab1.offsetHeight  //demo跳到最顶端 
else{ 
tab.scrollTop++ 
} 
} 
var MyMar=setInterval(Marquee,speed); 
tab.οnmοuseοver=function() {clearInterval(MyMar)};//鼠标移上时清除定时器达到滚动停止的目的 
tab.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)};//鼠标移开时重设定时器 
--> 
</script> 

演示地址：http://www.phplover.cn/demo/1.html


 

这是向下滚动的：


XML/HTML代码
<style type="text/css"> 
<!-- 
#demo { 
background: #FFF; 
overflow:hidden; 
border: 1px dashed #CCC; 
height: 200px; 
text-align: center; 
float: left; 
} 
#demo img { 
border: 3px solid #F2F2F2; 
display: block; 
} 
--> 
</style> 
向下滚动 
<div id="demo"> 
<div id="demo1"> 
<a href="#"><img src="upload/2011/11/201111141335356083.gif" border="0" /></a> 
<a href="#"><img src="upload/2011/11/201111141335356083.gif" border="0" /></a> 
<a href="#"><img src="upload/2011/11/201111141335356083.gif" border="0" /></a> 
<a href="#"><img src="upload/2011/11/201111141335356083.gif" border="0" /></a> 
<a href="#"><img src="upload/2011/11/201111141335356083.gif" border="0" /></a> 
</div> 
<div id="demo2"></div> 
</div> 
<script> 
<!-- 
var speed=10; //数字越大速度越慢 
var tab=document.getElementById("demo"); 
var tab1=document.getElementById("demo1"); 
var tab2=document.getElementById("demo2"); 
tab2.innerHTML=tab1.innerHTML; //克隆demo1为demo2 
tabtab.scrollTop=tab.scrollHeight 
function Marquee(){ 
if(tab1.offsetTop-tab.scrollTop>=0)//当滚动至demo1与demo2交界时 
tab.scrollTop+=tab2.offsetHeight //demo跳到最顶端 
else{ 
tab.scrollTop-- 
} 
} 
var MyMar=setInterval(Marquee,speed); 
tab.οnmοuseοver=function() {clearInterval(MyMar)};//鼠标移上时清除定时器达到滚动停止的目的 
tab.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)};//鼠标移开时重设定时器 
--> 
</script>  

演示地址：http://www.phplover.cn/demo/3.html

这是向左滚动的：


XML/HTML代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>无标题文档</title> 
</head> 
<body> 
<style> 
.scroll_div {width:600px; height:62px;margin:0 auto; overflow: hidden; white-space: nowrap; background:#ffffff;} 
.scroll_div img {width:120px;height:60px;border: 0;margin: auto 8px; border:1px #efefef solid;} 
#scroll_begin, #scroll_end, #scroll_begin ul, #scroll_end ul, #scroll_begin ul li, #scroll_end ul li{display:inline;} 
</style> 
<script language="javascript"> 
function ScrollImgLeft(){ 
var speed=20 
var scroll_begin = document.getElementById("scroll_begin"); 
var scroll_end = document.getElementById("scroll_end"); 
var scroll_div = document.getElementById("scroll_div"); 
scroll_end.innerHTML=scroll_begin.innerHTML 
function Marquee(){ 
    if(scroll_end.offsetWidth-scroll_div.scrollLeft<=0) 
      scroll_div.scrollLeft-=scroll_begin.offsetWidth 
    else 
      scroll_div.scrollLeft++ 
} 
var MyMar=setInterval(Marquee,speed) 
scroll_div.οnmοuseοver=function() {clearInterval(MyMar)} 
scroll_div.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)} 
} 
</script> 
<h2 align="center">向左滚动</h2> 
<div style="text-align:center"> 
<div class="sqBorder"> 
    <!--#####滚动区域#####--> 
    <div id="scroll_div" class="scroll_div"> 
      <div id="scroll_begin"> 
        <ul> 
          <li><a href="upload/2011/11/201111111446056115.gif" /></a></li> 
          <li><a href="upload/2011/11/201111111446056115.gif" /></a></li> 
          <li><a href="upload/2011/11/201111111446056115.gif" /></a></li> 
          <li><a href="upload/2011/11/201111111446056115.gif" /></a></li> 
          <li><a href="upload/2011/11/201111111446056115.gif" /></a></li> 
          <li><a href="upload/2011/11/201111111446056115.gif" /></a></li> 
          <li><a href="upload/2011/11/201111111446056115.gif" /></a></li> 
          <li><a href="upload/2011/11/201111111446056115.gif" /></a></li> 
          <li><a href="upload/2011/11/201111111446056115.gif" /></a></li> 
          <li><a href="upload/2011/11/201111111446056115.gif" /></a></li> 
        </ul> 
      </div> 
      <div id="scroll_end"></div> 
    </div> 
    <!--#####滚动区域#####--> 
</div> 
<script type="text/javascript">ScrollImgLeft();</script> 
</div> 
<!--//向左滚动代码结束--> 
</body></html> 

演示地址：http://www.phplover.cn/demo/2.html

 

这是向右滚动的代码：


XML/HTML代码
<style type="text/css"> 
<!-- 
#demo { 
background: #FFF; 
overflow:hidden; 
border: 1px dashed #CCC; 
width: 500px; 
} 
#demo img { 
border: 3px solid #F2F2F2; 
} 
#indemo { 
float: left; 
width: 800%; 
} 
#demo1 { 
float: left; 
} 
#demo2 { 
float: left; 
} 
--> 
</style> 
向右滚动 
<div id="demo"> 
<div id="indemo"> 
<div id="demo1"> 
<a href="#"><img src="upload/2011/11/201111141335356083.gif" border="0" /></a> 
<a href="#"><img src="upload/2011/11/201111141335356083.gif" border="0" /></a> 
<a href="#"><img src="upload/2011/11/201111141335356083.gif" border="0" /></a> 
<a href="#"><img src="upload/2011/11/201111141335356083.gif" border="0" /></a> 
<a href="#"><img src="upload/2011/11/201111141335356083.gif" border="0" /></a> 
<a href="#"><img src="upload/2011/11/201111141335356083.gif" border="0" /></a> 
</div> 
<div id="demo2"></div> 
</div> 
</div> 
<script> 
<!-- 
var speed=10; //数字越大速度越慢 
var tab=document.getElementById("demo"); 
var tab1=document.getElementById("demo1"); 
var tab2=document.getElementById("demo2"); 
tab2.innerHTML=tab1.innerHTML; 
function Marquee(){ 
if(tab.scrollLeft<=0) 
tab.scrollLeft+=tab2.offsetWidth 
else{ 
tab.scrollLeft-- 
} 
} 
var MyMar=setInterval(Marquee,speed); 
tab.οnmοuseοver=function() {clearInterval(MyMar)}; 
tab.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)}; 
--> 
</script>  

 

演示地址：http://www.phplover.cn/demo/4.html


 

 


 

Nikiev
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
html div实现滚动效果,纯css3滚动效果
weixin_42168230的博客
06-09 1260
看到该实例标题的时候，表示心情十分激动然后再加上一点忑忑，因为以前看过类似的，但是都比较有缺憾，不那么完美。可是这个媲美从前所有的纯css3打造的滚动效果，可以堪称完美了(除了没有导航控制)。只因制作巧妙精美，所以我只表示欣赏而不好加以评论，感兴趣的话大家还是自己手动研究下为好。因css3代码篇幅较长，这里只抽出一部分重要的以供参阅：#slider li.firstanimation {-moz-...
div滚动效果
zhangqifeng专栏
02-13 791
废话不多说，直接贴代码，将代码复制到文件中直接用浏览器打开即可看到效果： 高度或宽度，以及内容数量都会对结果产生影响，请仔细调整。 向上滚动效果:     第一行内容  第二行内容  第三行内容  第四行内容  第五行内容  第六行内容  第七行内容  第八行内容       function $(str) { return document.
css图片滚动
qq_34631220的博客
07-31 429
css图片滚动
div css 图片滑动,DIV+CSS无缝滚动图片
weixin_42551227的博客
08-03 535
DIV+CSS无缝滚动图片(2012-03-28 19:22:07)标签：定时器代码结束速度gb2312it向上下左右不间断无缝滚动图片的效果(兼容火狐和IE)-JS特效学院|JsWeb.Cnstyle=overflow:hidden;height:100;width:90;>id=jsweb8_cn_top2>var speed=30jsweb8_cn_top2.innerHTML=...
div+css的图片滚动效果
weixin_34149796的博客
07-26 234
想必大家都注意到<marquee>的不循环滚动，所以出现了很多替代脚本，或iframe或JS输出<marquee>，不管怎么做，都略显麻烦。下面说一下这个相对简单的实现思路：一个设定宽度并且隐藏超出它宽度的内容的容器demo，里面放demo1和demo2，demo1是滚动内容,demo2为demo1的直接克隆，通过不断改变demo1的scrollTop...
div+css布局的图片连续滚动js实现代码
12-11
html布局代码 代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ... <head> <... charset=gb2312″ /> <...script type=”text/
DIV+CSS+JAVASCRIPT实现图片滚动效果
09-12
在网页设计中，"DIV+CSS+JAVASCRIPT实现图片滚动效果"是一个常见的动态展示技术，用于在有限的空间内展示多张图片。这个技术结合了HTML布局的强大工具——Div，CSS样式表来控制视觉样式，以及JavaScript进行交互功能...
DIV+CSS实现横向无缝图片滚动效果
03-18
标题中的“DIV+CSS实现横向无缝图片滚动效果”是指在网页设计中，通过HTML的`<div>`元素和CSS样式来创建一个可以水平无限循环滚动的图片展示区域。这种效果通常用于网站的横幅广告、产品展示或者新闻更新等部分，以...
HTML+CSS+DIV网页设计与布局（第2版）（微课版）-教案.docx
07-06
本教案旨在教授学生 HTML+CSS+DIV 网页设计与布局的基本概念和技术，涵盖网页设计的基本元素、HTML 基本概念、网页文字和图片、网页基本编辑、表格、多媒体、滚动字幕和列表等方面的知识。 第一章 认识网站开发 在...
纯CSS代码实现的图片列表滚动
01-19
纯CSS代码实现的图片列表滚动，就像有些网站的图片友情链接的功能一样，有拖动条哦，采用CSS实现类似框架的效果，好处是对搜索引擎友好，并非使用了框架，实现方法推敲一下，部分图片实现了透明效果。
css实现图片（箭头）无缝滚动（向右）
10-25
css样式控制实现图片无缝滚动，移动的速度是匀速，并且速度可控。
【网页】div自动滚动效果实现
06-23
一个简单的网页示例，可以直接在浏览器中打开查看效果，然后查看源文件看到源码，对初级网页设计学习有所帮助
滑动DIV 效果，一种简单的CSS显示特效
05-07
滑动DIV 效果，一种简单的CSS显示特效实现，可以用于网站中显示比较重要的图片信息，起点缀效果
div简单图片滚动转轴原理
08-22
div简单图片滚动转轴原理
图片无缝滚动代码(DIV+CSS+JavaScript)
03-28 424
div id="imgbox" style="height:110px;width:600px;overflow:hidden;">      div id="imgbox1" style="float:left;width:1000%">          img src="http://www.guhongtao.com/intl/zh-CN/images/logo_cn.gif" mce_s
css实现全图滚动
weixin_30413739的博客
05-06 111
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta ht...
实现div跟着滚动条动的效果
Simplicity is more complicated than you think
07-26 6379
            OnScroll Example                    window.onscroll = function () {                var oWatermark = document.getElementById("divWatermark");                oWatermark.style.top =document.b
JS＋CSS控制图片滚动方向
panqingbiao的专栏
08-17 1448
http://www.w3.org/1999/xhtml">css+js控制图片展示body{  padding: 0px;  margin: 0px;  font: 70% verdana, geneva, arial, helvetica, sans-serif;  color: #000;  text-align: center  }#outer{  padding: 0px;  margi
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值