<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jquery网站Timeline时间轴 - 网页模板</title>
<style type="text/css">
*{ margin:0; padding:0; }
body { font:12px/1.5 "Microsoft Yahei"; color:#808080;}
h1 { font-size:18px; text-align:center; margin:20px;}
#container { position:relative; width:860px; margin:0 auto; }
.item {width:408px; margin:20px 10px 10px; float:left; background:#fff; border:1px solid #b4bbcd; text-align:justify; word-wrap:break-word;}
.inner { padding:10px;}
.inner h2 { margin-bottom:10px;}
.inner h2 a { font-size:15px; color:#333; text-decoration:none;}
.inner h2 a:hover {color:#f30;}
/*timeline navigatior css*/
.timeline_container { display:block; width:16px; height:100%; margin:0 auto;text-align:center; cursor:pointer;}
.timeline{ display:block; width:4px; height:100%; margin:0 auto; overflow:hidden; font-size:0; float:left; position:absolute; left:428px; top:10px; background-color:#e08989;}
/*arrow css style*/
.leftCorner, .rightCorner { display:block; width:13px; height:15px; overflow:hidden; position:absolute; top:8px; z-index:2; }
.rightCorner { right:-13px; background-image:url(images/right.gif);}
.leftCorner { left:-13px; background-image:url(images/left.gif);}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.masonry.min.js"></script>
<script type="text/javascript" >
$(function(){
// masonry plugin call
$('#container').masonry({itemSelector : '.item'});
//injecting arrow points
function Arrow_Points(){
var s = $("#container").find(".item");
$.each(s,function(i,obj){
var posLeft = $(obj).css("left");
if(posLeft == "0px"){
html = "<span class='rightCorner'></span>";
$(obj).prepend(html);
} else {
html = "<span class='leftCorner'></span>";
$(obj).prepend(html);
}
});
}
Arrow_Points();
});
</script>
</head>
<body>
<div id="content">
<br><br><br>
<!--DEMO start-->
<div id="container">
<!-- E TimeLine导航 -->
<div class="timeline_container">
<div class="timeline">
<div class="plus"></div>
</div>
</div>
<!-- E TimeLine导航 -->
<!-- S item -->
<div class="item">
<div class="inner">
<h2><a href="http://www.moobnn.com">如何写出好的文案？说人话，简明而足够！</a></h2>
<p>不知道大家有没有看过这样一个视频： 女士对盲人乞丐做了什么? 视频最后说change your words，change your world，由此可以看出文案的魅力。好的文案可以吸引用户，并带来转化率的大幅提升。那么我们就来讨论一下，如何写出好的文案。 什么是好文案? 1. 说人...</p>
</div>
</div>
<!-- E item -->
<!-- S item -->
<div class="item">
<div class="inner">
<h2><a href="http://www.moobnn.com">专访苹果CEO，Tim Cook上任第一年</a></h2>
<p>本文为Bloomberg BusinessweekTim Cooks Freshman Year: The Apple CEO Speaks一文的翻译，作者为Josh Tyrangiel。依照惯例，有心人士请直接观看原文。 早在 2011 年 10 月 5 日，Steve Jobs 辞世之前，他就已经确保了他长久以来信任的副手Tim Cook 能平稳地...</p>
<p>本文为Bloomberg BusinessweekTim Cooks Freshman Year: The Apple CEO Speaks一文的翻译，作者为Josh Tyrangiel。依照惯例，有心人士请直接观看原文。 早在 2011 年 10 月 5 日，Steve Jobs 辞世之前，他就已经确保了他长久以来信任的副手Tim Cook 能平稳地...</p>
</div>
</div>
<!-- E item -->
<!-- S item -->
<div class="item">
<div class="inner">
<h2><a href="http://www.moobnn.com">解读电商寒冬年：2012年电商十大事件</a></h2>
<p>IT互联网行业纷纷扰扰又一年，为了回顾过去，更为了展望未来，本刊将陆续推出系列盘点文章，剖析行业繁华与落寞，首篇选定目前仍最热门的电子商务。</p>
</div>
</div>
<!-- E item -->
<!-- S item -->
<div class="item">
<div class="inner">
<h2><a href="http://www.moobnn.com">【读图】哪条网购渠道会受消费者青睐？</a></h2>
<p>从Nielsen的调查结果上看，在全球范围内，纯线上电商网站依然是大部分用户网购的首选渠道，尤其是亚洲，选择其进行网购的人数正在增长。</p>
</div>
</div>
<!-- E item -->
<!-- S item -->
<div class="item">
<div class="inner">
<h2><a href="http://www.moobnn.com">社交广告-仰望星空，不再孤单</a></h2>
<p>什么是社交广告？ 据尼尔森公司发布的调查结果，91%的在线消费者不同程度地信任熟人所推荐的商品，这就是社交网络的作用 当你进入一家社交网站，看到几个朋友同时在玩某个游戏，你会不会也有想要尝试的愿望?当你想买某件东西，不少熟人不约而同推荐某个品牌...</p>
</div>
</div>
<!-- E item -->
<!-- S item -->
<div class="item">
<div class="inner">
<h2><a href="http://www.moobnn.com">微信公众平台新玩法：十二种微信的推广方法</a></h2>
<p>众所周知，由于微信公众平台是无法在手机上登陆，也无法主动添加好友的，所以在微信推广起来比较困难。</p>
</div>
</div>
<!-- E item -->
<!-- S item -->
<div class="item">
<div class="inner">
<h2><a href="http://www.moobnn.com">我从创建四家技术公司中学到的事</a></h2>
<p>本文系作者2010年我从创建三家技术公司中学到的57件事发表之后，增补最近两年的新感悟修订而成。 限于篇幅，90件事部分摘录如下。 1. 找到公司该做的一件事情。</p>
</div>
</div>
<!-- E item -->
<!-- S item -->
<div class="item">
<div class="inner">
<h2><a href="http://www.moobnn.com">视频行业两大战役：抢占移动端、视频社交化</a></h2>
<p>[ 导读 ]抢占移动终端市场的同时，视频网站和社交网站的结合也有望对视频行业格局产生重要影响。 12月11日消息，未来两年，抢占移动端用户覆盖和社交网站访问入口将成为视频行业两大最关键的战役。任何一家视频网站在这两场战役中取胜，都将有望重新定义行业...</p>
</div>
</div>
<!-- E item -->
</div>
<!--DEMO end-->
</div>
<div style="text-align:center;clear:both">
<br>
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p>
<p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</div>
</body>
</html>
jquery网站Timeline时间轴.zip
版权申诉
22 浏览量
2022-11-22
17:15:53
上传
评论
收藏 99KB ZIP 举报
jquery网站Timeline时间轴.zip （8个子文件） 
jquery网站Timeline时间轴 jiaoben351 images 
right.gif 105B left.gif 105B
right.png 254B
Thumbs.db 12KB left.png 249B
index.html 6KB js jquery.masonry.min.js 5KB
jquery网站Timeline时间轴.jpg 104KB资源评论
芝麻粒儿
- 粉丝: 5w+
- 资源: 2万+
最新资源
- 51单片机学习（1）-软件keil下载
- 历届(第1-21届)希望杯数学竞赛初一试题及答案(最新整理).doc全国数学邀请赛（264页资料）
- 水滴.psd
- TokenPocket_V2.1.2_release.apk
- Apache-druid-kafka-rce.yaml
- 基于C#的ASP.NET数据库原理及应用技术课程指导平台的开发
- 基于ROS的智能车轨迹跟踪算法的仿真与设计源码运用PID跟踪算法.zip.zip
- Bug Bounty Tip - i春秋Self-XSS变废为宝的奇思妙想
- 1991-2015年全国初中化学竞赛复赛试题汇编（212页）(24年竞赛复赛真题).docx天原杯
- Apache Flink 未授权访问+远程代码执行.pdf
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
