扫码关注官方订阅号
原本把问题问得很长很长 想想没什么必要 就简单问问题就好 coding主页的效果(未登陆) 点击位于页面右方的点能到页面指定的区域,带滚动动画 这个大概能想到怎么做 问题是怎样实现用鼠标滑轮滚动时也实现同样的效果?coding首页
小伙看你根骨奇佳,潜力无限,来学PHP伐。
有个插件叫 FullPage.js,你可以用这个轮子。
当然,自己实现这个轮子也很简单。 每个页面都设置一个 id,每个点都是<a>,然后其 href 就设置为 '#' + 对应页面的id 比如 <a href="#first-block">
<a>
<a href="#first-block">
用 jQuery 对这些 a 标签绑定一个 click 事件,用 event.preventDefault() 去掉点击马上跳过去的功能,然后用 jQuery 的 animate() 去控制滚动条就好了。
event.preventDefault()
$("a").on('click', function(event){ var $anchor = $(this); $("html, body").stop().animate({ scrollTop: $($anchor.attr('href')).offset().top }, 600); event.preventDefault(); });
鼠标点击大概就是这个思路。
鼠标滚轮其实也差不多的思路。
题主说的那个动画效果,coding采用的应该只是简单的css3动画,通过css3的动画类,很简单的几行代码就能达到这种效果。 你如果用IE8去访问coding,它会提示你浏览器版本过低,因为IE8是不支持css3动画效果的,甚至IE9可能也会提示你(我这没有所以无法最终确认)。 css3动画教程:http://www.w3cschool.cc/css3/css3-animations.html 并且coding使用了AngularJS这种“高大上”的js框架,配合css3实现这种动画效果更是易如反掌。 当然,楼上童鞋回答的是jquery的方案,类似这种效果的插件我相信是有更丰富的现成解决方案的。
微信扫码关注PHP中文网服务号
QQ扫码加入技术交流群
扫描下载App
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
PHP学习
技术支持
返回顶部
有个插件叫 FullPage.js,你可以用这个轮子。
当然,自己实现这个轮子也很简单。
每个页面都设置一个 id,每个点都是
<a>
,然后其 href 就设置为 '#' + 对应页面的id比如
<a href="#first-block">
用 jQuery 对这些 a 标签绑定一个 click 事件,用
event.preventDefault()
去掉点击马上跳过去的功能,然后用 jQuery 的 animate() 去控制滚动条就好了。鼠标点击大概就是这个思路。
鼠标滚轮其实也差不多的思路。
题主说的那个动画效果,coding采用的应该只是简单的css3动画,通过css3的动画类,很简单的几行代码就能达到这种效果。
你如果用IE8去访问coding,它会提示你浏览器版本过低,因为IE8是不支持css3动画效果的,甚至IE9可能也会提示你(我这没有所以无法最终确认)。
css3动画教程:
http://www.w3cschool.cc/css3/css3-animations.html
并且coding使用了AngularJS这种“高大上”的js框架,配合css3实现这种动画效果更是易如反掌。
当然,楼上童鞋回答的是jquery的方案,类似这种效果的插件我相信是有更丰富的现成解决方案的。