① 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優化了檢查變數的演算法，它只會在某些特殊的事件觸發時，才會去檢查數據的更新，而不是簡單地在後台不停地輪詢。