① js上下滚动代码，谢谢
JS上下滚动图片
<div id="demo" style="overflow:hidden;height:500px;width:120px; border:1px solid #dde5bc; overflow:hidden;float:left">
<div id=demo1>
<img src="images/js01.gif" width="120" height="120">
<img src="images/js02.gif" width="120" height="120">
<img src="images/js03.gif" width="120" height="120">
<img src="images/js04.gif" width="120" height="120">
<img src="images/js05.gif" width="120" height="120">
<img src="images/js06.gif" width="120" height="120">
<img src="images/js07.gif" width="120" height="120">
<img src="images/js08.gif" width="120" height="120">
<img src="images/js09.gif" width="120" height="120">
</div>
<div id=demo2></div>
</div>
<script>
var speed=40
var demo=document.getElementById("demo");
var demo2=document.getElementById("demo2");
var demo1=document.getElementById("demo1");
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetTop-demo.scrollTop<=0)
demo.scrollTop-=demo1.offsetHeight
else{
demo.scrollTop++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
② js如何实现滚动效果
eg：左右滚动：设定一定宽度，外面的框包着里面的框，外面框宽度设小，里面设置很大，用css：overflow：scroll ； 会看到外框上出现滚动条，用scrollLeft++ 或scrollLeft-- 改变滚动条位置，自然图片就滚动起来了
③ 前端js插件
前端js插件,具有简单使用,交互效果好,具有吸引力外观的特点，下面总结一下最常用并且最好用的js插件：
1.zDialog.js插件。是一个包含各种弹窗的前端插件。
2.ace.min.js插件，ace-element.min.js插件，是基于Bootstrap Ace模板的菜单和包含Tab页效果。
3.jquery.flot.js插件，Jquery的图表插件float。Flot是一个Jquery下图表插件，具有简单使用，交互效果，具有吸引力外观特点。目前支持 Internet Explorer 6+, Chrome, Firefox 2+, Safari 3+ and Opera 9.5+ 等浏览器，是一个基于Javascript和Jquery纯客端户的脚本库。
4.jquery.easypiechart.js插件，主要是用来统计新的访问、跳出率、服务器负载、使用的RAM等，功能很强大，带有HTML5的动画效果，效果非常炫。
query.sparkline.js插件，是一款jquery的画小图插件。
5.jquery.slimscroll.js插件 ，是jQuery内的内容滚动插件，可以定义高度、宽度，还可以定义位置、滚动条大小、尺寸、颜色以及众多参数自定义。
6.jquery.ui.touch.js 插件，包含jQuery触摸效果。
④ JS怎么做滚动哇！
是图片轮播吗？5张图片轮播代码：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""
<htmlxmlns="
<head>
<title>picplayer</title>
<scripttype="text/javascript"src="
<scripttype="text/javascript"src="
</head>
<styletype="text/css">
img{border:0;}
</style>
<body>
<div
id="picplayer"
style="position:relative;overflow:hidden;width:300px;height:300px;clear:none;border:solid
1px#ccc;">
thereisapic-player
</div>
<script>
varp=$('#picplayer');
var
pics1=
[{url:'
,link:'
,time:5000},{url:'
,link:'
,time:4000},{url:'
,link:'
,time:6000},{url:'
,link:'
,time:6000},{url:'
,link:'
,time:6000}];
initPicPlayer(pics1,p.css('width').split('px')[0],p.css('height').split('px')[0]);
//
//
functioninitPicPlayer(pics,w,h)
{
//选中的图片
varselectedItem;
//选中的按钮
varselectedBtn;
//自动播放的id
varplayID;
//选中图片的索引
varselectedIndex;
//容器
varp=$('#picplayer');
p.text('');
p.append('<divid="piccontent"></div>');
varc=$('#piccontent');
for(vari=0;i<pics.length;i++)
{
//添加图片到容器中
c.append('<a
href="'+pics[i].link+'"target="_blank"><imgid="picitem'+i+'"
style="display:none;z-index:'+i+'"src="'+pics[i].url+'"
/></a>');
}
//按钮容器，绝对定位在右下角
p.append('<div
id="picbtnHolder"
style="position:absolute;top:'+(h-25)+'px;width:'+w+'px;height:20px;z-index:10000;"></div>');
//
varbtnHolder=$('#picbtnHolder');
btnHolder.append('<divid="picbtns"style="float:right;padding-right:1px;"></div>');
varbtns=$('#picbtns');
//
for(vari=0;i<pics.length;i++)
{
//增加图片对应的按钮
btns.append('<span
id="picbtn'+i+'"style="cursor:pointer;border:solid1px
#ccc;background-color:#eee;
display:inline-block;">'+(i+1)+'</span>');
$('#picbtn'+i).data('index',i);
$('#picbtn'+i).click(
function(event)
{
if(selectedItem.attr('src')==$('#picitem'+$(this).data('index')).attr('src'))
{
return;
}
setSelectedItem($(this).data('index'));
}
);
}
btns.append('');
///
setSelectedItem(0);
//显示指定的图片index
functionsetSelectedItem(index)
{
selectedIndex=index;
clearInterval(playID);
//alert(index);
if(selectedItem)selectedItem.fadeOut('fast');
selectedItem=$('#picitem'+index);
selectedItem.fadeIn('slow');
//
if(selectedBtn)
{
selectedBtn.css('backgroundColor','#eee');
selectedBtn.css('color','#000');
}
selectedBtn=$('#picbtn'+index);
selectedBtn.css('backgroundColor','#000');
selectedBtn.css('color','#fff');
//自动播放
playID=setInterval(function()
{
varindex=selectedIndex+1;
if(index>pics.length-1)index=0;
setSelectedItem(index);
},pics[index].time);
}
}
</script>
</body>
</html>
演示地址：http://img.jb51.net/online/picPlayer/picplay.htm
⑤ js如何实现元素滚动 整个页面不动
通过css定位,来设置div在页面滚动中固定不动,
CSS position定位属性
static 元素框正常生产relative 相对定位: 相对于正常定位进行偏移
absolute 绝对定位: 相对于其包含块定位.
因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。
fixed 固定定位: 相对于视窗本身定位,
元素框的表现,类似于将 position 设置为 absolute，不过其包含块是视窗本身。
⑥ js如何写自己的滚动条
由于网页中使用到了iframe，如果iframe中的内容超过主页面的范围后，在iframe的四周会出现滚动条，这样和主页面很不协调，所以在网上找了很久，终于找到一段代码可以解决这个问题，代码如下：
这段代码放在<head></head>之间：
<script language="Javascript">
var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1]
//extra height in px to add to iframe in FireFox 1.0+ browsers
var FFextraWidth=getFFVersion>=0.1? 16 : 0
var FFextraHeight=getFFVersion>=0.1? 16 : 0
function dyniframesizeWidth(iframename) {
var pTar = null;
if (document.getElementById){
pTar = document.getElementById(iframename);
}
else{
eval('pTar = ' + iframename + ';');
}
if (pTar && !window.opera){
//begin resizing iframe
pTar.style.display="block"
if (pTar.contentDocument && pTar.contentDocument.body.offsetWidth){
//ns6 syntax
pTar.width = pTar.contentDocument.body.offsetWidth+FFextraWidth;
}
else if (pTar.Document && pTar.Document.body.scrollWidth){
//ie5+ syntax
pTar.width = pTar.Document.body.scrollWidth;
}
}
}
function dyniframesizeHeight(iframename) {
var pTar = null;
if (document.getElementById){
pTar = document.getElementById(iframename);
}
else{
eval('pTar = ' + iframename + ';');
}
if (pTar && !window.opera){
//begin resizing iframe
pTar.style.display="block"
if (pTar.contentDocument && pTar.contentDocument.body.offsetHeight){
//ns6 syntax
pTar.height = pTar.contentDocument.body.offsetWidth+FFextraHeight;
}
else if (pTar.Document && pTar.Document.body.scrollHeight){
//ie5+ syntax
pTar.height = pTar.Document.body.scrollHeight;
}
}
}
</script>
下边是在iframe中输入的代码：
<iframe id="displayresult" onload="javascript:{dyniframesizeHeight('displayresult');dyniframesizeWidth('displayresult');}" hspace="0" vspace="0" marginwidth=0 marginheight=0 frameborder=0 width=100% height=100% src="test.htm" scrolling=no name="displayresult"></iframe>
代码的关键是：设置id
调用js中的函数（dyniframesizeHeight(id)是设置高的滚动条自动调整，dyniframesizeWidth(id)是设置宽的滚动条的自动调整。）
将scrolling=no
其他就看实际应用做相应的修改了；
⑦ 怎么通过js控制滚动条
通过div的scrollTop变动控制垂直滚动条位置。通过div的scrollLeft变动控制水平滚动条位置。示例//d1是外层div，带滚动条2222
⑧ angularjs 怎么监听滚动条
2. 如果你是用的jQuery2.0以上版本，还需要修改ng-infinite-scroll.js程序，将所有的将所有的$window.xxx改为$(window).xxx, elem.xxx改为$(elem).xxx
3. 在HTML中引入script
<script type='text/javascript' src='path/to/jquery.min.js'></script>
<script type='text/javascript' src='path/to/angular.min.js'></script>
<script type='text/javascript' src='path/to/ng-infinite-scroll.min.js'></script>
4. HTML示例代码如下：
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div ng-controller='PostListController'>
<div infinite-scroll='demo.nextPage()' infinite-scroll-disabled='demo.busy' infinite-scroll-distance=''>
<div ng-repeat='item in demo.items'>
<p>
<input type="hidden" value="{{item.PostId}}" />
<label>{{item.WriterName}}</label>
<label>{{item.WriterMail}}</label>
<label>{{item.WreckerName}}</label>
<label>{{item.StartDate}}</label>
<label>{{item.Location}}</label>
<label>{{item.Story}}</label>
</p>
</div>
<div ng-show='demo.busy'>Loading data...</div>
</div>
</div>
5. PostListController.js代码如下：
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
var ftitAppMole = angular.mole('ftitApp', ['infinite-scroll']);
ftitAppMole.controller('PostListController',
function ($scope, Demo) {
$scope.demo = new Demo();
});
// 创建后台数据交互工厂
ftitAppMole.factory('Demo', function ($http) {
var Demo = function () {
this.items = [];
this.busy = false;
this.after = '';
this.page = ;
};
Demo.prototype.nextPage = function () {
if (this.busy) return;
this.busy = true;
var url = "http://...:/api/post/nextpage?id=" + this.page + "&callback=JSON_CALLBACK";
$http.jsonp(url).success(function (data) {
var items = data;
for (var i = ; i < items.length; i++) {
this.items.push(items[i]);
}
this.after = "t_" + this.items[this.items.length - ].id;
this.busy = false;
this.page += ;
}.bind(this));
};
return Demo;
});
这样就实现了页面拖动到底后，从服务器自动加载数据的功能。
PS：AngularJS的加载执行过程
1. HTML页面的加载，这会触发加载页面包含的所有JS (包括 AngularJS)
2. AngularJS启动，搜寻所有的指令(directive)
3. 找到ng-app，搜寻其指定的模块(Mole)，并将其附加到ng-app所在的组件上。
4. AnguarJS遍历所有的子组件，查找指令和bind命令
5. 每次发现ng-controller或者ng-repeart的时候，它会创建一个作用域(scope)，这个作用域就是组件的上下文。作用域指明了每个DOM组件对函数、变量的访问权。
6. AngularJS然后会添加对变量的监听器，并监控每个变量的当前值。一旦值发生变化，AngularJS会更新其在页面上的显示。
7. AngularJS优化了检查变量的算法，它只会在某些特殊的事件触发时，才会去检查数据的更新，而不是简单地在后台不停地轮询。