对JS效果的要求有几点:

1.顶部导航栏鼠标经过动画。

2.Slider轮播图带有左右箭头,底部有缩略图,缩略图和大图都会自动播放。

3.右侧有个三个按钮的导航菜单,第一个按钮回到整个页面顶部,第二个按钮向上遍历锚点,第三个按钮向下遍历锚点。导航菜单要在HTML的一个DIV内部FIXED滑动。

思路如下:

1.鼠标经过的动画,用JQUERY的animate做两个方法,一个用于mouseover,一个用于mouseout

像这样:

function _imgOver(id)

{  var _id="#"+id;

  $(_id).animate({ opacity:1}, 500 );
}

HTML结构方面就是给渐变的目的图片存在的HTML结构一个id,初始图片在目的图片的下面,同时显示于静态页面上,静态让目的图片opacity:0; filter:alpha(opacity=0)而隐藏着,在原始图片存在的HTML层容器上通过鼠标事件触发JS达到效果。

2.Slider 的做法有很多种。慢点总结。

3.浮动的侧导航是花功夫比较多的部分。

首先,如果要固定该菜单于某个DIV内部,就不能用CSS的position:fixed来让它滑动(因为CSS这个属性必须相对BODY定位,在浏览器窗口缩放时候,横向位置会跟着浏览器边框改变)。而必须用JS控制它在HTML指定结构内的竖向滑动。

并且,菜单的滑动定位是一个方面,还有菜单上按钮触发的对应锚点指向的正文内容相对于浏览器窗口的位置也是一个需要定位的方面。

控制菜单滑动 锚点遍历.js (可以引用于HEAD)

var c_index = 0;
$(function(){
$("#gotop").click(function(){
$("html,body").animate({scrollTop:0},800);
c_index=0;
return false;
});
});
$(function(){
$("#pagelist").scrollTo(800);
//$("#pagelist a").eq(0).click();
function getcindex(){
var index = 0;
$("#pagelist a").each(function(i){
if($(this).attr("iscurrent")=="true"){
index = i; }
});
return index;
}
$("#downmenu a").click(function(){
if(c_index<$("#pagelist a").length-1)
{
c_index ++;
$("#pagelist a").eq(c_index).click();
}
else
{
c_index=$("#pagelist a").length-1;
} return false;
}); $("#upmenu a").click(function(){
if(c_index>0)
{
c_index --;
$("#pagelist a").eq(c_index).click();
}
else{c_index=0;} return false;
});
});

控制菜单滑动位置.js (必须在BODY内执行)

$(document).ready(function(){
var timerId;
var $this = $("#menugroup")
$(window).bind('scroll', function(event) {
// alert(1)
clearTimeout(timerId); timerId = setTimeout(function() {
var topInit=50;
var topMove = $(window).scrollTop();
if(topMove>700){
topInit=50+topMove-730;
}
$this.
stop(true, false).
animate({ top: topInit}, 100 )}, 50);
});});

控制正文滚动 scrollTo.js (可以引用于HEAD)

(function($){
$.extend($.fn,{
scrollTo:function(time,to){
time=time||800;
to=to||1;
$('a[href*=#]', this).click(function(){
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var $target = $(this.hash);
//var $toObj = $(this).attr("toObj");
$target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']');
//alert($(this).parent().find("a").length);
$(this).parent().find("a").removeAttr("iscurrent").removeClass("selected");;
if ($target.length) {
if (to == 1) {
var objHeight = $target.height();
var winHeight = $(window).height();
var h =0;//如果要居中 (winHeight - objHeight)/2
var t = $target.offset().top;//距离浏览器窗口顶部的位移
var tt = t-h;//将要滚动的距离
$('html,body').animate({
scrollTop: tt
}, time);
}
else if(to==2){
$('html,body').animate({
scrollLeft: $target.offset().left
}, time);
}else{
alert('argument error!');
}
$(this).attr("iscurrent","true").addClass("selected");
return false;
}
}
});
}
});
})(jQuery);

HTML结构很简单,用a标签href相应文章内容的id名,<a href="#someid"></a>, id="#someid"的HTML元素可以是任何HTML元素,例如li,div。

这样做一个<a href="#someid01"></a><a href="#someid02"></a><a href="#someid03"></a>的列表,用div包起来,比如<div id="pagelist"><a>...</a>...<a>...</a></div>

锚点遍历.js 内的代码就会从c_index=0 即 #someid01 开始遍历该链接列表。

回到顶部不用说,用JQUERY的animation轻而易举:写一个click的函数$("#gotop").click(function(){},内部使用 $("html,body").animate({scrollTop:0},800);语句即可。但要注意的是,为了避免每次从底部回到顶部后,按向下的按钮出现跳到第二,第三内容处(每次加1),所以需要在回到顶部的语句后面将c_index=0清零。见锚点遍历.js内代码。

6月A项目的总结的更多相关文章

  1. 12月中旬项目中出现的几个bug解决方法的思考

    这周做的项目遇到2个费了很多时间才解决的bug,解决之后,发现根本问题并不是什么很难的技术难点,都是因为自己在写代码的过程中,思维不够清晰.还有一个需要再提高的地方就是解决问题的思维,如何快速定位到问 ...

  2. AngularJs项目实践总结

    今年3月接触AngularJs,并且在6月的项目中开始应用,从踩坑到填坑花了不少时间,根据项目中的实际应用情况总结了一些经验,如下: 一.UI控件选择 Angularjs是不缺控件的,Github里现 ...

  3. 百度BAE JAVA环境项目部署和调试

    起初在一个应用挂在虚拟主机上,昨天早上虚拟主机挂了.本来考虑迁移到SAE上的,但之前发现SAE的JVM云豆消耗的太快(PS:我是中级开发者,每月 10000云豆,如果有哪位大神对SAE JAVA云豆能 ...

  4. AngularJs项目

    AngularJs项目实践总结 今年3月接触AngularJs,并且在6月的项目中开始应用,从踩坑到填坑花了不少时间,根据项目中的实际应用情况总结了一些经验,如下: 一.UI控件选择 Angularj ...

  5. LM**项目开发感悟

    LM**项目开发感悟 经过一个多月的项目开发,自己主要负责服务端业务逻辑的实现.服务端采用纯servlet完成,自己是在已有的项目架构上进行编程,对于所使用的架构,自己还没有认真的研究过,但明白其用到 ...

  6. 图数据库项目DGraph的前世今生

    本文由云+社区发表 作者:ManishRai Jain 作者:ManishRai Jain Dgraph Labs创始人 版权声明:本文由腾讯云数据库产品团队整理,页面原始内容来自于db weekly ...

  7. mooctest项目总结 【转载】

    原文链接 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3 ...

  8. [项目实施失败讨论Case] “凭心而论,在这家公司很敬业的工作了3年多,老板最后给我下的评语,大家都看看吧,千万别和我走同一条路!”(摘自csdn)

    [Case] “凭心而论,在这家公司很敬业的工作了3年多,老板最后给我下的评语,大家都看看吧,千万别和我走同一条路!”(摘自csdn) 原文:http://community.csdn.net/Exp ...

  9. 《Blue Flke团队》第二次作业通讯录项目开题报告

      Just_Do_IT! N:8A:8B:7C:6D:8总分:37   Miracle-House N:8A:6B:7C:6D:8总分:35   Spring_Four N:7A:7B:8C:8D: ...

随机推荐

  1. Java HexString

    byte[]和十六进制字符串相互转换 Java中byte用二进制表示占用8位,而我们知道16进制的每个字符需要用4位二进制位来表示. 所以我们就可以把每个byte转换成两个相应的16进制字符,即把by ...

  2. clock_gettime测代码运行时间

    //函数原型: // long clock_gettime (clockid_t which_clock, struct timespec *tp); //参数列表: // CLOCK_REALTIM ...

  3. 移动前端之 zepto

    移动前端之 zepto http://qtown.corp.qunar.com/media/video/detail?id=1084&type=1&title=%E5%86%AF%E5 ...

  4. FreeCodeCamp 的 Basic Algorithm Scripting 题解(1)

    这是本人的原创文章,转载请注明原文链接http://www.cnblogs.com/wusuowiaaa1blog/p/5932121.html. 1.Reverse a String 翻转字符串 先 ...

  5. IK分词算法设计总结

    IK分词算法设计思考 加载词典 IK分词算法初始化时加载了“敏感词”.“主词典”.“停词”.“量词”,如果这些词语的数量很多,怎么保证加载的时候内存不溢出 分词缓冲区 在分词缓冲区中进行分词操作,怎么 ...

  6. Android之使用SharedPreferences保存用户偏好参数

    在Android应用中,我们常需要记录用户设置的一些偏好参数,,此时我们就需要用SharedPreferences和Editor将这些信息保存下来,在下次登录时读取. SharedPreference ...

  7. 从ActionFilterAttribute向view传送数据

    [原文转载]http://www.cnblogs.com/QLeelulu/archive/2008/08/17/1269599.html 原文地址:ASP.NET MVC Tip #31 – Pas ...

  8. iOS app闪退的一般原因

    1.函数无限递归爆栈(表视图返回Cell和返回行高的方法互相调用)2.某对象无法解析某个方法(没做类型转换.或者代理没实现某个方法)3.访问了某个已经被释放的对象(ARC之后不太有)4.从Bundle ...

  9. SGU 148.B-Station

    时间限制:0.25s 空间限制:4M  题目 在离著名的国家Berland不远的地方,有一个水下工作站.这个工作站有N层.已知:是第层装有Wi的水,最多可以容纳Li的水,恐怖分子炸毁第i的代价是Pi. ...

  10. LA 6856 Circle of digits 解题报告

    题目链接 先用后缀数组给串排好序.dc3 O(n) 二分答案+贪心check 答案的长度len=(n+k-1)/k 如果起点为i长为len串大于当前枚举的答案,i的长度取len-1 从起点判断k个串的 ...