给大家分享一款基于jQuery标题有打字效果的焦点图。之前为大家分享了好多jquery的焦点图。这款焦点图适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗。

在线预览   源码下载

实现的代码。

html代码:

 <!-- 代码 开始 -->
<div id="header">
<div class="wrap">
<div id="slide-holder">
<div id="slide-runner">
<a href="http://www.w2bc.com/" target="_blank">
<img id="slide-img-1" src="data:images/a1.jpg" class="slide" alt="" /></a> <a href="http://www.w2bc.com/"
target="_blank">
<img id="slide-img-2" src="data:images/a2.jpg" class="slide" alt="" /></a> <a href="http://www.w2bc.com/"
target="_blank">
<img id="slide-img-3" src="data:images/a3.jpg" class="slide" alt="" /></a>
<a href="http://www.w2bc.com/" target="_blank">
<img id="slide-img-4" src="data:images/a4.jpg" class="slide" alt="" /></a> <a href="http://www.w2bc.com/"
target="_blank">
<img id="slide-img-5" src="data:images/a5.jpg" class="slide" alt="" /></a> <a href="http://www.w2bc.com/"
target="_blank">
<img id="slide-img-6" src="data:images/a6.jpg" class="slide" alt="" /></a>
<a href="http://www.w2bc.com/" target="_blank">
<img id="slide-img-7" src="data:images/a4.jpg" class="slide" alt="" /></a>
<div id="slide-controls">
<p id="slide-client" class="text">
<strong></strong><span></span>
</p>
<p id="slide-desc" class="text">
</p>
<p id="slide-nav">
</p>
</div>
</div>
</div>

js代码:

  if (!window.slider) {
var slider = {};
} slider.data = [
{
"id": "slide-img-1", // 与slide-runner中的img标签id对应
"client": "标题1",
"desc": "这里修改描述 这里修改描述 这里修改描述" //这里修改描述
},
{
"id": "slide-img-2",
"client": "标题2",
"desc": "add your description here"
},
{
"id": "slide-img-3",
"client": "标题3",
"desc": "add your description here"
},
{
"id": "slide-img-4",
"client": "标题4",
"desc": "add your description here"
},
{
"id": "slide-img-5",
"client": "标题5",
"desc": "add your description here"
},
{
"id": "slide-img-6",
"client": "标题6",
"desc": "add your description here"
},
{
"id": "slide-img-7",
"client": "标题7",
"desc": "add your description here"
}
];

via:http://www.w2bc.com/Article/17457

基于jQuery标题有打字效果的焦点图的更多相关文章

  1. 基于jquery左侧带选项卡切换的焦点图

    今天给大家分享一款基于jquery左侧带选项卡切换的焦点图.这款焦点图左侧有短标题,单击切换并显示长标题.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class ...

  2. 一款基于jQuery的全屏广告图片焦点图

    之前为大家分享了很多jQuery焦点图插件.今天我们要介绍的这款jQuery全屏广告图片焦点图插件也非常不错,图片切换时有淡出淡出的动画效果,并且也相当流畅.效果图如下: 在线预览   源码下载 实现 ...

  3. 基于jQuery右侧带缩略图导航的焦点图

    今天我们要来分享一款右侧带缩略图导航的jQuery焦点图插件,这款jQuery焦点图插件的特点是右侧有一列缩略图导航列表,并且可以定义任意数量的图片,你可以拖动列表来查看所有的图片,点击缩略图后,即可 ...

  4. 基于jQuery带标题的图片3D切换焦点图

    今天给大家分享一款基于jQuery带标题的图片3D切换焦点图.这款焦点图适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 实现的代码. htm ...

  5. 使用 Sticky-Kit 实现基于 jQuery 的元素固定效果

    元素固定效果在网页中应用得很多,比较常见的使用场景有改进导航,显示广告.Sticky-Kit 是一个非常方便的 jQuery 插件,简化了创建/管理粘元素,有复杂的使用功能.这些功能包括:处理多个固定 ...

  6. jQuery模仿人类打字效果插件typetype

    typetype是一款模仿人类打字效果的jQuery插件,typetype非常轻巧,文件不到2K,gzipped压缩后只有578字节,但模仿的效果非常逼真,一字一字的顿出和回删效果,让人惊叹不止,喜欢 ...

  7. 推荐20款基于 jQuery & CSS 的文本效果插件

    jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...

  8. 基于jQuery Tooltips悬停提示效果

    基于jQuery Tooltips悬停提示效果.这是一款基于jquery.tooltipster插件实现的jQuery Tooltips Hover effect特效.效果图如下: 在线预览   源码 ...

  9. 基于jQuery图像碎片切换效果插件FragmentFly

    基于jQuery图像碎片切换效果插件FragmentFly.这是一款只需三步轻松完成碎片动画,参数可调,使用方便. 在线预览   源码下载 部分代码: <div class="all_ ...

随机推荐

  1. Myeclipse2014 自带的报表功能 与 Eclipse BIRT

    Myeclipse2014 自带的报表功能跟 Eclipse BIRT 差不多,但不兼容   1.只能是MyEclipse Web projects 或者 Report Web project不支持B ...

  2. 关于python all(itrable)的使用 和列表表达式使用以及复习一下短路效应。

    其实现在来看 并不是什么高级特性. 但是当时看到

  3. SurfaceView 和 TextureView

    1.区别 The followings are two limitations of SurfaceView: You can not be animated, transformed and sca ...

  4. 查看80端口被占用的方法(IIS、apmserv、system)

    端口如果被其他程序占用就不能正常启动,比如有时启动时会提示WEB启动失败,其实就是80 端口被占用了,而迅雷等下载软件恰恰就是占用了80端口,关掉就行了.但有时迅雷等都没有开 也启动不了,那就是别的东 ...

  5. Java环境搭建及语言基础

    JRE和JDK JRE:Java Runtime Environment,java运行环境. JDK:Java Development Kit,java开发工具包. 使用JDK开发java程序,交给J ...

  6. How Tomcat Works(十五)

    本文接下来分析Context容器,Context容器实例表示一个具体的Web应用程序,其中包括一个或多个Wrapper实例:不过Context容器还需要其他的组件支持,典型的如载入器和Session管 ...

  7. newlsip 检查磁盘分区使用情况

    主要还是用df -k这个命令,然后将输出结果全部逐行解析,最后调用REST API,发送给服务器保存. 参考代码: #!/usr/bin/newlisp (set 'cur-path "/o ...

  8. CF 86D Powerful array 【分块算法,n*sqrt(n)】

    给定一个数列:A1, A2,……,An,定义Ks为区间(l,r)中s出现的次数. t个查询,每个查询l,r,对区间内所有a[i],求sigma(K^2*a[i]) 离线+分块 将n个数分成sqrt(n ...

  9. javaScript hook

    今天在网上搜索了不少资料,基本概念如下: 钩子(Hook),是Windows消息处理机制的一个平台,应用程序可以在上面设置子程以监视指定窗口的某种消息,而且所监视的窗口可以是其他进程所创建的.当消息到 ...

  10. 从UnitedStack OS 1.0 Preview试用申请问卷调查学习OpenStack

    http://www.diaochapai.com/survey/ 您的角色最可能是? * (必填, 多选) OpenStack私有云用户,希望能将OpenStack/UOS用于公司内部私有云 云计算 ...