新浦京娱乐场官网-301net-新浦京娱乐www.301net
做最好的网站

本文实例讲述了jQuery实现标题有打字效果的焦点

正文实例呈报了jQuery完毕标题有打字效果的枢纽图代码。分享给我们供大家参照他事他说加以考察,具体如下:

给我们享受一款基于jQuery标题有打字效果的症结图,具有标题打字形式日益展现的成效。那款主题图适用浏览器有:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗。

运维效果截图如下:

图片 1

在线演示地址如下:

全体实例代码代码点击这里本站下载.rar)。

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="图片 2" /></a> <a href="#"
     target="_blank">
     <img id="slide-img-2" src="images/a2.jpg" class="slide" alt="图片 3" /></a> <a href="#"
      target="_blank">
      <img id="slide-img-3" src="images/a3.jpg" class="slide" alt="图片 4" /></a>
   <a href="#" target="_blank">
    <img id="slide-img-4" src="images/a4.jpg" class="slide" alt="图片 5" /></a> <a href="#"
     target="_blank">
     <img id="slide-img-5" src="images/a5.jpg" class="slide" alt="图片 6" /></a> <a href="#"
      target="_blank">
      <img id="slide-img-6" src="images/a6.jpg" class="slide" alt="图片 7" /></a>
   <a href="#" target="_blank">
    <img id="slide-img-7" src="images/a4.jpg" class="slide" alt="图片 8" /></a>
   <div id="slide-controls">
    <p id="slide-client" class="text">
     <strong></strong>
    </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程序设计有所帮忙。

你也许感兴趣的篇章:

  • 使用jQuery完毕打字机字幕效果实例代码
  • jQuery打字效果落实格局(附demo源码下载)
  • 依靠Css3和JQuery实现打字机效果
  • jQuery 写的简短打字游戏能够提示正确和谬误的次数
  • 不利用jquery完毕js打字效果示例分享
  • 基于jQuery达成的打字机效果

本文由新浦京娱乐场官网-301net-新浦京娱乐www.301net发布于301net网站建设,转载请注明出处:本文实例讲述了jQuery实现标题有打字效果的焦点

您可能还会对下面的文章感兴趣: