给大家分享一款基于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. Ruby on Rails vs. PHP vs. Python

    开发者在开发web应用时,往往会对平台的选择感到困惑,而web专家通常会建议:要考虑几个因素,这些因素包括周转时间.质量.跨浏览器兼容性.与其他框架的整合.数据安全性.易于访问性等. 在考虑了这些因素 ...

  2. Archlinux 踩坑实录

    Archlinux 没声音 1. 排查驱动,声卡驱动没问题 2.排查alsa,alsa没问题(并确认声卡存在且取消静音) 3.抱着尝试的心态,安下VLC.然后提示找不到默认声卡设备(大概这个意思),通 ...

  3. URAL-1998 The old Padawan 二分

    题目链接:http://acm.timus.ru/problem.aspx?space=1&num=1998 题意:有n个石头,每个石头有个重量,每个时间点你能让一个石头飞起来,但有m个时间点 ...

  4. (phpmyadmin error)Login without a password is forbidden by configuration (see AllowNoPassword) in ubuntu

    1.Go to /etc/phpmyadmin/config.inc.php and open it your favorite editor. 2.Search for below line of ...

  5. 移动端和web端前端UI库—Frozen UI、WeUI、SUI Mobile

    web http://www.pintuer.com/ 拼图 http://www.h-ui.net/ http://www.layui.com/  很厉害的一个个人产品 http://amazeui ...

  6. T-SQL游标

    游标是面向行的,它会使开发人员变懒,懒得去想用面向集合的查询方式实现某些功能. 在性能上,游标会迟更多的内存,减少可用的并发,占用带宽,锁定资源,当然还有更多的代码量. 用一个比喻来说明为什么游标会占 ...

  7. 100offer 为专业程序打造的招聘平台

    引用一段100offer的简介 优秀程序员最高效的求职方式 您是名优秀的程序员,很多公司都想邀请您加入,您也有一颗躁动的心.可是,换一份工作对于您,是件机会成本很高的事情.您想一次性看很多个不错的机会 ...

  8. Codeforces Round #367 (Div. 2) C. Hard problem(DP)

    Hard problem 题目链接: http://codeforces.com/contest/706/problem/C Description Vasiliy is fond of solvin ...

  9. 三种JDBC批量插入编程方法的比较

    JDBC批量插入主要用于数据导入和日志记录因为日志一般都是先写在文件下的等. 我用Mysql 5.1.5的JDBC driver 分别对三种比较常用的方法做了测试 方法一,使用PreparedStat ...

  10. c++中的signal机制

    简介 signal是为了解决类之间通信的问题而出现的,更深入的原因是面向对象讲究封装,但是封装必然导致类之间沟通困难,但是使用接口的方式又太重量级--需要写很多代码,而且会导致接口爆炸 比如你需要把一 ...