<%@ 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
- 浏览: 224398 次
- 性别:
- 来自: 北京
-
div内容滚动的例子
- 博客分类：
- JavaScript
相关推荐
这个例子是把div固定在设定的地方，不跟着滚动条滚动！
今天做了个例子： div 的滚动条问题： 两种方法： 一、 复制代码代码如下: <div xss=removed></div> 记住宽和高一定要设置噢，否则不成的 不过在不超出时，会有下面的滚动条，所以不是最好的选择 二、 复制代码...
DIV+CSS纵向横向下拉菜单，JS图片文字横向滚动，比较实用小例子，和大家分享下！
用JS遮罩层完美弹出Div，并且滚动条完美屏蔽掉。。绝对是您完美的学习例子
我一直以为是某个div或层随屏幕滚动，遇顶则固定，离开浏览器顶部又还原这样的例子其实不少，其实它的名字叫“层的智能浮动效果”。目前我们在国内的商业网站上就常常看到这样的效果了。例如淘宝网的搜索结果页的...
本文实例为大家分享了js实现鼠标滑动到某个div禁止滚动的具体代码，供大家参考，具体内容如下 项目中碰到一个场景就是当鼠标滑倒某个div的时候，滑动鼠标页面不再滚动。 这里主要是当鼠标滑动到该div时，监听滚轮...
4.本例子只解决了页面不满一屏时的页底浮动问题，如果你的页面撑满一页有竖滚动条时，页底是固定不变的。 5.关于第4点本人认为，并不是这个解决方案有缺陷。因为你不应该用这个例子解决你的既要满屏居低又要超一屏还...
这个例子是把div固定在设定的地方，不跟着滚动条滚动！
今天与大家分享一下我写的一个滚动条滚动固定div的例子，现在很多地方都可以看到这样的效果
关于用鼠标滚动到某个位置我们就去加载数据，这样的场景与业务需求现在越来越常见，现在来分析下《vue.js 实战》中作者的一个解决策略： ...//该div 为要滚动区域 <div class="daily-list" ref="list" @scroll="han
1.jquery+div随屏幕滚动特效(支持设置参数滚动) 2.jQuery字符插件之适合留言板的jquery文本框输入字符限制插件下载 3.jquery实现Tooltip提示(文字、链接、地图锚点),自带5种不同样式 4.jQuery实现支付宝隐藏...
因为是初学JS 所以从网上找了不少别人的例子 我发现了一下问题 1.大多数html代码不符合W3C的最新标准。 2.很多代码移植性太差。 3.向左循环的时候。除用表格方式外，必须固定宽度，这样就不能动态的添加图片了。 ...
功能概述可实现移动端的单页滚动效果，可自定义参数，提供回调接口，和公开接口。兼容性Ios4 Andriod2.3 （未全部覆盖）快速上手HTML<div class="wp"> <div class="wp-inner"> <div class="page page1">1</...
js图片滚动效果，div标签 引用操作简单的一个好例子
本文实例讲述了jQuery实现指定内容滚动同时左侧或其它地方不滚动的方法。分享给大家供大家参考。具体如下： 本效果可实现左上角Logo的置顶但不滚动，而文字也就是网页主体区滚动，当用户拖动滚动条的时候可看到此...
可以看到 滚动条所在div class=”layui-table-body layui-table-main” 我在layui table定义了一个父div,防止多个table时定位错误，先定位父div，再寻找内部的datatable <div class=table-responsive id=table_...
:running_shoe:React Scroll-To一个React组件，可帮助在页面中滚动。 React Scroll-To提供了一个高阶组件和Render Props实现。 安装npm：npm install react-scroll-to --sa:running_shoe:React Scroll-To一个使滚动...
采用jQuery实现的一个图片展示的小例子，右边采用div滑动产生滚动条，使用鼠标滚轮监听时间，。。。。。。代码拙略希望大家指正
$('.div_scroll').scroll_absolute({arrows:true});//滚动条