jQuery实现标题有打字效果的焦点图代码


Posted in Javascript onNovember 16, 2015

本文实例讲述了jQuery实现标题有打字效果的焦点图代码。分享给大家供大家参考,具体如下:

给大家分享一款基于jQuery标题有打字效果的焦点图,具有标题打字形式逐渐显示的功能。这款焦点图适用浏览器有:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗。

运行效果截图如下:

jQuery实现标题有打字效果的焦点图代码

在线演示地址如下:

完整实例代码代码点击此处本站下载。

html代码如下:

<!-- 代码 开始 -->
<div id="header">
 <div class="wrap">
 <div id="slide-holder">
  <div id="slide-runner">
   <a href="#" target="_blank">
    <img id="slide-img-1" src="images/a1.jpg" class="slide" alt="" /></a> <a href="#"
     target="_blank">
     <img id="slide-img-2" src="images/a2.jpg" class="slide" alt="" /></a> <a href="#"
      target="_blank">
      <img id="slide-img-3" src="images/a3.jpg" class="slide" alt="" /></a>
   <a href="#" target="_blank">
    <img id="slide-img-4" src="images/a4.jpg" class="slide" alt="" /></a> <a href="#"
     target="_blank">
     <img id="slide-img-5" src="images/a5.jpg" class="slide" alt="" /></a> <a href="#"
      target="_blank">
      <img id="slide-img-6" src="images/a6.jpg" class="slide" alt="" /></a>
   <a href="#" target="_blank">
    <img id="slide-img-7" src="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"
}
];

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
奇妙的js
Sep 24 Javascript
javascript实现回车键提交表单方法总结
Jan 10 Javascript
jquery合并表格中相同文本的相邻单元格
Jul 17 Javascript
js实现select选择框效果及美化
Aug 19 Javascript
js正则表达式验证表单【完整版】
Mar 06 Javascript
jQuery实现表格奇偶行显示不同背景色 就这么简单
Mar 13 Javascript
JS中使用media实现响应式布局
Aug 04 Javascript
微信小程序实现的涂鸦功能示例【附源码下载】
Jan 12 Javascript
AngularJS实时获取并显示密码的方法
Feb 06 Javascript
Less 安装及基本用法
May 05 Javascript
微信小程序和H5页面间相互跳转代码实例
Sep 19 Javascript
解决vue-cli@3.xx安装不成功的问题及搭建ts-vue项目
Feb 09 Javascript
JavaScript中对DOM节点的访问、创建、修改、删除
Nov 16 #Javascript
常用javascript表单验证汇总
Jul 20 #Javascript
jquery验证邮箱格式是否正确实例讲解
Nov 16 #Javascript
跟我学习javascript的call(),apply(),bind()与回调
Nov 16 #Javascript
跟我学习javascript的函数调用和构造函数调用
Nov 16 #Javascript
12种JavaScript常用的MVC框架比较分析
Nov 16 #Javascript
跟我学习javascript的函数和函数表达式
Nov 16 #Javascript
You might like
PHP开发中的错误收集,不定期更新。
2011/02/03 PHP
php获取URL中带#号等特殊符号参数的解决方法
2014/09/02 PHP
php中引用符号(&amp;)的使用详细介绍
2016/12/06 PHP
JavaScript Event学习第四章 传统的事件注册模型
2010/02/07 Javascript
简短几句jquery代码的实现一个图片向上滚动切换
2011/09/02 Javascript
深入领悟JavaScript中的面向对象
2013/11/18 Javascript
jQuery实现仿百度帖吧头部固定导航效果
2015/08/07 Javascript
轻松实现Bootstrap图片轮播
2020/04/20 Javascript
微信jssdk在iframe页面失效问题的解决措施
2016/03/03 Javascript
JavaScript必知必会(三) String .的方法来自何方
2016/06/08 Javascript
Angular的Bootstrap(引导)和Compiler(编译)机制
2016/06/20 Javascript
jQuery Validate插件实现表单验证
2016/08/19 Javascript
微信小程序实现倒计时60s获取验证码
2020/04/17 Javascript
微信小程序开发摇一摇功能
2019/11/22 Javascript
nodejs制作小爬虫功能示例
2020/02/24 NodeJs
vue滑动吸顶及锚点定位的示例代码
2020/05/10 Javascript
处理Python中的URLError异常的方法
2015/04/30 Python
快速实现基于Python的微信聊天机器人示例代码
2017/03/03 Python
python实现BackPropagation算法
2017/12/14 Python
Anaconda2 5.2.0安装使用图文教程
2018/09/19 Python
解决Django加载静态资源失败的问题
2019/07/28 Python
python实现把二维列表变为一维列表的方法分析
2019/10/08 Python
Python把图片转化为pdf代码实例
2020/07/28 Python
CSS3下的渐变文字效果实现示例
2018/03/02 HTML / CSS
html5 video全屏播放/自动播放的实现示例
2020/08/06 HTML / CSS
俄罗斯披萨、寿司和面食送货到家服务:2 Берега
2019/12/15 全球购物
英语专业毕业生自荐信
2013/10/28 职场文书
日语系毕业生推荐信
2013/11/11 职场文书
人力资源部经理的岗位职责
2014/03/04 职场文书
各营销点岗位职责范本
2014/03/05 职场文书
汽车销售助理岗位职责
2015/04/14 职场文书
职位证明模板
2015/06/23 职场文书
2015年车间管理工作总结
2015/07/23 职场文书
浅谈移动端中的视口(viewport)的具体使用
2021/04/13 HTML / CSS
Python制作一个随机抽奖小工具的实现
2021/07/07 Python
python turtle绘图
2022/05/04 Python