<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="<%=path%>/jquery/jquery-1.9.1.js"></script>
<style type="text/css">
.one,.two{height:200px;background-color:red;}
.two{background-color:yellow;}
.main{height:200px;overflow:auto;}
</style>
</head>
<body>
<div id="latestNews" style="overflow: hidden; height: 156px; width: 330px;">
<div id="newsOne">
<li><a href="NewsDetails.aspx?id=592" target="_blank">常用的服装陈列之9种方法</a></li>
<li><a href="NewsDetails.aspx?id=591" target="_blank">内衣加盟选址六技巧</a></li>
<li><a href="NewsDetails.aspx?id=589" target="_blank">成功分享：亮湾湾饰品店的八大陈列心得</a></li>
<li><a href="NewsDetails.aspx?id=588" target="_blank">内衣店接手店铺时应该注意的问题</a></li>
<li><a href="NewsDetails.aspx?id=587" target="_blank">三种开女士内衣店的人气店址推荐</a></li>
<li><a href="NewsDetails.aspx?id=586" target="_blank">内衣店接手店铺时应该注意的问题</a></li>
<li><a href="NewsDetails.aspx?id=585" target="_blank">门店销售点睛：内衣店的试衣间</a></li>
</div>
<div id="newsTwo" style="overflow: hidden; height: 156px;" >
</div>
</div>
<script type='text/javascript'>
// 第一种滚动：
/* */
var newsOne = document.getElementById("newsOne");
var newsTwo = document.getElementById("newsTwo");
var latestNews = document.getElementById("latestNews");
newsTwo.innerHTML = newsOne.innerHTML;
//offsetHeight:返回元素(可见部分)的高度，以像素为单位。这是非标准的但却得到很好支持的属性。
//scrollHeight 当一个元素拥有滚动条时（比如由于 CSS 的 overflow 属性）。
function newsScroll() {
if ((latestNews.scrollHeight - latestNews.offsetHeight) <= latestNews.scrollTop)
latestNews.scrollTop = 0;
else
latestNews.scrollTop = latestNews.scrollTop + 1;
}
setInterval(newsScroll, 80);
/* */
/*
//第二种滚动：（需要设置latestNews的style：position:absolute;）
var newsOne = document.getElementById("newsOne");
var newsTwo = document.getElementById("newsTwo");
var latestNews = document.getElementById("latestNews");
newsTwo.innerHTML = newsOne.innerHTML;
function newsScroll() {
if (newsTwo.offsetTop - latestNews.scrollTop <= 0)
latestNews.scrollTop -= newsOne.offsetHeight;
else
latestNews.scrollTop = latestNews.scrollTop + 3;
}
setInterval(newsScroll, 300);
*/
</script>
</body>
</html>
一杯白开水w
- 浏览: 231764 次
- 性别:
- 来自: 北京
-
相关推荐
在这个例子中，当页面滚动到div的初始位置时，我们会给div添加一个`.fixed` 类，该类在CSS中定义了`position: fixed` 和其他样式。当页面滚动回到div的初始位置以上时，我们会移除这个类，恢复div的原始样式。 标签...
标题 "js实现div里面的内容滚动，并可以通过按钮控制" 涉及的是JavaScript在网页中创建动态滚动效果的技术。JavaScript是一种广泛用于网页交互的脚本语言，它可以操纵HTML元素，包括让内容在div（一个HTML布局容器）...
在网页开发中，jQuery是一个非常...总的来说，通过jQuery的`animate()`方法，我们可以轻松地实现div滚动条的动态控制，为用户提供更加友好的交互体验。这个功能在展示长列表、分页内容或者需要聚焦某个部分时特别有用。
标题"div不随滚动条的移动而改变位置"所指的问题是关于如何实现一个固定定位（fixed positioning）的 `div` 元素。这种效果使得 `div` 在页面上保持在一个特定位置，即使用户滚动页面，它也不会移动。这通常用于创建...
标题中的“JQuery 随鼠标滚动条滚动的div”是指使用JQuery库来实现一个功能，即当用户滚动页面时，某个特定的div元素会跟随滚动条一起移动。这个功能在网页设计中常见于侧边栏菜单、广告条或者固定导航栏等，目的是...
在这个例子中，我们创建了一个具有固定高度和垂直滚动条的div，然后使用`.scroll()`方法监听滚动事件。当用户滚动div时，我们可以执行自定义的JavaScript代码，比如更新其他元素的状态或者执行动画效果。 除了基本...
在这个例子中，`overflow:auto` 属性使得当内容超出`DIV`边界时自动显示滚动条。`width` 和 `height` 设置了`DIV`的尺寸，以触发滚动条的出现。 接下来，我们将利用 jQuery 来控制滚动条的显示与隐藏。jQuery 是一...
为了模拟滚动条，我们创建了一个名为`#content`的div，其高度设置为1000px，它包含着所有章节内容，由于其父元素的高度限制，内容会超出可视区域，从而需要滚动查看。 滚动条的样式通过`.scrollDiv`类定义，这是一...
1. 内容变化：如果我们要监听DIV内容的改变，可以使用`input`事件，但要注意这通常用于表单元素。对于非表单元素，可以自定义事件或使用MutationObserver API来检测变化。 2. 尺寸变化：当DIV的尺寸发生变化时，...
4.本例子只解决了页面不满一屏时的页底浮动问题，如果你的页面撑满一页有竖滚动条时，页底是固定不变的。 5.关于第4点本人认为，并不是这个解决方案有缺陷。因为你不应该用这个例子解决你的既要满屏居低又要超一屏还...
总的来说，"DIV+CSS+JAVASCRIPT实现图片滚动效果"是一个综合运用前端技术实现动态网页效果的例子，它展示了Div布局、CSS样式控制和JavaScript交互编程在网页设计中的重要性。通过理解和实践这一技术，开发者能够创建...
在网页开发中，有时我们需要实现一个功能，使得页面中的某个具有滚动条的div元素自动滚动到最底部，以便用户能够即时查看新加载的内容，比如在实时聊天应用中。本文将介绍三种实现这一功能的方法。 方法一：使用锚...
在这个主题中，我们将深入探讨如何利用 `DIV+CSS` 创建纵向横向下拉菜单以及如何用 `JavaScript` 实现图片文字的横向滚动。 首先，我们来关注 `DIV+CSS` 纵向横向下拉菜单。`DIV` 是HTML中的一个布局容器元素，通过...
这样，当 DIV 元素中的内容超过其高度时，滚动条将自动出现。 水平和垂直滚动条 如果我们想要出现水平滚动条，可以将 `overflow-x` 属性设置为 `auto`。例如： ``` <div style="position:absolute; width:400px; ...
这两个例子会在内容溢出对应方向时自动显示滚动条。 在某些情况下，`div` 可能是其他元素如 `td`（表格单元格）的子元素。在这种情况下，可能需要将 `div` 的定位设置为 `relative`，以便滚动条不会影响到其他元素...
【图片滚动例子(带注释)】 在网页设计中，图片滚动是一种常见的视觉效果，用于展示多张图片或内容，特别是在有限的空间内。本示例将深入探讨如何使用JavaScript、jQuery以及C#中的Asp.NET页面来实现图片的横向滚动...
在这个例子中，JS用于控制Div元素的显示和隐藏，以及文字滚动的行为。 1. **文字滚动**： - 在HTML中，我们可以创建一个Div元素来放置需要滚动的文字。 - 使用CSS设置Div的样式，如宽度、高度、溢出隐藏等，以...
在JavaScript（js）开发中，有时我们需要将网页的一部分，如div的内容，转化为图片并提供下载功能。这在数据可视化、屏幕截图或者用户自定义布局的保存场景中非常常见。本篇将详细介绍如何实现这一功能，并重点讲解...
"Jquery跟随滚动条移动的div动画效果"就是一个典型的例子，它利用jQuery库实现了一个div元素随着页面滚动条移动而同步移动的特效，而且这个div在移动过程中保持平滑，避免了闪烁现象，提升了用户体验。 首先，...
这个技术使得网页的某个部分（在这个例子中是一个包含链接的div）在用户滚动页面时始终保持在屏幕顶部，提供持续的导航功能。在网页设计中，这种效果可以提升用户体验，因为它使用户能够轻松访问导航菜单，而无需...