使用js实现滑动页面效果，很漂亮
2008-09-26 11:03
776 查看
使用了一个现成的js
先贴html
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<title>滑动页面效果示例</title>
<link rel="stylesheet" href="stylesheets/glider.css" type="text/css" media="screen" charset="utf-8">
<script src="javascripts/prototype.js" type="text/javascript" charset="utf-8"></script>
<script src="javascripts/effects.js" type="text/javascript" charset="utf-8"></script>
<script src="javascripts/glider.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<h1>滑动页面效果示例（Glider.js）</h1>
<div id="my-glider">
<div class="controls">
<a href="#HTML1">HTML 1</a> |
<a href="#HTML2">HTML 2</a> |
<a href="#HTML3">HTML 3</a> |
</div>
<div class="scroller">
<div class="content">
<div class="section" id="HTML1">
HTML 1
<object style="border:0px" type="text/x-scriptlet" data="1.html" width=100% height="500px"></object>
</div>
<div class="section" id="HTML2">
HTML 2
<object style="border:0px" type="text/x-scriptlet" data="2.html" width=100% height="500px"></object>
</div>
<div class="section" id="HTML3">
HTML 3
<p>一个youtube篮球视频</p>
<object width="200" height="150">
<param name="movie" value="http://www.youtube.com/v/Ef-f7EeDpYI"></param>
<param name="wmode" value="transparent"></param>
<embed src="http://www.youtube.com/v/Ef-f7EeDpYI" type="application/x-shockwave-flash" wmode="transparent" width="200" height="150"></embed>
</object>
</div>
</div>
</div>
</div>
<a href="#" onClick="my_glider.previous();return false;">Previous</a> | <a href="#" onClick="my_glider.next();return false">Next</a>
<script type="text/javascript" charset="utf-8">
var my_glider = new Glider('my-glider', {duration:0.5});
</script>
</body>
</html>
glider.js
/**
* @author Bruno Bornsztein <bruno@missingmethod.com>
* @copyright 2007 Curbly LLC
* @package Glider
* @license MIT
* @url http://www.missingmethod.com/projects/glider/ * @version 0.0.3
* @dependencies prototype.js 1.5.1+, effects.js
*/
/* Thanks to Andrew Dupont for refactoring help and code cleanup - http://andrewdupont.net/ */
Glider = Class.create();
Object.extend(Object.extend(Glider.prototype, Abstract.prototype), {
initialize: function(wrapper, options){
this.scrolling = false;
this.wrapper = $(wrapper);
this.scroller = this.wrapper.down('div.scroller');
this.sections = this.wrapper.getElementsBySelector('div.section');
this.options = Object.extend({ duration: 1.0, frequency: 3 }, options || {});
this.sections.each( function(section, index) {
section._index = index;
});
this.events = {
click: this.click.bind(this)
};
this.addObservers();
if(this.options.initialSection) this.moveTo(this.options.initialSection, this.scroller, { duration:this.options.duration }); // initialSection should be the id of the section you want to show up on load
if(this.options.autoGlide) this.start();
},
addObservers: function() {
var controls = this.wrapper.getElementsBySelector('div.controls a');
controls.invoke('observe', 'click', this.events.click);
},
click: function(event) {
this.stop();
var element = Event.findElement(event, 'a');
if (this.scrolling) this.scrolling.cancel();
this.moveTo(element.href.split("#")[1], this.scroller, { duration:this.options.duration });
Event.stop(event);
},
moveTo: function(element, container, options){
this.current = $(element);
Position.prepare();
var containerOffset = Position.cumulativeOffset(container),
elementOffset = Position.cumulativeOffset($(element));
this.scrolling = new Effect.SmoothScroll(container,
{duration:options.duration, x:(elementOffset[0]-containerOffset[0]), y:(elementOffset[1]-containerOffset[1])});
return false;
},
next: function(){
if (this.current) {
var currentIndex = this.current._index;
var nextIndex = (this.sections.length - 1 == currentIndex) ? 0 : currentIndex + 1;
} else var nextIndex = 1;
this.moveTo(this.sections[nextIndex], this.scroller, {
duration: this.options.duration
});
},
previous: function(){
if (this.current) {
var currentIndex = this.current._index;
var prevIndex = (currentIndex == 0) ? this.sections.length - 1 :
currentIndex - 1;
} else var prevIndex = this.sections.length - 1;
this.moveTo(this.sections[prevIndex], this.scroller, {
duration: this.options.duration
});
},
stop: function()
{
clearTimeout(this.timer);
},
start: function()
{
this.periodicallyUpdate();
},
periodicallyUpdate: function()
{
if (this.timer != null) {
clearTimeout(this.timer);
this.next();
}
this.timer = setTimeout(this.periodicallyUpdate.bind(this), this.options.frequency*1000);
}
});
Effect.SmoothScroll = Class.create();
Object.extend(Object.extend(Effect.SmoothScroll.prototype, Effect.Base.prototype), {
initialize: function(element) {
this.element = $(element);
var options = Object.extend({
x: 0,
y: 0,
mode: 'absolute'
} , arguments[1] || {} );
this.start(options);
},
setup: function() {
if (this.options.continuous && !this.element._ext ) {
this.element.cleanWhitespace();
this.element._ext=true;
this.element.appendChild(this.element.firstChild);
}
this.originalLeft=this.element.scrollLeft;
this.originalTop=this.element.scrollTop;
if(this.options.mode == 'absolute') {
this.options.x -= this.originalLeft;
this.options.y -= this.originalTop;
}
},
update: function(position) {
this.element.scrollLeft = this.options.x * position + this.originalLeft;
this.element.scrollTop = this.options.y * position + this.originalTop;
}
});
还有2个js，内容太多，这里先不贴出来
先贴html
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<title>滑动页面效果示例</title>
<link rel="stylesheet" href="stylesheets/glider.css" type="text/css" media="screen" charset="utf-8">
<script src="javascripts/prototype.js" type="text/javascript" charset="utf-8"></script>
<script src="javascripts/effects.js" type="text/javascript" charset="utf-8"></script>
<script src="javascripts/glider.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<h1>滑动页面效果示例（Glider.js）</h1>
<div id="my-glider">
<div class="controls">
<a href="#HTML1">HTML 1</a> |
<a href="#HTML2">HTML 2</a> |
<a href="#HTML3">HTML 3</a> |
</div>
<div class="scroller">
<div class="content">
<div class="section" id="HTML1">
HTML 1
<object style="border:0px" type="text/x-scriptlet" data="1.html" width=100% height="500px"></object>
</div>
<div class="section" id="HTML2">
HTML 2
<object style="border:0px" type="text/x-scriptlet" data="2.html" width=100% height="500px"></object>
</div>
<div class="section" id="HTML3">
HTML 3
<p>一个youtube篮球视频</p>
<object width="200" height="150">
<param name="movie" value="http://www.youtube.com/v/Ef-f7EeDpYI"></param>
<param name="wmode" value="transparent"></param>
<embed src="http://www.youtube.com/v/Ef-f7EeDpYI" type="application/x-shockwave-flash" wmode="transparent" width="200" height="150"></embed>
</object>
</div>
</div>
</div>
</div>
<a href="#" onClick="my_glider.previous();return false;">Previous</a> | <a href="#" onClick="my_glider.next();return false">Next</a>
<script type="text/javascript" charset="utf-8">
var my_glider = new Glider('my-glider', {duration:0.5});
</script>
</body>
</html>
glider.js
/**
* @author Bruno Bornsztein <bruno@missingmethod.com>
* @copyright 2007 Curbly LLC
* @package Glider
* @license MIT
* @url http://www.missingmethod.com/projects/glider/ * @version 0.0.3
* @dependencies prototype.js 1.5.1+, effects.js
*/
/* Thanks to Andrew Dupont for refactoring help and code cleanup - http://andrewdupont.net/ */
Glider = Class.create();
Object.extend(Object.extend(Glider.prototype, Abstract.prototype), {
initialize: function(wrapper, options){
this.scrolling = false;
this.wrapper = $(wrapper);
this.scroller = this.wrapper.down('div.scroller');
this.sections = this.wrapper.getElementsBySelector('div.section');
this.options = Object.extend({ duration: 1.0, frequency: 3 }, options || {});
this.sections.each( function(section, index) {
section._index = index;
});
this.events = {
click: this.click.bind(this)
};
this.addObservers();
if(this.options.initialSection) this.moveTo(this.options.initialSection, this.scroller, { duration:this.options.duration }); // initialSection should be the id of the section you want to show up on load
if(this.options.autoGlide) this.start();
},
addObservers: function() {
var controls = this.wrapper.getElementsBySelector('div.controls a');
controls.invoke('observe', 'click', this.events.click);
},
click: function(event) {
this.stop();
var element = Event.findElement(event, 'a');
if (this.scrolling) this.scrolling.cancel();
this.moveTo(element.href.split("#")[1], this.scroller, { duration:this.options.duration });
Event.stop(event);
},
moveTo: function(element, container, options){
this.current = $(element);
Position.prepare();
var containerOffset = Position.cumulativeOffset(container),
elementOffset = Position.cumulativeOffset($(element));
this.scrolling = new Effect.SmoothScroll(container,
{duration:options.duration, x:(elementOffset[0]-containerOffset[0]), y:(elementOffset[1]-containerOffset[1])});
return false;
},
next: function(){
if (this.current) {
var currentIndex = this.current._index;
var nextIndex = (this.sections.length - 1 == currentIndex) ? 0 : currentIndex + 1;
} else var nextIndex = 1;
this.moveTo(this.sections[nextIndex], this.scroller, {
duration: this.options.duration
});
},
previous: function(){
if (this.current) {
var currentIndex = this.current._index;
var prevIndex = (currentIndex == 0) ? this.sections.length - 1 :
currentIndex - 1;
} else var prevIndex = this.sections.length - 1;
this.moveTo(this.sections[prevIndex], this.scroller, {
duration: this.options.duration
});
},
stop: function()
{
clearTimeout(this.timer);
},
start: function()
{
this.periodicallyUpdate();
},
periodicallyUpdate: function()
{
if (this.timer != null) {
clearTimeout(this.timer);
this.next();
}
this.timer = setTimeout(this.periodicallyUpdate.bind(this), this.options.frequency*1000);
}
});
Effect.SmoothScroll = Class.create();
Object.extend(Object.extend(Effect.SmoothScroll.prototype, Effect.Base.prototype), {
initialize: function(element) {
this.element = $(element);
var options = Object.extend({
x: 0,
y: 0,
mode: 'absolute'
} , arguments[1] || {} );
this.start(options);
},
setup: function() {
if (this.options.continuous && !this.element._ext ) {
this.element.cleanWhitespace();
this.element._ext=true;
this.element.appendChild(this.element.firstChild);
}
this.originalLeft=this.element.scrollLeft;
this.originalTop=this.element.scrollTop;
if(this.options.mode == 'absolute') {
this.options.x -= this.originalLeft;
this.options.y -= this.originalTop;
}
},
update: function(position) {
this.element.scrollLeft = this.options.x * position + this.originalLeft;
this.element.scrollTop = this.options.y * position + this.originalTop;
}
});
还有2个js，内容太多，这里先不贴出来
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 使用js实现滑动页面效果，很漂亮
- Widget中使用js实现页面的滑动效果
- swipe.js工具包实现手机web滑动轮播效果存在jQuery对象不能使用问题并解决（个人项目经验）
- Android中使用ViewPager和PagerTabStrip实现页面滑动效果
- ionic2 使用tabs+slides实现滑动切换页面效果
- 使用Jquery实现顶部导航栏在页面滑动到自身所在位置之后固定在顶部的效果
- 用js实现分享到随页面滚动而滑动效果
- pdf.js使用和JS实现嵌套Iframe页面F11全屏效果
- Android使用TabLayou+fragment+viewpager实现滑动切换页面效果
- 使用原生js实现页面蒙灰(mask)效果示例代码
- 使用复杂的view加上listview实现页面整体滑动效果
- 使用html+js+css 实现页面轮播图效果(实例讲解)
- 使用js实现按钮的滑动效果
- 学习Js（1）-使用Jquery实现滑动切换效果
- 使用ViewPager实现页面滑动(点击)跳转效果(类似于微信页面)
- 使用Jquery实现顶部导航栏在页面滑动到自身所在位置之后固定在顶部的效果
- js实现分享到随页面滚动而滑动效果的方法
- 使用SwipeBackLayout实现滑动退出页面的效果
- 使用原生js实现页面蒙灰(mask)效果
- 使用hammer.js实现移动端webAPP手势滑动切换页面