PHP学习_PHP技术_PHP网站建设_PHP程序员专注于PHP技术研究及学习

Adophper » 前端设计 » jquery动画特效,css定位实例分析

jquery动画特效,css定位实例分析

此文被围观1550日期: 2013-08-20 分类 : 前端设计  标签:  ········
最近手头有一个特效与定位相结合的功能, 先将事例地址发上来:http://xixi.adophper.com/team/. 看一下页面效果:三面都已经定位,只有内容那一块是活动的,点击左边部分滑动右边到相应的位置. 未解决前的问题:右边是滑动但总是滑动超过了对应的位置,百思不得其解!想了一下,如果是正常的页面是页面滑动至相应位置 现在的情况是相应的点滑动至相应位置,刚好正常情况反过来了! 其中我还想过用iframe来做的,但是考虑到工作量就放弃了,可能还是双腿解决这个问题吧! 因为本身点击的时候已经有用到jquery了,最后在百度是查到了相应的技术用animate来解决, 上源码分析: [html] <script> var re = new RegExp('^'+site_url+'(.+)$'); $(function(){ $(".team_list a").click(function(e){ var a = $(this), hash = '#!/'+a[0].href.match(re)[1]; window.location.hash = hash; e.preventDefault(); $(".team_list a").removeClass('active'); $(this).addClass('active'); var id = $(this).attr('data-id'); var target = $('div[data-id="'+id+'"]').children('a').eq(0).offset().top - 176;//176为头部加上页面标题的高度 $('html,body').animate({ scrollTop: target }, 750); }); }); </script> [/html]

本站使用ThinkPHP框架开发读图网主题,目前托管在阿里云,图片由读图网提供. 蜀ICP备12031064号

Copyright © 2011-2017adophper.com All Rights Reserved.