js实现图片垂直无缝循环
<html>
<head>
<title>无缝垂直图片滚动</title>
</head>
<body>
<div id=demo style=overflow:hidden;height:100;width:180;>
<div id=demo1>
<img src="http://codefans.net/images/logo.gif" onclick="javascript:window.open(this.src);">
<img src="http://codefans.net/images/logo.gif" onclick="javascript:window.open(this.src);">
<img src="http://codefans.net/images/logo.gif" onclick="javascript:window.open(this.src);">
<img src="http://codefans.net/images/logo.gif" onclick="javascript:window.open(this.src);">
<img src="http://codefans.net/images/logo.gif" onclick="javascript:window.open(this.src);">
<img src="http://codefans.net/images/logo.gif" onclick="javascript:window.open(this.src);">
<img src="http://codefans.net/images/logo.gif" onclick="javascript:window.open(this.src);">
<img src="http://codefans.net/images/logo.gif" onclick="javascript:window.open(this.src);">
</div>
<div id=demo2></div>
</div>
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetTop-demo.scrollTop<=0)
demo.scrollTop-=demo1.offsetHeight
else{
demo.scrollTop++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function(){MyMar=setInterval(Marquee,speed)}
</script>
</body>
</html>
js实现文字垂直无缝循环
<!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>
<title>javascript无缝滚动</title>
<meta charset="gb2312"/>
<style type="text/css">
#marquee ,#marquee li { padding:0px; margin:0px;}
#marquee { position:relative; list-style:none; height:150px; width:210px; padding-left:5px; overflow:hidden; border:10px solid #eee; }
#marquee li { position:absolute; font-size:12px;}
#marquee a { display:block; color:#999999; text-decoration:none;}
</style>
<script type="text/javascript">
var Marquee = function(id){
try{document.execCommand("BackgroundImageCache", false, true);}catch(e){};
var container = document.getElementById(id),
slide = container.getElementsByTagName("li")[0],
speed = arguments[1] || 80, //速度
delta = 0,//当前滚动的位置
critical = slide.offsetHeight;//临界点
slide.innerHTML += slide.innerHTML;
var rolling = function(){
delta == -critical ? delta = 0 : delta--;
slide.style.top = delta + "px";
}
var timer = setInterval(rolling,speed)//设置定时器
container.onmouseover=function() {clearInterval(timer)}//鼠标移到marquee上时,清除定时器,停止滚动
container.onmouseout=function() {timer=setInterval(rolling,speed)}//鼠标移开时重设定时器
}
window.onload = function(){
Marquee("marquee");
}
</script>
</head>
<body>
<ul id="marquee">
<li>
<a href="#">纤云弄巧,飞星传恨,银汉迢迢暗度。</a><br />
<a href="#">金风玉露一相逢,便胜却、人间无数。</a><br />
<a href="#">柔情似水,佳期如梦。忍顾鹊桥归路!</a><br />
<a href="#">两情若是久长时,又岂在、朝朝暮暮。</a><br />
<a href="#">千重劫,百世难,亘古匆匆,弹指间!</a><br />
<a href="#">不死躯,不灭魂,震古烁今,无人敌!</a><br />
<a href="#">待到阴阳逆乱时,以我魔血染青天!</a><br />
</li>
</ul>
</body>
</html>
分享到:
相关推荐
JS比较简单 效果比较漂亮 实现无缝循环 非常完美
表格实现无限循环 无缝滚动 在做一些需求的时候可能会用到 像 一些新闻列表或是活动公告等 通过js 实现
思路很简单,关键在css要写好。
无缝循环marquee滚动JS代码实现,兼容IE, FireFox, Chrome,供大家参考,具体内容如下 首先是CSS和HTML如下: #marquee_zxd { border: 1px solid red; white-space: nowrap; overflow: hidden; width: 500px; ...
图片的无缝循环滚动方式: 向上滚动 向下滚动 向右滚动
文字无缝循环滚动js代码(放到body中直接可以使用) 想把table中的内容做成滚动效果,尝试了很多代码,有的都只循环了一次就停了。这个代码就会一直循环,而且无缝,解释也非常详细。希望对大家有帮助!
js实现文字内容无缝循环滚动动画效果,效果显示 http://t.harjes.cn/wfgd/ 使用方法简单,希望对有需要的人有帮助
原生js左右无缝滚动,封装了vue组件。鼠标经过左右的图标左右滚动。经过中间部分停止滚动。 大部分步骤有注释。供学习参考。
ScrollNews 新闻无缝循环滚动切换特效,不错的滚动效果,压缩包内的示例包括横向和竖向两种形式的滚动,本滚动结合图片和文字,运用CSS和Javascript技术,将滚动的内容扩展至DIV标签,也就是控制某个区域的滚动,而...
主要为大家详细介绍了js实现图片无缝循环轮播,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了js无缝循环滚动实现代码,供大家参考,具体内容如下 1、图片格式:260*400. 2、使用循环定时器轻松实现 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"&...
该代码实现了多张图片连续无缝循环播放,是基于js和html以及css整合开发的标记语言
基于vue实现移动端轮播图,主要功能手指触摸滑动滚动、自动轮播、无缝滚动、循环无回滚等。图片切换有过渡效果。适合前端初学者学习。欢迎有疑问的小伙伴私聊提问哦。
js 无缝滚动,鼠标放上去暂停代码,供大家学习和程序中使用
vue实现轮播图,实现滚动切换,无缝切换,自动切换,循环无回滚,暂停滚动等效果。适合初学者学习借鉴。对代码有疑问或者不懂的欢迎私信交流。
imgscroll插件是一款支持图片焦点滚动(支持渐变和滚动),图片连续无缝循环滚动的js库,依赖于jQuery图片无缝连续循环滚动 支持上下左右的滚动。
网上找了很多文字无缝滚动的都是坑爹货,这个不是HTML自带的滚动文字滚动,而是JS实现的左右滚动
纯css图片无缝走马灯效果源码,无需js控制,完美效果