jQuery实现导航切换右侧图文混排特效



69 273 92



特效描述:jQuery实现 导航切换 右侧图文混排,jQuery实现导航切换右侧图文混排特效 

代码结构

1. 引入CSS

<link href="css/style.css" rel="stylesheet">
<link href="/templets/skins/style/yulan.css" rel="stylesheet">

2. 引入JS

<script src="js/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="js/style.js"></script>

3. HTML代码

<div class="area-sub">
  <div id="layout-t" class="tab-product tab-sub-3 ui-style-gradient">
    <h2 class="tab-hd"> <span class="tab-hd-con"><a href="#">微博</a></span> <span class="tab-hd-con"><a href="#">发现</a></span> <span class="tab-hd-con"><a href="#">专题</a></span> </h2>
    <div class="tab-bd dom-display">
      <div class="tab-bd-con current"> 
        <ul class="m-list list-tweet">
          <li class="clearfix eat-me"> <i class="tweet-xxl">★</i>
            <h3><a href="#">争议:“打飞机”算不算卖淫</a></h3>
            <a href="#"><img src="images/2013062623303030e43.png" alt="争议:“打飞机”算不算卖淫" width="90" height="90"></a>
            <p>广东高院认为打飞机波推都不算卖淫,你怎么看?...</p>
            <span class="tweet-detail-func cBlue"><a href="#">去看看&gt;&gt;</a></span> </li>
          <li class="clearfix drink-me"> <i class="tweet-xl">★</i>
            <h3><a href="#">微博日报:试婚,试的是性还是爱?</a></h3>
            <a href="#"><img src="images/201306262328325d296.png" alt="微博日报:试婚,试的是性还是爱?" width="90" height="90"></a>
            <p>有人说,试婚是不负责任的借口,也有人认为,试婚能避免许多风险。...</p>
            <span class="tweet-detail-func cBlue"><a href="#">去看看&gt;&gt;</a></span> </li>
          <li class="clearfix drink-me"> <i class="tweet-l">★</i>
            <h3><a href="#">张维迎:警惕下一次经济危机</a></h3>
            <p> 猛药之后肯定有不良的反应,有两种可能诱发经济的宏观问题。一是货币增加太多,出现通货膨胀预期之后,政府肯定会采取... <span class="cBlue"><a href="#"> 详细&gt;&gt;</a> </span></p>
            <span class="tweet-detail-func cBlue"><a href="#">转发<span class="cDRed">(24)</span></a></span> </li>
          <li class="clearfix drink-me"> <i class="tweet-m">★</i>
            <h3><a href="#">盛宣怀:对日和平易昏睡</a></h3>
            <p> 1874年,日本侵台,年仅30岁的盛宣怀参与了调兵赴台的后勤供应,感慨:“海疆各省,手忙脚乱。总是三年求艾,究... <span class="cBlue"><a href="#"> 详细&gt;&gt;</a> </span></p>
            <span class="tweet-detail-func cBlue"><a href="#">转发<span class="cDRed">(4)</span></a></span> </li>
          <li class="clearfix drink-me"> <i class="tweet-s">★</i>
            <h3><a href="#">果壳网:转基因大豆不会致癌</a></h3>
            <p> 近日,黑龙江大豆协会一位负责人称,转基因大豆油的消费与一些省份的癌症发生具有关系。事实真的如此么?他所援引的资... <span class="cBlue"><a href="#"> 详细&gt;&gt;</a> </span></p>
            <span class="tweet-detail-func cBlue"><a href="#">转发<span class="cDRed">(6)</span></a></span> </li>
          <li class="clearfix drink-me"> <i class="tweet-s">★</i>
            <h3><a href="#">闻一:契卡与“红色恐怖”法令</a></h3>
            <p> 《红色恐怖》法令是一座历史坐标,它进一步解放了“契卡”的手脚,赋予了它无上的和无限的特权,势如“十字军讨伐”那... <span class="cBlue"><a href="#"> 详细&gt;&gt;</a> </span></p>
            <span class="tweet-detail-func cBlue"><a href="#">转发<span class="cDRed">(30)</span></a></span> </li>
          <li class="clearfix drink-me"> <i class="tweet-s">★</i>
            <h3><a href="#">董强:谁也无法拒绝真正的尊重和关怀</a></h3>
            <p> 有位心理学界的前辈,平时和我们嘻嘻哈哈的,但看他训下属则毫不客气,挺吓人的。有次,我自己有纠结,找他聊,他立刻... <span class="cBlue"><a href="#"> 详细&gt;&gt;</a> </span></p>
            <span class="tweet-detail-func cBlue"><a href="#">转发<span class="cDRed">(28)</span></a></span> </li>
          <li class="clearfix drink-me"> <i class="tweet-s">★</i>
            <h3><a href="#">木子美:雷政富和赵红霞或许是真爱</a></h3>
            <p> 情妇反腐本来是被当作正义之举的,纪英男的高调披露和声讨,却让官员形象没那么可恶,甚至得到同情了。因为两情相悦的... <span class="cBlue"><a href="#"> 详细&gt;&gt;</a> </span></p>
            <span class="tweet-detail-func cBlue"><a href="#">转发<span class="cDRed">(61)</span></a></span> </li>
        </ul>
      </div>
      <div class="tab-bd-con"> 
        <div class="column">
          <h3 class="column-title lump-blue">观点</h3>
          <ul class="m-list list-main-normal">
            <li><a href="#">贾行家:有的和尚不止逛妓院还开妓院</a></li>
            <li><a href="#">张鸣:明朝开国皇帝是变态的猜忌之人</a></li>
            <li><a href="#">木三刀:“打飞机”和“波推”都算卖淫</a></li>
          </ul>
          <h3 class="column-title lump-green">娱乐</h3>
          <ul class="m-list list-main-normal">
            <li><a href="#">马伊琍:女儿现在跟我小时候一模一样</a></li>
            <li><a href="#">罗家英:是刘家良把香港武侠片带到世界</a></li>
            <li><a href="#">胡静:北京的雾跟印尼的根本没法比</a></li>
          </ul>
          <h3 class="column-title lump-gray">段子</h3>
          <ul class="m-list list-main-normal">
            <li><a href="#">日天巨人:原来人是检察官杀的</a></li>
            <li><a href="#">地下天鹅绒:摆脱拖延症的窍门</a></li>
            <li><a href="#">张池池:不要相信高考状元的鬼话</a></li>
          </ul>
          <h3 class="column-title lump-red">情感</h3>
          <ul class="m-list list-main-normal">
            <li><a href="#">李伟长:女人太物质只因男人不可靠</a></li>
            <li><a href="#">木子美:男人常在一夜情后非常不舍</a></li>
            <li><a href="#">琦殿:懒人会把丑当攻击同性的工具</a></li>
          </ul>
        </div>
      </div>
      <div class="tab-bd-con"> 
        <div class="special"> <a href="#"><img src="images/xiaji.jpg" alt="无下限策划" width="270" height="90"></a> <a href="#"><img src="images/jiedilian.jpg" alt="瞎唱团" width="270" height="90"></a> <a href="#"><img src="images/xianwei1381.jpg" alt="显微镜" width="270" height="90"></a> <a href="#"><img src="images/dreamer21.jpg" alt="段子俱乐部" width="270" height="90"></a> </div>
      </div>
    </div>
  </div>
</div>
<div style="text-align:center;clear:both">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册
小小的太阳
关注
TA的相关作品 >>更多
热搜关键词


热门标签: 瀑布流 收藏 预览 自适应页面大小 响应式区块列表布局 摇摆 烟花 清单样式 照相机 注释 下划线 结构图 鼠标悬停 条形码 弹幕 画板 朋友圈样式 红包 css绘制样式 支付 图文布局 导航切换 收缩导航菜单 缩略图 二维码 文字收缩展开 图片相册 地图 图片切换 图片收缩展开 图片墙 计算器 文字切换 百叶窗 计时器 背景切换 图片网格 桌面 手风琴 图片九宫格 跳转 选项卡自动切换 步骤 视频切换 图片高亮 键盘 列表切换 图片对比 签到 图片文字 分享 渐隐切换 单排图片 点赞 投票 全屏切换 响应式图片 雪花 切换按钮 图片列表 打印 缩放切换 答题 震动 图表 鼠标滑过 抽奖 表情 qq空间 头像截图 星星打分评分 编辑器 播放器 电子杂志 排行榜 分页翻页 排序 表格隔行变色 table表格 进度条 多功能 图片拖动 图片放大镜 图片叠加 图片翻转旋转 图片延迟加载 图片淡出淡进 图片全屏 图片头像上传 二维码 滚动切换 滑动选项卡切换 图片广告 图片放大缩小 html5图片动画 带缩略图的幻灯片 地图 图片滚动 图片滑动 图片切换 图片收缩展开 旋转木马 图片轮播 自动滚动图片轮播 图标导航菜单 选项卡切换 滑动手风琴 背景切换 滑动星星打分 手风琴 收缩收起展开 图表 图片 头像截图 其他更多

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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