CSS+JS实现的静态页面翻页效果

最新推荐文章于 2023-08-09 16:40:29 发布
最新推荐文章于 2023-08-09 16:40:29 发布
阅读量5.4k 收藏 1
点赞数
分类专栏： CSS 文章标签： css 聊天 javascript microsoft function ie

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312">
<head>
<title>CSS+JS实现的静态页面翻页效果</title>
<style type="text/css">...
* {
    font : normal 12px/1.5em "Microsoft YaHei", Tahoma;
    _font : normal 12px/1.5em Tahoma; /**//* CSS Hack For IE6 */
    border: 0px;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    text-decoration: none;
    *text-overflow: ellipsis; /**//* CSS Hack For IE7 & IE6 */
}
a {
    color: #333;
}
a :link{
    color: #333;
}
a:active{color:#FF6600}
a:hover {
    color: #06c;
   
}
body {
    background: #f3faff;
    text-align: center;
}
ul {
    list-style-type: none;
}
li {
    margin-bottom: 13px; /**//* CSS Hack For Firefox */
    *margin-bottom: 12px; /**//* CSS Hack For IE7 & IE6 */
    _margin-bottom: 3%; /**//* CSS Hack For IE6 */
    white-space: nowrap;
}
#Main_News {
    /**//*background-color: teal;*/
    border: 1px #acd0f0 solid;
    width: 445px;
    height: 402px;
}
#Content {
    width: 425px;
    height: 372px;
    margin: 10px 10px 0px 10px;
    _margin: 10px 5px 0px 5px; /**//* CSS Hack For IE6 */
    overflow: hidden;
    text-align: left;
}
#Pages {
    width: 445px;
    height: 20px;
    margin: 0px;
    text-align: right;
}
#Pages a:link{color:#000000}
#Pages a:hover{color:#FF0000}
#Pages a:active{color:#3300FF}
</style>
<script defer="defer" language="javascript" type="text/javascript">
<!--
    var _offset = 0;
    function _$id(_obj) {
        return document.getElementById(_obj);
    }
    function _$Pages(_i) {
        _$id("Content").scrollTop = (_$id("Content").clientHeight*_i);
        for (var i=0;i<(_$id("Content").scrollHeight/_offset);i++)
        {
           
            if (i==_i)
                _$id("soojs_"+(_i+1)).style.backgroundColor="#ff9900";
            else
                _$id("soojs_"+(i+1)).style.backgroundColor="";
        }
    }
    function _$InitPages() {
        var _s='';
        _offset = _$id("Content").clientHeight;
        var _top = _$id("Content").scrollTop;
        for (var i=0;i<(_$id("Content").scrollHeight/_offset);i++) {
            _s+=('<a href="javascript:void(0);" οnclick="javascript:_$Pages('+i+');" οnfοcus="this.blur()" title="Page&nbsp;'+(i+1)+'" id="soojs_'+(i+1)+'">'+"&nbsp;"+(i+1)+"&nbsp;"+'</a>&nbsp;&nbsp;&nbsp;&nbsp;');
        }
        _$id("Pages").innerHTML=_s;
_$id("soojs_"+1).style.backgroundColor="#ff9900";
    }
//-->
</script>
</head>
<body οnlοad="_$InitPages();" >
        <div id="Main_News"><!--主要新闻-->
            <div id="Content">
                <ul>
                    <li><span class="type">[图文]</span>科研处关于科研成果登记的通知</li>
                    <li><span class="type">[图文]</span>关于清除炒股聊天等软件的通知</li>
                    <li><span class="type">[图文]</span>关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通</li>
                    <li>科研处关于科研成果登记的通知1</li>
                    <li>关于清除炒股聊天等软件的通知2</li>
                    <li>关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通</li>
                    <li>科研处关于科研成果登记的通知3</li>
                    <li>关于清除炒股聊天等软件的通知4</li>
                    <li>关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通</li>
                    <li>科研处关于科研成果登记的通知5</li>
                    <li>关于清除炒股聊天等软件的通知6</li>
                    <li>关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通</li>
                    <li>科研处关于科研成果登记的通知7</li>
                    <li>关于清除炒股聊天等软件的通知8</li>
                    <li>关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通</li>
                    <li>科研处关于科研成果登记的通知9</li>
                    <li>关于清除炒股聊天等软件的通知10</li>
                    <li>关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通</li>
                    <li>科研处关于科研成果登记的通知11</li>
                    <li>关于清除炒股聊天等软件的通知12</li>
                    <li>关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通</li>
                    <li>科研处关于科研成果登记的通知13</li>
                    <li>关于清除炒股聊天等软件的通知14</li>
                    <li>关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通</li>
                    <li>科研处关于科研成果登记的通知15</li>
                    <li>关于清除炒股聊天等软件的通知16</li>
                    <li>关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通</li>
                    <li>科研处关于科研成果登记的通知17</li>
                    <li>关于清除炒股聊天等软件的通知18</li>
                    <li>关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通</li>
                    <li>科研处关于科研成果登记的通知19</li>
                    <li>关于清除炒股聊天等软件的通知20</li>
                    <li>关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通</li>
                    <li>科研处关于科研成果登记的通知21</li>
                    <li>关于清除炒股聊天等软件的通知22</li>
                    <li>关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通</li>
                    <li>科研处关于科研成果登记的通知23</li>
                    <li>关于清除炒股聊天等软件的通知24</li>
                    <li>关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通</li>
                    <li>科研处关于科研成果登记的通知25</li>
                    <li>关于清除炒股聊天等软件的通知26</li>
                    <li>关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通</li>
                    <li>科研处关于科研成果登记的通知27</li>
                    <li>关于清除炒股聊天等软件的通知28</li>
                    <li>关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通</li>
                    <li>科研处关于科研成果登记的通知29</li>
                    <li>关于清除炒股聊天等软件的通知30</li>
                    <li>关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通关于组织学习“全国模范教师”郭力华的通</li>
                </ul>
            </div>
            <div id="Pages"></div>
        </div>
</body>
</html>

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/coolmaples/archive/2007/06/20/1659658.aspx

hxp42
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
原生JS实现翻书特效
越陌度阡
08-11 3472
给大家分享一个用原生JS与CSS 3.0实现的翻书效果图，效果如下： 实现代码如下，欢迎大家复制粘贴。 <!doctype html> <html> <head> <meta charset="utf-8"> <title>原生JS与CSS 3.0实现翻书特效</title>.........
自己整理的一些网站常用JS效果1
03-26
5.css制作翻页效果.html 6.div布局自由伸展.html 7.按照时间段提示消息.html 8.超酷带纹理网页滚动条效果.html 9.纯CSS代码实现翻页焦点图效果.html 10.仿豆瓣分页原型.html 11.给放大的分页.html 12.关闭此页面时会...
html css静态翻页效果,WEB前端CSS翻页效果
weixin_42453050的博客
06-03 527
/p><Document* {margin: 0;padding: 0;}space {perspective: 800px;perspective-origin: 50% 50%;overflow: hidden;}#main {transform-style: preserve-3d;width: 320px;height: 370px;position: relative;mar...
Turn.js实现翻书效果
hhupp1809684284的博客
05-23 2880
trun.js的一份中文使用文档，相较于官方的文档，增加了一些自己理解的内容， 文章中展示的更多是常用的，一些本人无法理解的内容做了删减。
js翻页效果实现
热门推荐
kirsten_z的博客
10-24 1万+
1、说明 1）功能：实现书籍翻页效果 2）使用插件：turn.js2、示例 1）前提工作 – 需要提前计算数据总页数，提前生成需要的页数 – 初始化翻书插件 2）实践 html代码片段示例：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>翻书</title>
使用JavaScript实现页面滑动切换效果
最新发布
忧郁的蛋的专栏
08-09 2240
我们使用CSS的动画效果将当前页面向上滑动，同时添加一个延迟，确保动画完成后再显示下一页。最后，我们在动画完成后移除相应的CSS样式。同样，我们使用CSS的动画效果将当前页面向下滑动，并在动画完成后显示上一页。在现代Web页面设计中，页面滑动切换效果已经成为了一种常见的设计要求，能够提升用户体验，增加页面的交互性。在JavaScript中，我们首先获取到所有的页面元素，并初始化当前页面为第一个页面。在脚本文件中，我们将使用JavaScript来控制页面的显示和隐藏，并且通过添加CSS样式来实现滑动效果。
js实现翻页
qq_36470686的博客
10-19 6971
效果图： 代码 ： &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html;charset=utf-8"/&gt; &lt;style&gt; .first{ color:#666; display:inline-block; vertical-...
pdf.js+turn.js 实现自适应翻页效果
weixin_69820680的博客
08-03 3303
本文使用pdf.js和turn.js进行了pdf网页预览和书籍翻页效果的开发，实际开发过程中踩了很多的坑，希望本文能给您的工作或学习提供帮助，谢谢阅读！
程序天下:JavaScript实例自学手册
07-08
3.44 textarea内实现行的翻页效果 3.45 textarea中的文本插入 3.46 查找两段文本中相同的词句 3.47 自动保存网页输出的文本 3.48 文本编辑器 第4章 鼠标特效 4.1 禁用鼠标右键 4.2 使鼠标滚轮失效 4.3 状态栏显示...
js实现web的翻页功能
04-26
纯js实现web前端的翻页，实现、首页、尾页、上一页、下一页的功能实现
万能js实现翻页，动态生成内容自动翻页，兼容各种浏览器（已测试）
02-10
运用js动态填写输入内容，生成内容条实现翻页。
JS实现的图片翻页效果
03-18
NULL 博文链接：https://fxyc.iteye.com/blog/641760
HTML5 实现翻页的效果
11-07
在网页中实现翻页的效果
24款实用的翻页页码css代码.
06-23
24款实用的翻页页码css代码.rar,24款实用的翻页页码css代码.rar 看清楚是CSS的哦！
AJAX基础概念、核心技术与典型案例(内涵动态实例)
12-27
PageSample 实现Ajax翻页效果 数据库备份 本章实例所需要的数据库 第15章（/C15/） AjaxCallerSchedul 使用AjaxCaller实现简单的定时任务 RicoColor 使用Open Rico实现动态调色板 ...
《程序天下：JavaScript实例自学手册》光盘源码
02-08
3.44 textarea内实现行的翻页效果 3.45 textarea中的文本插入 3.46 查找两段文本中相同的词句 3.47 自动保存网页输出的文本 3.48 文本编辑器 第4章 鼠标特效 4.1 禁用鼠标右键 4.2 使鼠标滚轮失效 4.3 状态栏显示...
韩顺平PHP JS JQUERY 所有视频下载种子 货真价实
01-26
9-30 2 javascript的闭包 js变量作用域 9-30 3 仿超级玛丽兄弟游戏制作 9-30 4 构造方法 对象的常用操作 9-30 5 面向对象的封装 继承 多态 9-30 6 面向对象的封装 继承 多态2 9-5 1.php xml编程①-xml基本介绍 xml...
JS实现--翻页（简单）
qq_42777804的博客
09-23 2793
使用js实现简单的翻页效果 上效果图 上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style&g
利用CSS，实现翻页效果
weixin_46683455的博客
10-09 3620
利用css的3d效果，实现一个简单的翻页器。
HTML+CSS+JS实现原神官网静态页面代码
05-04
很遗憾，我无法提供完整的HTML CSS JS代码实现原神官网静态页面，因为这需要涉及到版权问题，同时原神官网的页面结构也非常复杂，需要大量的HTML和CSS技术。但是，我可以给您一些实现静态页面的一般步骤和技术： 1. 分析原神官网页面结构和布局，包括头部、导航栏、轮播图、内容区域等。 2. 使用HTML语言构建静态页面结构，可以使用语义化标签和CSS框架来加速开发。 3. 使用CSS样式表对页面进行美化和布局，包括字体、颜色、背景、边框等。 4. 使用JavaScript技术实现页面交互效果，如轮播图、下拉菜单、滚动效果等。 5. 最后，进行调试和优化，确保页面在不同浏览器和设备上都能正常显示和工作。 总之，实现静态页面需要掌握HTML、CSS、JavaScript等技术，还需要有良好的代码编写习惯和设计能力。如果您是初学者，可以从学习HTML和CSS基础开始，逐步学习JavaScript和框架库，才能实现更复杂的页面效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值