HTML通知、新闻等文字列表的无缝滚动效果

这里推荐使用开源jQuery插件SuperSlide，下载链接：http://www.superslide2.com/downLoad.html

使用方法非常简单，以下为一个实例

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%String path = request.getContextPath();String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>" />
<link rel="stylesheet" type="text/css" href="shizi/shizicss/reset.css" />
<link rel="stylesheet" type="text/css" href="shizi/shizicss/style.css" /><script type="text/javascript" src="shizi/shizijs/jquery1.42.min.js"></script>
<script type="text/javascript"src="shizi/shizijs/jquery.SuperSlide.2.1.1.source.js"></script></head>
<!-- by xiuhao.yan -->
<body><div class="xq_left_div2"><div class="xq_div_div1"><h1>培训需求</h1></div><div class="xq_div1_div2"><ul class="infoList"><s:iterator value="%{#application.peixunlist}"><li style="overflow:hidden;"><div class="img"><img src="data:images/dian.jpg" /></div><div class="wen"><a target="_parent"href="showpeixun.action?id=<s:property value='id'></s:property>"><s:propertyvalue="companyname"></s:property>---<s:property value="time"></s:property></a></div></li></s:iterator></ul></div><div style="clear:both;"></div></div><script type="text/javascript">jQuery(".xq_left_div2").slide({mainCell : ".xq_div1_div2 ul",autoPlay : true,effect : "topMarquee",vis : 6,interTime : 50});</script></body>
</html>

效果如下

其中jQuery部分解释如下：

vis：可视个数
interTime：运行速度
effect：滚动效果（topMarquee）
mainCell：作用范围

转载于:https://www.cnblogs.com/liesun/p/9209570.html

HTML通知、新闻等文字列表的无缝滚动效果相关推荐

php无缝滚动文字,JQuery文字无缝滚动效果实现方法
本文主要介绍了JQuery实现文字无缝滚动效果示例代码(Marquee插件),具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家. 推荐一个JQuery的无缝文字滚动效果,同时也可以滚 ...
文字无限无缝滚动效果——和派孔明
文字无限无缝滚动效果--和派孔明 <!DOCTYPE html> <html lang="en"> <head><meta charset ...
html 下拉框字体,怎么把select下拉菜单里的文字设置成左右滚动效果
原标题:怎么把select下拉菜单里的文字设置成左右滚动效果希望用marquee标签来设置字体滚动,代码是下面这样写的,但是没有效果,字体还是不会滚动,应该怎么来写,才会实现这个效果呢? " ...
html5实现无缝滚动的效果,基于JavaScript实现无缝滚动效果
本文实例为大家分享了JavaScript实现无缝滚动效果展示的具体代码,供大家参考,具体内容如下首先应该区分样式中的绝对定位和相对定位,一般来说,移动的单位为绝对定位,在这个实例中,移动的Ul就是绝 ...
html多张图片无缝滚动播放,jQuery实现的多张图无缝滚动效果【测试可用】
本文实例讲述了jQuery实现的多张图无缝滚动效果.分享给大家供大家参考,具体如下: slider *{ padding: 0; margin: 0; } li{ list-style-type: n ...
vue实现列表的无缝滚动
前言: 在有无缝滚动的需求的时候我第一时间想的是轮播图,但是想弄一个列表那种的效果,轮播图就实现的就只能自己写个表头,这样用户体验不好,这里经过我自己使用,不管是兼容还是跨浏览器(版本较高)都是可以的 ...
html无缝滚动原理,JavaScript实现图片无缝滚动效果
图片无缝滚动就是图片一直不停的滚动,好像没有无穷无尽似的,实际上就是几张图片不停的循环,但是看不出有从最后面切换到最前面的效果,这就是无缝滚动,文字和图片都可以无缝滚动,这里介绍的是图片,文字是同样的 ...
JS实现图片无缝滚动效果
首先,借助一张草图来简单说明一下往左移动的做法(往右相同). 如上图所示,图片的无缝滚动原理其实是把滚动的图片复制成两份并联排列,当滚动完一次后就把图片扯回到起点,重新滚动.这里的往左运动把图片扯回起 ...
用js实现图片的无缝滚动效果
实现图片的无缝滚动就是要让你的图片集在一定时间里自动切换,那就需要js里的定时器来控制时间. js中关于定时器的方法有两种:setTimeout和setInterval.它们接收的参数是一样的,第一个 ...

HTML通知、新闻等文字列表的无缝滚动效果

HTML通知、新闻等文字列表的无缝滚动效果相关推荐

最新文章

热门文章