6月A项目的总结
对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项目的总结的更多相关文章
- 12月中旬项目中出现的几个bug解决方法的思考
这周做的项目遇到2个费了很多时间才解决的bug,解决之后,发现根本问题并不是什么很难的技术难点,都是因为自己在写代码的过程中,思维不够清晰.还有一个需要再提高的地方就是解决问题的思维,如何快速定位到问 ...
- AngularJs项目实践总结
今年3月接触AngularJs,并且在6月的项目中开始应用,从踩坑到填坑花了不少时间,根据项目中的实际应用情况总结了一些经验,如下: 一.UI控件选择 Angularjs是不缺控件的,Github里现 ...
- 百度BAE JAVA环境项目部署和调试
起初在一个应用挂在虚拟主机上,昨天早上虚拟主机挂了.本来考虑迁移到SAE上的,但之前发现SAE的JVM云豆消耗的太快(PS:我是中级开发者,每月 10000云豆,如果有哪位大神对SAE JAVA云豆能 ...
- AngularJs项目
AngularJs项目实践总结 今年3月接触AngularJs,并且在6月的项目中开始应用,从踩坑到填坑花了不少时间,根据项目中的实际应用情况总结了一些经验,如下: 一.UI控件选择 Angularj ...
- LM**项目开发感悟
LM**项目开发感悟 经过一个多月的项目开发,自己主要负责服务端业务逻辑的实现.服务端采用纯servlet完成,自己是在已有的项目架构上进行编程,对于所使用的架构,自己还没有认真的研究过,但明白其用到 ...
- 图数据库项目DGraph的前世今生
本文由云+社区发表 作者:ManishRai Jain 作者:ManishRai Jain Dgraph Labs创始人 版权声明:本文由腾讯云数据库产品团队整理,页面原始内容来自于db weekly ...
- mooctest项目总结 【转载】
原文链接 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3 ...
- [项目实施失败讨论Case] “凭心而论,在这家公司很敬业的工作了3年多,老板最后给我下的评语,大家都看看吧,千万别和我走同一条路!”(摘自csdn)
[Case] “凭心而论,在这家公司很敬业的工作了3年多,老板最后给我下的评语,大家都看看吧,千万别和我走同一条路!”(摘自csdn) 原文:http://community.csdn.net/Exp ...
- 《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: ...
随机推荐
- SpringMVC ModelAndView方法与模板传参接收不到问题
最近在使用Spring MVC做项目时,碰到一个问题,就是通过ModelAndView与前端模板页面通信时,一直无法在模板中显示出来传过去的参数值. 在网上也查了好久,就是不知道是啥问题,很是郁闷. ...
- 【转】setAnimation和startAnimation区别
http://stackoverflow.com/questions/10909865/setanimation-vs-startanimation-in-android http://blog.cs ...
- [Flux] 1. Development Environment Setup
Install packages: { "name": "reactflux", "version": "1.0.0", ...
- 开启MYSQL远程连接权限
开启MYSQL远程连接权限 1 2 3 4 5 //建议设置固定IP mysql> GRANT ALL PRIVILEGES ON *.* TO root@"8.8.8.8&q ...
- [转] Android LocalService与RemoteService理解
前段时间被别人问到相关的问题,没有回答对,发现自己原来理解的有偏差,最近看了下,写了个小Demo实验了下,现在将其记录下来,以后千万别犯同样的错误就好了. 一.LocalService(本地服务) 不 ...
- 解决mybatis使用枚举的转换
解决mybatis使用枚举的转换 >>>>>>>>>>>>>>>>>>>>> ...
- mysql复习笔记
阅读目录 1.什么是SQL语句2.使用sql语句创建数据库和表3.创建数据表4.数据完整性约束5.四中基本字符类型说明6.SQL基本语句7.类型转换函数8.日期函数9.数学函数10.字符串函数11.联 ...
- Android Activity各启动模式的差异
Activity共有四种启动模式:standard,singleTop,singleTask,singleInstance 为了方便描述和理解,布局文件.Manifest文件和各个java文件如下: ...
- ZBar Installer
ZBar Install.For windows:http://sourceforge.net/projects/zbar/files/zbar/0.10/zbar-0.10-setup.exe/do ...
- EA创建用例图步骤详解
EA创建用例图步骤详解 1 创建一个项目 2 选择需要的模型 3 新建模型包 4 新建图表 5 新建模型包 6 创建用户角色Actor 7 新建用例 8 关联用户和用例 9 最后整个项目浏览器目录结构 ...