分享一个思路
transfrom:translateY() 加在动画里就可以实现效果啊
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>文字/图片向上无限循环滚动</title>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js" language="javascript"></script>
</head>
<body>
<div id="scrollDiv">
<ul>
<li>同一公司内购买一套授权可批量安装使用 <a href="#">详情</a><li>
<li>同一公司内购买一套授权可批量安装使用 <a href="#">详情</a><li>
<li>同一公司内购买一套授权可批量安装使用 <a href="#">详情</a><li>
<li>同一公司内购买一套授权可批量安装使用 <a href="#">详情</a><li>
<li>同一公司内购买一套授权可批量安装使用 <a href="#">详情</a><li>
<li>同一公司内购买一套授权可批量安装使用 <a href="#">详情</a><li>
<li>同一公司内购买一套授权可批量安装使用 <a href="#">详情</a><li>
<li>同一公司内购买一套授权可批量安装使用 <a href="#">详情</a><li>
<li>同一公司内购买一套授权可批量安装使用 <a href="#">详情</a><li>
</ul>
</div>
<script>
function AutoScroll(obj){
$(obj).find("ul:first").animate({
marginTop:"-15px"
},500,function(){
$(this).css({marginTop:"0px"}).find("li:first").appendTo(this);
});
}
$(document).ready(function(){
setInterval('AutoScroll("#scrollDiv")',1000)
});
</script>
</body>
</html>
自己加一下css
上面这是单行文本上下滚动
下面这个是多行文本左右滚动
引入superslide 插件 和jQuery
这是superslide网址 里面的第7个 http://www.superslide2.com/demo.html
这个是下载地址 基础效果就ok http://www.superslide2.com/downLoad.html
几行只要增删 div.txtScroll-left 就行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TEXT-MOVE</title>
<style type="text/css" rel="stylesheet">
* {
margin: 0;
padding: 0;
}
.crosswise {
width: 350px;
color: #2d8b48;
}
/*文本横向滚动*/
.txtScroll-left {
width: 340px;
position: relative;
}
.txtScroll-left .bd {
padding: 9px;
width: 340px;
overflow: hidden;
}
.txtScroll-left .bd ul {
overflow: hidden;
zoom: 1;
}
.txtScroll-left .bd ul li {
margin-right: 20px;
height:20px;
line-height: 22px;
text-align: left;
display: inline;
}
</style>
</head>
<body>
<div class="crosswise">
<div class="txtScroll-left">
<div class="bd">
<ul class="infoList">
<li>中国打破了世界软件巨头规则</li>
</ul>
</div>
</div>
<div class="txtScroll-left">
<div class="bd">
<ul class="infoList">
<li>施强：高端专业语言教学</li>
</ul>
</div>
</div>
<div class="txtScroll-left">
<div class="bd">
<ul class="infoList">
<li>新加坡留学，国际双语课程</li>
</ul>
</div>
</div>
<div class="txtScroll-left">
<div class="bd">
<ul class="infoList">
<li>高考后留学日本名校随你选</li>
</ul>
</div>
</div>
<div class="txtScroll-left">
<div class="bd">
<ul class="infoList">
<li>教育培训行业优势资源推介</li>
</ul>
</div>
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js" ></script>
<script src="jquery.SuperSlide.2.1.3.js" ></script>
<script>
jQuery(".txtScroll-left").slide({
mainCell:".bd ul",
autoPage:true,
effect:"leftLoop",
autoPlay:true,
scroll:1,
vis:1,
trigger:"click",
delayTime:500
});
</script>
</body>
</html>
2872
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
