微信扫一扫8.6w+
社区成员
怎样让文字或图片平滑滚动？
怎样让文字或图片平滑滚动？
用marquee的话，速度快一点就一顿一顿的，晃眼睛
用类似下面的代码，有时候内容少会不滚动，有一些文字类的甚至都不滚动
// var speed1 = 15;
// demo5.innerHTML = demo4.innerHTML;
// function Marquee1(){
// if(demo5.offsetWidth - demo3.scrollLeft <= 0)
// demo3.scrollLeft -= demo4.offsetWidth;
// else{
// demo3.scrollLeft++;
// }
// }
// var MyMar1=setInterval(Marquee1,speed1);
// demo3.onmouseover=function() {clearInterval(MyMar1)}
// demo3.onmouseout=function() {MyMar1=setInterval(Marquee1,speed1)}
请问有什么好方法实现平滑滚动呢？还是我用的代码不对？
用marquee的话，速度快一点就一顿一顿的，晃眼睛
用类似下面的代码，有时候内容少会不滚动，有一些文字类的甚至都不滚动
// var speed1 = 15;
// demo5.innerHTML = demo4.innerHTML;
// function Marquee1(){
// if(demo5.offsetWidth - demo3.scrollLeft <= 0)
// demo3.scrollLeft -= demo4.offsetWidth;
// else{
// demo3.scrollLeft++;
// }
// }
// var MyMar1=setInterval(Marquee1,speed1);
// demo3.onmouseover=function() {clearInterval(MyMar1)}
// demo3.onmouseout=function() {MyMar1=setInterval(Marquee1,speed1)}
请问有什么好方法实现平滑滚动呢？还是我用的代码不对？
...全文
当前发帖距今超过3年，不再开放新的回复
发表回复
cjh200102 2010-11-16
共同交流进步
- 打赏
- 举报
hch126163 2010-11-15
呵呵，我是最近晚上比较闲，挣点专家分！我是看到能帮得上忙的，就说2句。不知道的，就自己看看高手的解决办法，自己也学知识！
- 打赏
- 举报
jsps2t89 2010-11-15
[Quote=引用 3 楼 hch126163 的回复:]
MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类
[/Quote]
大哥，你别跟在我后面发帖啊，会让人误会我是你的马甲，马甲又不好，我是个纯洁上进的菜鸟，我是个端着枪眯着眼猫着腰迈着小碎步前进的菜鸟，我是个每天晚上回来后打开辣椒酱，然后夹到热腾腾的馒头里，配口茉莉花茶惬意生活的菜鸟，我不是马甲，吼!!!!
MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类
[/Quote]
大哥，你别跟在我后面发帖啊，会让人误会我是你的马甲，马甲又不好，我是个纯洁上进的菜鸟，我是个端着枪眯着眼猫着腰迈着小碎步前进的菜鸟，我是个每天晚上回来后打开辣椒酱，然后夹到热腾腾的馒头里，配口茉莉花茶惬意生活的菜鸟，我不是马甲，吼!!!!
- 打赏
- 举报
itzhiren 2010-11-14
太感谢了，我去试一下
- 打赏
- 举报
hch126163 2010-11-14
jsps2t89 2010-11-14
不论是内容是文字还是图片，只要你放到代码指定的层上就会水平来回滑动
- 打赏
- 举报
jsps2t89 2010-11-14
<script>
var toRight=true;
function move(){
//浏览器的宽度
var bWidth=document.documentElement.clientWidth;
//图片所在层的宽度
var divWidth=document.getElementById("myDiv").offsetWidth;
//图片左边界能到达到右边的最大距离
var maxLeft=bWidth-divWidth;
//图片左边距离到浏览器最左边的距离
var left=document.getElementById("myDiv").style.pixelLeft;
//判断
if(left<0)
{
toRight=true;
}
if(left>maxLeft)
{
toRight=false;
}
if(toRight)
{
//图片向右走
document.getElementById("myDiv").style.pixelLeft+=2;
}else
{
document.getElementById("myDiv").style.pixelLeft-=2;
}
//移动的方法
setTimeout("move()",10);
}
window.onload=move;
</script>
</head>
<body >
<div id="myDiv" style="position:absolute">
<img src="exclam.gif" >
</div>
</body>
</html>
经过测试发给你，可以直接复制代码到dreamweaver中试试
var toRight=true;
function move(){
//浏览器的宽度
var bWidth=document.documentElement.clientWidth;
//图片所在层的宽度
var divWidth=document.getElementById("myDiv").offsetWidth;
//图片左边界能到达到右边的最大距离
var maxLeft=bWidth-divWidth;
//图片左边距离到浏览器最左边的距离
var left=document.getElementById("myDiv").style.pixelLeft;
//判断
if(left<0)
{
toRight=true;
}
if(left>maxLeft)
{
toRight=false;
}
if(toRight)
{
//图片向右走
document.getElementById("myDiv").style.pixelLeft+=2;
}else
{
document.getElementById("myDiv").style.pixelLeft-=2;
}
//移动的方法
setTimeout("move()",10);
}
window.onload=move;
</script>
</head>
<body >
<div id="myDiv" style="position:absolute">
<img src="exclam.gif" >
</div>
</body>
</html>
经过测试发给你，可以直接复制代码到dreamweaver中试试
- 打赏
- 举报
jQuery图片文字平滑滚动插件，jQuery.scrollSomething使用演示 摘要:脚本资源,jQuery,滚动插件,文字滚动,图片滚动 jQuery图片文字平滑滚动插件，jQuery.scrollSomething使用演示，在背景加黑的文字或图片上，鼠标移过去后会出现一个三角，放在这个三角上，文字或图片就可向左或...
jquery图文左右平滑滚动效果 多张图片，图文并茂的形式，可点击底部左右切换按钮，实现文字图片同时左右切换。 jquery代码比较简单，易懂: 1、引入css文件到页面中 2、依次引入本站jquery库以及jquery代码 3、将html代码拷贝到你指定的地方...
jq实现图片滚动（平滑滚动）.rar jq实现图片滚动（平滑滚动）代码，让图片无缝循环滚动，可点击文字控制滚动方向，不限图片数量的上下图片滚动，支持IE8以下浏览器，IE9和火狐及Chrome下有问题，也希望JS达人可修正代码哦。
多种JQuery循环滚动文字图片效果代码 自己模仿JQ插件的写法写了一个循环滚动列表插件，支持自定义上、下、左、右四个方向，支持平滑滚动或者间断滚动两种方式，都是通过参数设置。JQ里面有些重复的地方，暂时没想到更好的方法去精简。不过效果还是可以的...
android 按钮 图片文字居中显示,[Android]Android 布局中如何让图片和文字居中显示？... 图片文字居中显示 **①组件TextView的属性 drawableTop ``` 块内或者行内图片与文字居中对齐最靠谱的方式! 做图片与文字在一行的按钮时候最常用到,总结了一个靠谱的方法,终于可以完美的对齐下面给个代码 首先是...
Swiper 3 平滑滚动 并 出现文字介绍 这样就可以通过swiper-slide-active来判断是否是当前item下的文字 改变swiper-wrapper的属性，并在js中添加 autoplay : 1, 自动切换的时间间隔（单位ms），不设定该参数slide不会自动切换 这样就可以...
JS实现图片的不间断连续滚动的简单实例 可能大家都碰到过，当marquee中滚动的是图片的时候，滚到终点的时候直接就跳回到起点了，而不像文字那样可以无缝滚动，下面介绍的是通过js来实现图片的无缝滚动。 先了解一下下面这几个属性： innerHTML: 设置或获取...
JS实现单张或多张图片持续无缝滚动的示例代码 图片滚动原理同图片轮播原理，同样也适用于文字滚动等一系列滚动，通过复制最后一张图片或最后一堆文字插入第一行，或复制第一张图片或一堆文字插入在结尾，来实现无缝拼接，前提：1、必须是没有设置过渡动画的，2、...
python 最准确的图片转文字软件,图片转文字软件哪个好？5款好用的图片转文字软件推荐... 一些网友在整理资料的时候发现，所收获的资料都是图片，大部分的文字内容都在图片上，如果一个字一个字的打出来，需要花费非常多的时间，小编的建议是可以使用图片转文字软件来解决一个问题，那么，图片转文字软件...
php图片循环滚动播放,多种JQuery循环滚动文字图片效果代码_jquery 自己模仿JQ插件的写法写了一个循环滚动列表插件，支持自定义上、下、左、右四个方向，支持平滑滚动或者间断滚动两种方式，都是通过参数设置。JQ里面有些重复的地方，暂时没想到更好的方法去精简。不过效果还是可以的...
raychang-space:平滑滚动的2.5D作品集网站 平滑滚动的2.5D作品集网站 我始终认为，设计与开发是一体两面，设计本是为开发而存在，开发也是为了完成设计，两者相辅相成，相互影响。因此在网站的主页中，我使用建筑图与对设计和开发的解释，来表现自己在前端...
php 页面图片无缝滚动,javascript实现单张或多张图片持续无缝滚动 原理：图片滚动原理同图片轮播原理，同样也适用于文字滚动等一系列滚动，通过复制最后一张图片或最后一堆文字插入第一行，或复制第一张图片或一堆文字插入在结尾，来实现无缝拼接，前提：1、必须是没有设...
Glide 一个专注于平滑滚动的图片加载和缓存库 如有有不了解Gide，请点击在图片加载库烂大街的今天，选择一个适合自己使用的图片加载库已经成为了每一个Android开发者的必经之路。现在市面上知名的图片加载库有UIL,Picasso,Volley ImageLoader,Fresco以及我们今天...
Delphi平滑字体特效控件 平滑特效字体控件包是一个基于平滑（Anti-aliasing）和特效（Effect）字体 技术的控件包，支持透明、半透明、阴影、模糊、渐变色、字体纹理、噪声、轮 廓字等特效。
原生javascript实现图片左右平滑轮播效果（思路分析+代码） 效果截图： 思路： 1准备工作 1通过html和css实现图片水平布局（可以在main里面设置overflow=...3设置默认展示的图片的下标imgIndex=1 默认的轮播按钮下标btnIndex=0 初始的main的scrollLeftmain.scr...
