单行文字滚动就用myslider,myslider是一个小型的内容滚动jquery插件。

首先请看实例:http://keleyi.com/jq/myslider/demo/4.htm

然后来看代码:

<script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.11.1.min.js"></script>
<link href="http://keleyi.com/jq/myslider/css/jquery.myslider.0.1.3.css" type="text/css" rel="Stylesheet" />
<script type="text/javascript" src="http://keleyi.com/jq/myslider/js/jquery.myslider.0.1.3.js"></script> <div id="myslider_keleyi_com" class="keleyimyslider">
<ul>
<li>This is a myslider demo.
</li>
<li><a href="http://keleyi.com/jq/myslider/">myslider home</a></li>
<li><a href="http://keleyi.com/">Keleyi Home</a></li>
<li><a href="http://keleyi.com/keleyi/">Keleyi Menu Home</a></li>
<li><a href="http://plugins.jquery.com/myslider/">jquery plugin myslider</a></li>
<li>
http://keleyi.com/jq/myslider/ </li>
</ul>
</div> <script type="text/javascript">
$("#myslider_keleyi_com").myslider({ "width": "500px"
, "millisec": "2000"
, "animatespeed": 800
, "fontSize": "20px"
, "li_style": {"font-size":"20px"}
});
</script>

从上面代码可以看到,实现单行文字滚动很简单,只需引用js文件和css件,然后构造滚动内容的html,最后是使用javascript的语句实现滚动,javascript语句可以设定滚动的方向(上或下),间歇时间,等等参数。可以看到html语句也是很简单的,记得div要加 class="keleyimyslider" 。

当然,myslider插件也可以实现多行内容的滚动,还可以是图片的滚动,详情请参考http://keleyi.com/jq/myslider/

转自:http://keleyi.com/a/bjad/von5fgtg.htm

单行文字滚动就用myslider的更多相关文章

  1. jquery 文字滚动大全 scroll 支持文字或图片 单行滚动 多行滚动 带按钮控制滚动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. Unity3D 文字滚动跑马灯效果

    需求 在日常游戏中,文字滚动效果是比较常用的.例如日常游戏顶部的新闻公告,聊天系统的文字滚动,都属于这个范围. 思路 由于使用的地方比较广泛,所以希望能够尽量独立的游戏之外,能够做到随处使用的功能.N ...

  3. android TextView 例子代码(文字图片、文字省略、文字滚动)

    <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...

  4. winfrom 文字滚动

    winfrom 文字滚动 http://www.codeproject.com/Articles/6913/Creating-a-professional-looking-GDI-drawn-cust ...

  5. marquee 标签 文字滚动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. js鼠标经过文字滚动,移开还原

    不说别的,直接贴代码. <div class="kj-scroll" id="countrylist0" onmouseover="wPAa = ...

  7. marquee|各种文字滚动代码(适用公告)

    marquee|各种文字滚动代码(适用公告)  

  8. js 实现单行文本滚动效果

    js 代码如下: /***************滚动场次开始*****************/ function ScrollText(content, btnPrevious, btnNext, ...

  9. 移动Web单行文字垂直居中的问题

    单行文字垂直居中的方式你可能可以脱口而出,height和line-height设置为同样就行了,或者设置相同的padding-top和padding-bottom值. 上图是Chrome浏览器下的效果 ...

随机推荐

  1. javascript的canvas绘图的基本用法

    <canvas>是HTML里面非常强大的元素,利用它结合js可以实现很多动画效果,大大增强交互性.下面,我想用图文并茂的方式阐述一下canvas的绘图机制的基础内容,话不多说,先上代码: ...

  2. SSIS Design5:使用暂存

    以数据流的方式来设计Package,将核心数据处理移动到数据流中,一般情况下,能够减少临时表的创建,获得较高的处理性能,在某些情况下,使用暂存表(staging table)能够优化package设计 ...

  3. ASP.NET Core的配置(2):配置模型详解

    在上面一章我们以实例演示的方式介绍了几种读取配置的几种方式,其中涉及到三个重要的对象,它们分别是承载结构化配置信息的Configuration,提供原始配置源数据的ConfigurationProvi ...

  4. BFC之清除浮动篇&clear

    我们在日常代码生活中,或多或少会利用浮动来布局,例如导航布局,如下图所示: 但是,我们在实现的时候,经常会遇到父元素“塌陷”以及清除浮动问题.例如 <!DOCTYPE html> < ...

  5. (五)WebGIS中通过行列号来换算出多种瓦片的URL 之在线地图

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.前言 这篇文章里,我主要针对OGC标准中的WMS.WMTS以及Ar ...

  6. 用JqueryUI的Dialog+IFrame实现仿模态窗口效果

    大家有没有想过这样一个问题,当我点击某个图片的时候,我想弹出这个图片信息的详情并修改,于是你首先想到的是不是window.open?window.open方法确实可以,但是有它的局限性,比如,标题显示 ...

  7. 如何用easyui+JAVA 实现动态拼凑datagrid表格(续)

    前面一段时间写了一篇文章: 如何用easyui+JAVA 实现动态拼凑datagrid表格 这篇文章的话,效果是可以实现,但是经过我反复试验,还是存在一些问题的. 今天这篇文章就是向大家介绍下如何避免 ...

  8. 初识openstack

    <1>虚拟化技术的功能和特点 多个虚拟机运行在一台物理服务器上,虚拟机之间共享物理资源,虚拟机可以分别安装不同的操作系统,应用程序相互隔离. 虚拟化技术的优势:虚拟机的操作系统和应用程序不 ...

  9. 搭建OpenGL环境-Windows/VS2013

    对于opengl的环境,简单搭建的话其实和opencv差不多,你会看到下面的过程与opencv类似,不同的就是某些文件需要自己找(因为不是集成的,各个拓展需要单独下载) 1.首先,对于opengl头文 ...

  10. 我的angularjs源码学习之旅1——初识angularjs

    angular诞生有好几年光景了,有Google公司的支持版本更新还是比较快,从一开始就是一个热门技术,但是本人近期才开始接触到.只能感慨自己学习起点有点晚了.只能是加倍努力赶上技术前线. 因为有分析 ...