首页
源码
教程
资源
资讯
常用软件
|
效果代码
|
设计理论
|
技术文章
|
当前位置：
主页
>
资源
>
效果代码
>
文字横向不间断滚动js代码
栏目分类：
效果代码
发布日期：2015-09-02 浏览次数：
次
这里${affiche content}是从数据库取出来的文字。之所以在scroll_begin的div里面写这个多重复的文字，是因为这些文字的长度必须要大于scroll_div的div容器。如果小于div容易，则不会有一直滚动的效果。换句话说：
<style type="text/css"> #gongao{width:1000px;height:30px;overflow:hidden;line-height:30px;font-size:13px;font-family:'宋体';background:#DDE5ED;color:#0C77CF;font-weight:bold;} #gongao #scroll_begin, #gongao #scroll_end{display:inline}</style> <script type="text/javascript"> function ScrollImgLeft(){ var speed=50; 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.onmouseover=function() {clearInterval(MyMar);} scroll_div.onmouseout=function() {MyMar=setInterval(Marquee,speed);} } </script> <div id="gongao"> <div class="scroll_div" id="scroll_div" style="width:900px;height:30px;margin:0 auto;white-space: nowrap;overflow:hidden;"> <div id="scroll_begin">${affiche.content} ${affiche.content} ${affiche.content} ${affiche.content} ${affiche.content} ${affiche.content}</div> <div id="scroll_end"> </div> </div> <script type="text/javascript">ScrollImgLeft();</script></div>
这里${affiche.content}是从数据库取出来的文字。
之所以在scroll_begin的div里面写这个多重复的文字，是因为这些文字的长度必须要大于scroll_div的div容器。如果小于div容易，则不会有一直滚动的效果。
换句话说：无缝滚动的内容宽度加起来必须要大于容器的宽度。
相关热词：
滚动js代码
不间断
横向滚动js代码
上一篇：
非常优秀响应式jQuery焦点图插件bxSlider
下一篇：没有了
相关内容
这些是最新的
photoshop结合SAI把时尚美女转为手绘效果
Coreldraw制作设计可爱的“芝麻官不倒翁”
Photoshop制作时尚的发光金属边框字
CorelDraw设计logo教程制作个性的三角形企业L
Illustrator绘制超酷效果的立体字教程
Illustrator运用3D效果制作网页按钮
CorelDRAW制作金属按键教程
使用CorelDraw来绘制时尚的蝴蝶花纹图案教程
使用CorelDRAW钢笔工具、交互式透明工具来制
在Word中插入的图片如何只变大小不变形想怎么
热门关键词
焦点图
spinner
dropkick
photoshop
手绘效果
大陆
互联网
谷歌
宽屏
android
触屏
jQuery插件
电脑
detection
eclipse
绘制立体逼真的弹簧
js轮播图
智能手机
进销存
源码
焦点图插件
jQuery焦点图代码
宽屏焦点图
jQuery焦点图
支持鼠标拖动
通讯录
SuperSlide
jQuery
3D图片旋转
标签切换
热门排行
box-sizing是CSS3的box属性 .
什么是长尾关键词？
网页启用Gzip压缩教程 提高浏览
MYSQL用户root密码为弱口令的攻
怎样使MySQL安全以对抗解密高手
教像如何使用Photoshop把照片转
IIS添加MIME扩展类型及常用的MIM
Word中如何自动生成目录为几十页
Word使用替换配合通配符删除连续
目标关键词是什么意思？
Copyright 小黄人 版权所有 粤ICP备62569859号-1
关于我们
|
广告合作
|
版权声明
|
意见反馈
|
联系方式
|
原创投稿
|
网站地图
|
源码
教程
资源
资讯
