这篇文章主要介绍了 JS+CSS 实现的拖动分页效果, 可实现鼠标拖动页面翻转到上一页或下一页的功能, 涉及 javascript 操作页面元素与 css 样式的相关技巧, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文实例讲述了 JS+CSS 实现拖动分页效果的方法。分享给大家供大家参考。具体实现方法如下:
- <html>
- <head>
- <title>
- 拖动分页
- </title>
- <meta http-equiv=Content-Type content="text/html; charset=utf-8">
- <style>
- body{ border:0px; margin:0px; overflow:hidden; background-color:transparent;
- } .page{ position:absolute; width:700px; border:1px solid #999; background-color:#000;
- left:425px; margin-left:-350px; cursor:default; z-index:0; } ul{ height:320px;
- list-style:none; margin:40px 50px 0px; padding:0px; } li{ width:100%; height:30px;
- line-height:30px; font-size:14px; text-align:left; border-bottom:1px dashed
- #999; } a{ text-decoration:none; color:#999; } a:hover{ font-weight:bold;
- } li span{ float:right; color:#999; } .tip{ display:block; width:100%;
- font-size:12px; color:#999; text-align:center; margin:10px 0px 20px; }
- </style>
- </head>
- <body onselectstart="return false;">
- <script>
- function id(obj) {
- return document.getElementById(obj);
- }
- var page;
- var lm, mx;
- var md = false;
- var sh = 0;
- var en = false;
- window.onload = function() {
- page = document.getElementsByTagName("div");
- if (page.length > 0) {
- page[0].style.zIndex = 2;
- }
- for (i = 0; i < page.length; i++) {
- page[i].className = "page";
- page[i].innerHTML += "<span class=\"tip\">第 " + (i + 1) + "/" + page.length + " 页 提示:左右拖拽翻页</span>";
- page[i].id = "page" + i;
- page[i].i = i;
- page[i].onmousedown = function(e) {
- if (!en) {
- if (!e) {
- e = e || window.event;
- }
- lm = this.offsetLeft;
- mx = (e.pageX) ? e.pageX: e.x;
- this.style.cursor = "w-resize";
- md = true;
- if (document.all) {
- this.setCapture();
- } else {
- window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
- }
- }
- }
- page[i].onmousemove = function(e) {
- if (md) {
- en = true;
- if (!e) {
- e = e || window.event;
- }
- var ex = (e.pageX) ? e.pageX: e.x;
- this.style.left = ex - (mx - lm) + 350;
- if (this.offsetLeft < 75) {
- var cu = (this.i == 0) ? page.length - 1 : this.i - 1;
- page[sh].style.zIndex = 0;
- page[cu].style.zIndex = 1;
- this.style.zIndex = 2;
- sh = cu;
- }
- if (this.offsetLeft > 75) {
- var cu = (this.i == page.length - 1) ? 0 : this.i + 1;
- page[sh].style.zIndex = 0;
- page[cu].style.zIndex = 1;
- this.style.zIndex = 2;
- sh = cu;
- }
- }
- }
- page[i].onmouseup = function() {
- this.style.cursor = "default";
- md = false;
- if (document.all) {
- this.releaseCapture();
- } else {
- window.releaseEvents(Event.MOUSEMOVE | Event.MOUSEUP);
- }
- flyout(this);
- }
- }
- }
- function flyout(obj) {
- if (obj.offsetLeft < 75) {
- if ((obj.offsetLeft + 350 - 20) > -275) {
- obj.style.left = obj.offsetLeft + 350 - 20;
- window.setTimeout("flyout(id('" + obj.id + "'));", 0);
- } else {
- obj.style.left = -275;
- obj.style.zIndex = 0;
- flyin(id(obj.id));
- }
- }
- if (obj.offsetLeft > 75) {
- if ((obj.offsetLeft + 350 + 20) < 1125) {
- obj.style.left = obj.offsetLeft + 350 + 20;
- window.setTimeout("flyout(id('" + obj.id + "'));", 0);
- } else {
- obj.style.left = 1125;
- obj.style.zIndex = 0;
- flyin(id(obj.id));
- }
- }
- }
- function flyin(obj) {
- if (obj.offsetLeft < 75) {
- if ((obj.offsetLeft + 350 + 20) < 425) {
- obj.style.left = obj.offsetLeft + 350 + 20;
- window.setTimeout("flyin(id('" + obj.id + "'));", 0);
- } else {
- obj.style.left = 425;
- en = false;
- }
- }
- if (obj.offsetLeft > 75) {
- if ((obj.offsetLeft + 350 - 20) > 425) {
- obj.style.left = obj.offsetLeft + 350 - 20;
- window.setTimeout("flyin(id('" + obj.id + "'));", 0);
- } else {
- obj.style.left = 425;
- en = false;
- }
- }
- }
- </script>
- <div>
- <ul>
- <li>
- <span>
- 2009-4-29 02:16
- </span>
- <a href=#>
- 东方之珠
- </a>
- </li>
- <li>
- <span>
- 2009-4-29 02:16
- </span>
- <a href=#>
- 啊!爱人
- </a>
- </li>
- <li>
- <span>
- 2009-4-29 02:16
- </span>
- <a href=#>
- 宁静温泉
- </a>
- </li>
- <li>
- <span>
- 2009-4-29 02:16
- </span>
- <a href=#>
- 你的样子
- </a>
- </li>
- <li>
- <span>
- 2009-4-29 02:16
- </span>
- <a href=#>
- 恋曲1980
- </a>
- </li>
- <li>
- <span>
- 2009-4-29 02:16
- </span>
- <a href=#>
- 恋曲1980
- </a>
- </li>
- <li>
- <span>
- 2009-4-29 02:16
- </span>
- <a href=#>
- 恋曲2000
- </a>
- </li>
- <li>
- <span>
- 2009-4-29 02:16
- </span>
- <a href=#>
- 亚细亚的孤儿
- </a>
- </li>
- <li>
- <span>
- 2009-4-29 02:16
- </span>
- <a href=#>
- 童年
- </a>
- </li>
- </ul>
- </div>
- <div>
- <ul>
- <li>
- <span>
- 2009-4-29 02:16
- </span>
- <a href=#>
- 弹唱词
- </a>
- </li>
- <li>
- <span>
- 2009-4-29 02:16
- </span>
- <a href=#>
- 飞车
- </a>
- </li>
- <li>
- <span>
- 2009-4-29 02:16
- </span>
- <a href=#>
- 东方之珠
- </a>
- </li>
- <li>
- <span>
- 2009-4-29 02:16
- </span>
- <a href=#>
- 滚滚红尘
- </a>
- </li>
- <li>
- <span>
- 2009-4-29 02:16
- </span>
- <a href=#>
- 光阴的故事
- </a>
- </li>
- <li>
- <span>
- 2009-4-29 02:16
- </span>
- <a href=#>
- 之乎者也
- </a>
- </li>
- <li>
- <span>
- 2009-4-29 02:16
- </span>
- <a href=#>
- 现象七十二变
- </a>
- </li>
- <li>
- <span>
- 2009-4-29 02:16
- </span>
- <a href=#>
- 乡愁四韵
- </a>
- </li>
- <li>
- <span>
- 2009-4-29 02:16
- </span>
- <a href=#>
- 穿过你的黑发我的手
- </a>
- </li>
- </ul>
- </div>
- <div>
- <ul>
- <li>
- <span>
- 2009-4-29 02:16
- </span>
- <a href=#>
- 大兵歌
- </a>
- </li>
- <li>
- <span>
- 2009-4-29 02:16
- </span>
- <a href=#>
- 黄色面孔
- </a>
- </li>
- <li>
- <span>
- 2009-4-29 02:16
- </span>
- <a href=#>
- 台北红玫瑰
- </a>
- </li>
- </ul>
- </div>
- </body>
- </html>
希望本文所述对大家的 javascript 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0227/271402.html