使用js实现滑动页面效果，很漂亮

最新推荐文章于 2024-06-30 15:38:14 发布
最新推荐文章于 2024-06-30 15:38:14 发布
阅读量1.3k 收藏
点赞数
文章标签： javascript ViewUI
使用了一个现成的js

先贴html

  1. <html>
  2. <head>
  3. <metahttp-equiv="content-type"content="text/html;charset=gb2312">
  4. <title>滑动页面效果示例</title>
  5. <linkrel="stylesheet"href="stylesheets/glider.css"type="text/css"media="screen"charset="utf-8">
  6. <scriptsrc="javascripts/prototype.js"type="text/javascript"charset="utf-8"></script>
  7. <scriptsrc="javascripts/effects.js"type="text/javascript"charset="utf-8"></script>
  8. <scriptsrc="javascripts/glider.js"type="text/javascript"charset="utf-8"></script>
  9. </head>
  10. <body>
  12. <h1>滑动页面效果示例（Glider.js）</h1>
  13. <divid="my-glider">
  14. <divclass="controls">
  15. <ahref="#HTML1">HTML1</a>|
  16. <ahref="#HTML2">HTML2</a>|
  17. <ahref="#HTML3">HTML3</a>|
  18. </div>
  20. <divclass="scroller">
  21. <divclass="content">
  22. <divclass="section"id="HTML1">
  23. HTML1
  24. <objectstyle="border:0px"type="text/x-scriptlet"data="1.html"width=100%height="500px"></object>
  25. </div>
  26. <divclass="section"id="HTML2">
  27. HTML2
  28. <objectstyle="border:0px"type="text/x-scriptlet"data="2.html"width=100%height="500px"></object>
  29. </div>
  30. <divclass="section"id="HTML3">
  31. HTML3
  32. <p>一个youtube篮球视频</p>
  33. <objectwidth="200"height="150">
  34. <paramname="movie"value="http://www.youtube.com/v/Ef-f7EeDpYI"></param>
  35. <paramname="wmode"value="transparent"></param>
  36. <embedsrc="http://www.youtube.com/v/Ef-f7EeDpYI"type="application/x-shockwave-flash"wmode="transparent"width="200"height="150"></embed>
  37. </object>
  38. </div>
  39. </div>
  40. </div>
  41. </div>
  42. <ahref="#"onClick="my_glider.previous();returnfalse;">Previous</a>|<ahref="#"onClick="my_glider.next();returnfalse">Next</a>
  43. <scripttype="text/javascript"charset="utf-8">
  44. varmy_glider=newGlider('my-glider',{duration:0.5});
  45. </script>
  46. </body>
  47. </html>


glider.js
  1. /**
  2. *@authorBrunoBornsztein<bruno@missingmethod.com>
  3. *@copyright2007CurblyLLC
  4. *@packageGlider
  5. *@licenseMIT
  6. *@urlhttp://www.missingmethod.com/projects/glider/
  7. *@version0.0.3
  8. *@dependenciesprototype.js1.5.1+,effects.js
  9. */
  11. /*ThankstoAndrewDupontforrefactoringhelpandcodecleanup-http://andrewdupont.net/*/
  13. Glider=Class.create();
  14. Object.extend(Object.extend(Glider.prototype,Abstract.prototype),{
  15. initialize:function(wrapper,options){
  16. this.scrolling=false;
  17. this.wrapper=$(wrapper);
  18. this.scroller=this.wrapper.down('div.scroller');
  19. this.sections=this.wrapper.getElementsBySelector('div.section');
  20. this.options=Object.extend({duration:1.0,frequency:3},options||{});
  22. this.sections.each(function(section,index){
  23. section._index=index;
  24. });
  26. this.events={
  27. click:this.click.bind(this)
  28. };
  30. this.addObservers();
  31. if(this.options.initialSection)this.moveTo(this.options.initialSection,this.scroller,{duration:this.options.duration});//initialSectionshouldbetheidofthesectionyouwanttoshowuponload
  32. if(this.options.autoGlide)this.start();
  33. },
  35. addObservers:function(){
  36. varcontrols=this.wrapper.getElementsBySelector('div.controlsa');
  37. controls.invoke('observe','click',this.events.click);
  38. },
  40. click:function(event){
  41. this.stop();
  42. varelement=Event.findElement(event,'a');
  43. if(this.scrolling)this.scrolling.cancel();
  45. this.moveTo(element.href.split("#")[1],this.scroller,{duration:this.options.duration});
  46. Event.stop(event);
  47. },
  49. moveTo:function(element,container,options){
  50. this.current=$(element);
  52. Position.prepare();
  53. varcontainerOffset=Position.cumulativeOffset(container),
  54. elementOffset=Position.cumulativeOffset($(element));
  56. this.scrolling=newEffect.SmoothScroll(container,
  57. {duration:options.duration,x:(elementOffset[0]-containerOffset[0]),y:(elementOffset[1]-containerOffset[1])});
  58. returnfalse;
  59. },
  61. next:function(){
  62. if(this.current){
  63. varcurrentIndex=this.current._index;
  64. varnextIndex=(this.sections.length-1==currentIndex)?0:currentIndex+1;
  65. }elsevarnextIndex=1;
  67. this.moveTo(this.sections[nextIndex],this.scroller,{
  68. duration:this.options.duration
  69. });
  70. },
  72. previous:function(){
  73. if(this.current){
  74. varcurrentIndex=this.current._index;
  75. varprevIndex=(currentIndex==0)?this.sections.length-1:
  76. currentIndex-1;
  77. }elsevarprevIndex=this.sections.length-1;
  79. this.moveTo(this.sections[prevIndex],this.scroller,{
  80. duration:this.options.duration
  81. });
  82. },
  84. stop:function()
  85. {
  86. clearTimeout(this.timer);
  87. },
  89. start:function()
  90. {
  91. this.periodicallyUpdate();
  92. },
  94. periodicallyUpdate:function()
  95. {
  96. if(this.timer!=null){
  97. clearTimeout(this.timer);
  98. this.next();
  99. }
  100. this.timer=setTimeout(this.periodicallyUpdate.bind(this),this.options.frequency*1000);
  101. }
  103. });
  105. Effect.SmoothScroll=Class.create();
  106. Object.extend(Object.extend(Effect.SmoothScroll.prototype,Effect.Base.prototype),{
  107. initialize:function(element){
  108. this.element=$(element);
  109. varoptions=Object.extend({
  110. x:0,
  111. y:0,
  112. mode:'absolute'
  113. },arguments[1]||{});
  114. this.start(options);
  115. },
  116. setup:function(){
  117. if(this.options.continuous&&!this.element._ext){
  118. this.element.cleanWhitespace();
  119. this.element._ext=true;
  120. this.element.appendChild(this.element.firstChild);
  121. }
  123. this.originalLeft=this.element.scrollLeft;
  124. this.originalTop=this.element.scrollTop;
  126. if(this.options.mode=='absolute'){
  127. this.options.x-=this.originalLeft;
  128. this.options.y-=this.originalTop;
  129. }
  130. },
  131. update:function(position){
  132. this.element.scrollLeft=this.options.x*position+this.originalLeft;
  133. this.element.scrollTop=this.options.y*position+this.originalTop;
  134. }
  135. });
还有2个js，内容太多，这里先不贴出来
iteye_18509
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
原生js手写轮播图滑动特效
EWJRQKJRQ的博客
08-28 204
原生js手写轮播图滑动特效 上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>轮播图</title> <style> * {
js实现页面自动滚屏效果
12-23
js实现页面自动滚屏效果，可以设置单击，双击，还可以绑定在一个元素上触发
使用JavaScript实现滑动动画的几种方法
最新发布
微赚开发者技术分享博客
06-30 807
滑动动画通常是指元素在页面上平滑移动或改变尺寸的过程，通过改变元素的位置、大小或样式属性，使其产生视觉上的动态效果。通过本文的介绍，我们详细探讨了使用JavaScript实现滑动动画的几种方法：使用CSS过渡属性、JavaScript定时器和第三方动画库（Tween.js）。Tween.js是一个轻量级的JavaScript动画库，提供了丰富的动画效果和配置选项。JavaScript定时器是另一种实现滑动动画效果的方法，通过逐帧改变元素的位置或样式属性，从而实现平滑的动画效果。// 定义滑动动画函数。
js的滑动效果
eggplant_的博客
10-15 4241
当页面不够用是或者我们想要在一定空间内进行大量布局，除了层结构外，我还想到了js中的滑动效果，首先 jquery滑动效果有向上滑动和向下滑动1、jQuery slideUp()2、jQuery slideDown() &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;script src="/jquery/jquery-1.11.1.mi...
前端-css-js，屏幕滑动效果
tl110110tl的专栏
04-07 2121
屏幕滑动效果
JS实现漂亮的淡蓝色滑动门效果代码
10-23
标题中的“JS实现漂亮的淡蓝色滑动门效果代码”指的是使用JavaScript编程语言创建一个美观的、带有淡蓝色背景的滑动门（Slide Door）样式菜单。这种效果通常用于网页设计，使得用户可以通过点击菜单项来展示或隐藏...
基于javascript实现漂亮的页面过渡动画效果附源码下载
10-23
本文将介绍如何使用JavaScript实现美观的页面过渡动画，结合提供的源码，我们可以创建一个用户友好的网页交互体验。过渡动画在用户点击左侧菜单时触发，伴随着页面内容的平滑滑动和进度条效果，确保了加载过程的流畅...
一个基于jquery实现的很漂亮的404动态页面效果(404动态页面模板).zip
11-22
这个"一个基于jquery实现的很漂亮的404动态页面效果(404动态页面模板).zip"压缩包提供了一个利用jQuery库创建的精美404错误页面模板。jQuery是一款广泛应用于前端开发的JavaScript库，它简化了DOM操作、事件处理、...
一个基于jquery实现的很漂亮的404动态页面效果(404动态页面模板)
07-30
这个"一个基于jquery实现的很漂亮的404动态页面效果(404动态页面模板)"项目，提供了一种利用jQuery库创建引人注目的404错误页面的方法。jQuery是一个轻量级、功能丰富的JavaScript库，它简化了HTML文档遍历、事件...
java滑动_java实现菜单滑动效果
weixin_39657444的博客
02-12 120
public class MenuScrollerActivity extends BaseGameActivity implements IScrollDetectorListener, IOnSceneTouchListener, IClickDetectorListener {// =======================================================...
JS左右滑动的菜单效果
12-27
JS左右滑动的菜单效果
JS滑动效果
08-07
JS滑动效果，JS滑动效果，JS滑动效果，真的找了好久才找到的，验证过可以使用！
glide：Glide Module 案例: 通过加载自定义大小图片优化
自由人生
03-22 1546
为何请求特定尺寸图片 我们在做的最新项目用到一个媒体服务器，提供非常高的分辨率图片服务（图片分辨率在6000x4500像素）。我们可以使用直接链接到源文件，在考虑设备带宽、内存和电池的时候是相当低效的。即使在今天的设备上显示高分辨率，对于显示如此极端的分辨率，还是没有任何好处。因此Glide总是测量ImageView的尺寸，然后降低图片的内存消耗以匹配它。然而，无法避免要去下载和计算，完成降低图
Glide.js：响应式 & 触摸友好的 jQuery 滑块插件
weixin_34364135的博客
09-22 336
　　Glide.js 是一款响应式和对触摸友好的 jQuery 滑块。基于 CSS3 转换实现，并在低版本浏览器降级处理。Glide.js 简单，重量轻，快速，适用于智能手机，平板电脑和台式机。它支持 swipe 事件，箭头和子弹导航，键盘导航，公共 API 回调，自动播放和悬停暂停功能。 您可能感兴趣的相关文章 OverAPI.com – 史上最全开发人员在线速查手册 jQuery...
css的transition失效，使用js实现页面左右滑动及动画效果
GardJasmin的博客
10-31 1118
css的transition失效，使用js的setInterval实现页面左右滑动及动画效果
如何用JS实现页面的全屏滚动
ychy1的博客
11-28 2709
如何用JS实现页面的全屏滚动
原生js写菜单栏滑块动画+Banner滑动效果(清晰思路+附代码)
Henry的博客
09-04 2840
原生JS实现菜单栏滑块动画+banner动画滑动效果
你帮我用uniapp写一个漂亮我个人中心页面
09-26
我们可以利用这些资源，添加动画效果、滑动列表、轮播图等，从而提升页面的交互体验和视觉效果。 最后，在页面开发完成后，我们会进行详细的测试和优化，以保证页面的流畅和稳定。同时，我们也会确保页面的响应式...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值