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



33 128 43



特效描述: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>



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


热门标签: 图片全屏 图片淡出淡进 图片淡出 图片淡进 二维码 图片延迟加载 图片延迟 图片加载 图片翻转 图片旋转 图片叠加 图片层叠 图片拖动 图片拖拽 图片放大镜 头像上传 图片上传 带缩略图的幻灯片 h5图片动画 h5图标动画 html5图片动画 html5图标动画 图片放大缩小 图片缩放 图片大小 图片放大 图片缩小 图片变大 图片变小 图片广告 地图 中国地图 世界地图 滚动切换 滚动条切换 滑动选项卡 滑动切换 旋转木马 图片旋转木马 文字旋转木马 旋转木马插件 图片滚动 图片滚动条 图片滑动 图片滑块 图片收缩展开 图片收缩 图片展开 纯图片轮播 图片轮播 图片切换 图片选项卡 图标选项卡 自动滚动图片轮播 图标导航 图标菜单 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 背景切换 大图切换 滑动手风琴 手风琴 水平手风琴 垂直手风琴 图片手风琴 文字手风琴 手风琴插件 滑动星星打分 收缩展开 展开收缩 收缩 展开 图表 图片 图片插件 头像截图 其他 图文布局 导航切换 菜单切换 收缩菜单 收缩导航 图片文字 图片列表 鼠标滑过 鼠标悬停 跟随鼠标移动

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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