<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.7.2.js" type="text/javascript" ></script>
<title>动态滚动div(实现书本翻页功能)</title>
<style type="text/css">
<!--
.scroll {
width:920px;
overflow:hidden;
}
.scrollLeft {
width:1920px;
height:450px;
margin:0px;
padding:0px;
clear:both;
position:relative;
overflow:hidden;
}
.scrollLeft img {
width:960px;
height:450px;
border:#CCCCCC solid 1px;
}
.scrollLeft .chapter {
float:left;
width:960px;
height:450px;
overflow:hidden;
}
.scrollLeft .right {
float:left;
width:960px;
height:450px;
overflow:hidden;
}
.scrollLeft .left {
float:left;
width:960px;
height:450px;
overflow:hidden;
}
-->
</style>
</head>
<body>
<div style="width:960px;position:relative;background-color:rgb(255, 255, 255);overflow:hidden;">
<div class="scrollLeft" id="scrollLeft">
<div class="chapter" id="chapter_1" style="margin-left:0px;"><a href="#"><img src="css/img/chapter_0.jpg" align="图片"/></a></div>
</div>
</div>
<div align="center" style="width:960px;">
<input type="button" id="left" value="left" onclick='RollAround.prev();'/>
<input type="button" id="right" value="right" onclick='RollAround.next();'/>
</div>
<script>
<!--
var currentPageNo = 1;
var intervalId;
var RollAround = {
speedTime : 10,
refreshPX : 20,
maxPX : 0,
marqueeleft : function(){
var currentchapter = $("#chapter_"+currentPageNo);
if(RollAround.maxPX==0){
$("#left").attr("disabled", true);
$("#right").attr("disabled", true);
getPage('left').insertAfter(currentchapter);
}
if(RollAround.maxPX == 960){
clearInterval(intervalId);
$("#chapter_"+(currentPageNo)).remove();
currentPageNo++;
$("#left").attr("disabled", false);
$("#right").attr("disabled", false);
}else{
RollAround.maxPX += RollAround.refreshPX;
var margin = (getPxNumber(currentchapter.css("margin-left")) - RollAround.refreshPX) + "px";
currentchapter.css("margin-left", margin);
//283295058
var nextchapter = $("#chapter_"+ (currentPageNo+1));
var next_margin = (getPxNumber(nextchapter.css("margin-left")) - RollAround.refreshPX) + "px";
nextchapter.css("margin-left", next_margin);
}
},
marqueeright : function(){
var currentchapter = $("#chapter_"+currentPageNo);
if(RollAround.maxPX==0){
getPage('right').insertBefore(currentchapter);
$("#left").attr("disabled", true);
$("#right").attr("disabled", true);
}
if(RollAround.maxPX == 960){
clearInterval(this.intervalId);
$("#chapter_" + currentPageNo).remove();
currentPageNo--;
$("#left").attr("disabled", false);
$("#right").attr("disabled", false);
}else{
RollAround.maxPX += RollAround.refreshPX;
var margin = (getPxNumber(currentchapter.css("margin-left")) + RollAround.refreshPX) + "px";
currentchapter.css("margin-left", margin);
//283295058
var nextchapter = $("#chapter_" + (currentPageNo-1));
var next_margin = (getPxNumber(nextchapter.css("margin-left")) + RollAround.refreshPX) + "px";
nextchapter.css("margin-left", next_margin);
}
},
prev : function(){
RollAround.marqueetype = "left";
RollAround.maxPX = 0;
//开始循环
intervalId =setInterval(RollAround.marqueeleft, RollAround.speedTime);
},
next : function(){
RollAround.marqueetype = "right";
RollAround.maxPX = 0;
//开始循环
intervalId =setInterval(RollAround.marqueeright, RollAround.speedTime);
}
}
function getPage(type){
if(type=='left'){
var nextPageNo =currentPageNo + 1;
var div = $('<div class="chapter" id="chapter_'+nextPageNo+'" style="margin-left:960px;"></div>')
div.append($('<a href="#"><img src="css/img/unit_'+nextPageNo+'.jpg" align="图片"/></a>'));
return div;
}else{
var prevPageNo = currentPageNo -1;
var div = $('<div class="chapter" id="chapter_'+prevPageNo+'" style="margin-left:-960px;"></div>')
div.append($('<a href="#"><img src="css/img/unit_'+prevPageNo+'.jpg" align="图片"/></a>'));
return div;
}
}
function getPxNumber(m){
var number = m.replace("px", "");
if(_isBlank(number)){
return 0;
}else{
return new Number(number);
}
}
function _isBlank(obj){
if(obj == null || obj == ""){
return true;
}
return false;
}
-->
</script>
</body>
</html>
分享到：
相关推荐
接下来，我们用jQuery编写JavaScript代码来实现滚动切换： 1. **监听滚动事件**：使用`$(window).scroll(function() {...})`监听滚动事件。 2. **获取滚动位置**：通过`$(window).scrollTop()`获取滚动条的位置。 ...
本文实例为大家分享了vue实现整屏滚动切换的具体代码，供大家参考，具体内容如下 1、下载vue-awesome-swiper npm i vue-awesome-swiper -S 2、在main.js引入 import vueAwesomeSwiper from 'vue-awesome-swiper' ...
"jQuery+div实现同时滑动切换的图文展示特效插件"就是一个旨在提升用户体验的工具，它利用了JavaScript库jQuery的强大功能和HTML中的div元素来实现动态的、平滑的图文展示效果。接下来，我们将深入探讨这个插件的...
- 在这个例子中，CSS用于布局图片和文字，例如浮动（float）元素来创建并排的效果，以及设置溢出（overflow）属性实现滚动。 4. **JavaScript事件处理**： - `onmouseover`事件用于在鼠标进入元素时执行指定的...
例如，使用jQuery，我们可以监听滚动事件并动态地切换div的定位方式： ```javascript $(document).ready(function() { var stickyTop = $('.sticky').offset().top; // 获取div初始位置 $(window).scroll...
"让DIV固定在页面的某个位置而不随着滚动条随意滚动" 在前端开发中，我们常常需要让某个DIV元素固定在页面的某个位置，而不随着滚动条的滚动而移动。这可以通过使用CSS的position属性来实现，特别是使用fixed值。...
这里，我们将利用类设计来实现滚动效果。例如，我们可以创建一个名为`ScrollEffect`的类，该类包含初始化方法、滚动方法和更新方法： ```javascript class ScrollEffect { constructor(element, speed, direction)...
本文将详细介绍如何利用JavaScript，特别是与Ajax技术结合，来实现一个动态加载的多页面切换功能。 **1. Ajax基础** Ajax（Asynchronous JavaScript and XML）是一种在无需刷新整个网页的情况下更新部分网页的技术...
这里提到的`jquery.scroll-follow.js`可能是实现滚动跟随功能的JavaScript插件，而`jquery.cookie.js`可能用于存储用户的偏好，比如是否开启滚动跟随功能。 以下是如何实现这个效果的步骤： 1. **HTML结构**：首先...
在网页设计中，"js控制div左右切换带左右箭头"是一种常见的交互效果，它用于展示多内容区域，用户可以通过点击或悬浮在左、右箭头上实现内容的切换。这种效果常见于产品展示、轮播图或者选项卡式布局中，能够提供...
实现滚动效果时，有时会用到像jQuery或Vue.js这样的库或框架。它们提供了更简便的方法来操作DOM和处理事件，简化代码编写。例如，jQuery中的`$(element).animate()`可以轻松实现平滑滚动。 综上所述，实现“鼠标...
在网页设计中，纯div+css实现的图片轮播是一种常见的动态效果，它能为网站增添生动性，吸引用户注意力。下面将详细讲解这个主题，包括如何使用div和css创建图片切换、电子相册以及轮播图片的效果。 一、图片切换 ...
本篇文章详细介绍了 DIV 滚动条的样式设置，包括如何实现 DIV 滚动条、DIV 滚动条的样式设置和滚动条颜色属性。通过设置 `overflow` 属性和滚动条颜色属性，可以实现 DIV 元素的滚动条样式设置。
JavaScript还可以实现语言切换功能，可能通过更改DOM元素的文本内容或者调用外部翻译API来达到这一目的。如果这个项目使用了Vue.js框架，那么这些逻辑可能被封装成组件，使得代码更加模块化和易于维护。 在压缩包中...
"div层显示一行文字实现翻页的效果"这个主题就是关于如何利用HTML、CSS和JavaScript来创建一个简单的翻页效果，通常用于展示内容分页或者模拟书籍翻页。在这个教程中，我们将探讨如何通过div元素和相应的编程技巧来...
例如，可以使用`addEventListener`函数添加滚动事件监听器，当用户滚动页面时，通过改变Div的`style.transform`值来更新图片的位置，实现动态滚动。此外，JavaScript还可以控制滚动速度、方向、暂停与继续等功能，...
本主题将探讨如何利用JavaScript实现一个具有无缝隙滚动和翻页加速功能的图片滚动效果。 首先，我们需要理解“无缝隙横向滚动”的概念。无缝隙滚动意味着在图片滚动过程中，下一张图片会在当前图片即将消失时立即...
关于如何使用JavaScript实现当鼠标滑动到指定的div区域内时禁止页面滚动的功能，这是一个在前端开发中可能会遇到的实际需求。通常这种需求是在特定的操作场景中为了提供更好的用户体验而提出的。例如，在一个产品...
在网页开发中，jQuery是一个非常...总的来说，通过jQuery的`animate()`方法，我们可以轻松地实现div滚动条的动态控制，为用户提供更加友好的交互体验。这个功能在展示长列表、分页内容或者需要聚焦某个部分时特别有用。