3Apr

大事记时间轴jQuery版

时间: 2014-4-3 分类: 网页特效 作者: 鱼小委 2585 次浏览

TAGS: ,

history

在懒人图库上发现的jQuery版公司大事记时间轴,感觉效果还不错收藏了,今天跟大家分享一下。在这个基础上小委还增加了两个简单的小功能。

首先我们来看一下大事记时间轴jQuery版的主要实现代码,主要的效果由CSS控制,加载jQuery即实现了这个功能。

查看预览 下载附件(360云盘 访问密码:23f8)

HTML代码

<div class="history-date">
          <ul>
            <h2 class="first">
              <a href="#nogo">
                2012年
              </a>
            </h2>
            <li class="green">
              <h3>
                10.08
                <span>
                  2012
                </span>
              </h3>
              <dl>
                <dt>
                  发布全新的极速浏览器6.0版本
                  <span>
                    升级极速内核到21.0;全新默认界面;新增小窗口播放功能
                  </span>
                </dt>
              </dl>
            </li>

然后我们来看一下两个简单的小功能

小功能一

右侧返回首页、返回顶部按钮

按钮的实现主要通过css样式来实现,返回顶部的效果通过一个js文件控制,我们来看下实现此功能的代码段。

css样式代码

/*gototop*/
#tbox{width:54px; float:right; position:fixed; right:20px; bottom:150px;}
#pinglun,#home,#gotop{ width:54px; height:56px; background:#ff7d00 url(../images/icon.png) no-repeat; display:block; margin-bottom:5px;filter:alpha(Opacity=50);-moz-opacity:0.5;opacity: 0.5;}
#pinglun:hover,#home:hover,#gotop:hover{filter:alpha(Opacity=100);-moz-opacity:1;opacity:1;}
#pinglun{ background-position:0 -59px;}
#home{ background-position:0 5px;}
#gotop{ background-position:0 -118px;}

接下去只要在相应的页面中放入以下调用代码即可

<div id="tbox"> 
      <a id="home" href="你的网址" target="_blank" title="返回首页">
      </a>
      <a id="gotop" href="javascript:void(0)" onclick="goto_top()" title="返回顶部">
      </a>
</div>
<script src="js/gototop.js" type="text/javascript"></script> //加载返回顶部的效果

小功能二

鼠标双击页面后页面自动向下滚动

这个功能只需一段js代码来控制,演示文件的js文件下的move.js,功能的实现只需在页面中加入一句代码。
目前这个功能基本上支持大多浏览器,唯独火狐浏览器不能实现,应该是浏览器设置的问题。

<script src="js/move.js" type="text/javascript"></script>

查看预览 下载附件(百度网盘)

本文作者:

热衷于学习基于WordPress平台的网站设计与开发,狂热的IT工作者,热爱生活。我要投稿

喜欢我们的文章请您与朋友分享:

更多

相关文章:

Comments

目前没有评论. 你将成为第一个吃沙螃蟹的人!

Comments
发表评论

电子邮件地址不会被公开。*标记为必填选项

  • 正确格式为: http://www.huangjianwei.com.cn

按 [ Ctrl+Enter ] 键直接提交

返回顶部