jQuery九宫格布局点击弹出加载内容代码



124 492 165



特效描述:jQuery 九宫格布局 点击弹出 加载内容代码,jQuery九宫格布局点击弹出加载内容代码

代码结构

1. 引入CSS

<link type="text/css" rel="stylesheet" href="css/style.css">

2. 引入JS

<script type="text/javascript" src='js/jquery.min.js'></script>
<script type="text/javascript" src="js/index.js"></script>

3. HTML代码

<div class="background-lyrics">
  秘密——吸引力法则:这个秘密可以让你得到你想要的一切,包括快乐健康财富。你能拥有一切,达到你的目标,变成你想成为的人。我们可以拥有一切我们想拥有的东西,无论什么都能得到。你想住在什么样的房子里?你想当个百万富翁吗?你想拥有什么样的事业呢?你希望自己更成功吗?你究竟想要什么?我看到奇迹发生在许多人的生命里,比如财富上,绝症康复,精神康复,以及两性关系转变的奇迹。奇迹之所以出现,是因为他们知道怎么运用我们即将公布的秘密。这是生命中伟大的秘密。这个秘密就是过去、现在和未来一切的答案。我们都具有无穷的力量,我们都被同样的定律引导着,宇宙的自然定律真的是精确无比,因此我们建造宇宙飞船没有任何问题,还可以送人上月球,甚至可以预估登陆时间,精确度在1/10秒之内,不管你是在印度还是在澳洲,纽西兰,斯德哥尔摩,伦敦,多伦多,蒙特娄还是纽约,我们都依循着一种力量,一种定律,就是吸引力。这个秘密就是吸引力定律。你生命里发生的一切,都是由你吸引而来的...
</div>
<div class="container-master">
  <div class="container-tile">
    <h1>九宫格切图点击加载内容列表</h1>
    <div class="content">
      <div class="floaty tile">
        <h3 class="title">秘密</h3>
        <div class="lines"> </div>
        <ul>
          <li>这个秘密可以让你得到你想要的一切,包括快乐健康财富。</li>
          <li>你能拥有一切,达到你的目标,变成你想成为的人。</li>
          <li>我们可以拥有一切我们想拥有的东西,无论什么都能得到。</li>
          <li>你想住在什么样的房子里?</li>
          <li>你想当个百万富翁吗?</li>
          <li>你想拥有什么样的事业呢?</li>
          <li>你希望自己更成功吗?你究竟想要什么?</li>
        </ul>
      </div>
      <div class="floaty tile">
        <h3 class="title">吸引力法则</h3>
        <div class="lines"> </div>
        <ul>
          <li>这个秘密可以让你得到你想要的一切,包括快乐健康财富。</li>
          <li>你能拥有一切,达到你的目标,变成你想成为的人。</li>
          <li>我们可以拥有一切我们想拥有的东西,无论什么都能得到。</li>
          <li>你想住在什么样的房子里?</li>
          <li>你想当个百万富翁吗?</li>
          <li>你想拥有什么样的事业呢?</li>
          <li>你希望自己更成功吗?你究竟想要什么?</li>
        </ul>
      </div>
      <div class="floaty tile">
        <h3 class="title">健康</h3>
        <div class="lines"> </div>
        <ul>
          <li>这个秘密可以让你得到你想要的一切,包括快乐健康财富。</li>
          <li>你能拥有一切,达到你的目标,变成你想成为的人。</li>
          <li>我们可以拥有一切我们想拥有的东西,无论什么都能得到。</li>
          <li>你想住在什么样的房子里?</li>
          <li>你想当个百万富翁吗?</li>
          <li>你想拥有什么样的事业呢?</li>
          <li>你希望自己更成功吗?你究竟想要什么?</li>
        </ul>
      </div>
      <div class="floaty tile">
        <h3 class="title">快乐</h3>
        <div class="lines"> </div>
        <ul>
          <li>这个秘密可以让你得到你想要的一切,包括快乐健康财富。</li>
          <li>你能拥有一切,达到你的目标,变成你想成为的人。</li>
          <li>我们可以拥有一切我们想拥有的东西,无论什么都能得到。</li>
          <li>你想住在什么样的房子里?</li>
          <li>你想当个百万富翁吗?</li>
          <li>你想拥有什么样的事业呢?</li>
          <li>你希望自己更成功吗?你究竟想要什么?</li>
        </ul>
      </div>
      <div class="floaty tile">
        <h3 class="title">财富</h3>
        <div class="lines"> </div>
        <ul>
          <li>这个秘密可以让你得到你想要的一切,包括快乐健康财富。</li>
          <li>你能拥有一切,达到你的目标,变成你想成为的人。</li>
          <li>我们可以拥有一切我们想拥有的东西,无论什么都能得到。</li>
          <li>你想住在什么样的房子里?</li>
          <li>你想当个百万富翁吗?</li>
          <li>你想拥有什么样的事业呢?</li>
          <li>你希望自己更成功吗?你究竟想要什么?</li>
        </ul>
      </div>
      <div class="floaty tile">
        <h3 class="title">自由</h3>
        <div class="lines"> </div>
        <ul>
          <li>这个秘密可以让你得到你想要的一切,包括快乐健康财富。</li>
          <li>你能拥有一切,达到你的目标,变成你想成为的人。</li>
          <li>我们可以拥有一切我们想拥有的东西,无论什么都能得到。</li>
          <li>你想住在什么样的房子里?</li>
          <li>你想当个百万富翁吗?</li>
          <li>你想拥有什么样的事业呢?</li>
          <li>你希望自己更成功吗?你究竟想要什么?</li>
          </ul>
      </div>
      <div class="floaty tile">
        <h3 class="title">幸福</h3>
        <div class="lines"> </div>
        <ul>
          <li>这个秘密可以让你得到你想要的一切,包括快乐健康财富。</li>
          <li>你能拥有一切,达到你的目标,变成你想成为的人。</li>
          <li>我们可以拥有一切我们想拥有的东西,无论什么都能得到。</li>
          <li>你想住在什么样的房子里?</li>
          <li>你想当个百万富翁吗?</li>
          <li>你想拥有什么样的事业呢?</li>
          <li>你希望自己更成功吗?你究竟想要什么?</li>
        </ul>
      </div>
      <div class="floaty tile">
        <h3 class="title">感恩</h3>
        <div class="lines"> </div>
        <ul>
          <li>这个秘密可以让你得到你想要的一切,包括快乐健康财富。</li>
          <li>你能拥有一切,达到你的目标,变成你想成为的人。</li>
          <li>我们可以拥有一切我们想拥有的东西,无论什么都能得到。</li>
          <li>你想住在什么样的房子里?</li>
          <li>你想当个百万富翁吗?</li>
          <li>你想拥有什么样的事业呢?</li>
          <li>你希望自己更成功吗?你究竟想要什么?</li>
        </ul>
      </div>
      <div class="floaty tile">
        <h3 class="title">充满爱</h3>
        <div class="lines"> </div>
        <ul>
          <li>这个秘密可以让你得到你想要的一切,包括快乐健康财富。</li>
          <li>你能拥有一切,达到你的目标,变成你想成为的人。</li>
          <li>我们可以拥有一切我们想拥有的东西,无论什么都能得到。</li>
          <li>你想住在什么样的房子里?</li>
          <li>你想当个百万富翁吗?</li>
          <li>你想拥有什么样的事业呢?</li>
          <li>你希望自己更成功吗?你究竟想要什么?</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="container-lyrics">
    <div class="content">
      <div class="header">
        <a class="back"></a>
        <h4 class="lyrics-title"></h4></div>
      <div class="lyrics-wrapper"></div>
    </div>
  </div>
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 右键菜单 图片淡出淡进 图片头像上传 文字标签 缩略图 文字提示框 文字淡出淡进 文件上传 彩色文字 图片相册 提示框/弹出层 文本框 文字闪烁 图片墙 layer 下拉框 打字机 百叶窗 lightbox 复选 文字列表 图片网格 单选 图片九宫格 Tooltip工具提示框 文字弹幕 登录框 浮动提示框 文字高亮 注册框 图片高亮 html5弹窗动画 搜索框 图片对比 验证码 图片文字 二级联动 单排图片 三级联动 响应式图片 城市选择 图片列表 value赋值 筛选 按钮控制 购物车 颜色选择 表单提交 全选/反选 添加删除 添加标签 密码强度验证 表单验证 html5按钮动画 按钮样式 密码修改设置 文字叠加 图片拖动 图片放大镜 图片叠加 图片翻转旋转 图片延迟加载 图片淡出淡进 图片全屏 图片头像上传 二维码 文字拖动 图片广告 文字提示框 文字收缩展开 文字放大缩小 图片放大缩小 文字翻转旋转 文字淡出淡进 文字全屏 html5图片动画 带缩略图的幻灯片 地图 文字延迟加载 图片滚动 图片滑动 图片切换 图片收缩展开 旋转木马 360全景 html5文字动画 图片轮播 文字滚动 文字滑动 文字切换 自动滚动图片轮播 图标导航菜单 弹出层拖动 背景切换 窗口提示框 手风琴 图片文字 渐隐切换 文字导航菜单 淡出淡入淡进 切换按钮 form表单 图表 文字 图片 头像截图

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到