1. 如何用js實現在表格內橫向滾動圖片
<table valign=top width=770 >
<tr>
<td width=770 valign=top >
<div id="demo" style="overflow:hidden; width:770">
<table >
<tr>
<td valign="top" id="marquePic1">
<table width=770>
<tr align="top">
<td><table><tr>
<!--數目-->
<td ><a href="#" ><img alt="javascript 圖片左右滾動效果代碼" src="/act/thsiff10/images/ro01.jpg" border=0 ></a></td>
<td ><a href="#" ><img alt="javascript 圖片左右滾動效果代碼" src="/act/thsiff10/images/ro01.jpg" border=0 ></a></td>
<td ><a href="#" ><img alt="javascript 圖片左右滾動效果代碼" src="/act/thsiff10/images/ro01.jpg" border=0 ></a></td>
<td ><a href="#" ><img alt="javascript 圖片左右滾動效果代碼" src="/act/thsiff10/images/ro01.jpg" border=0 ></a></td>
<td ><a href="#" ><img alt="javascript 圖片左右滾動效果代碼" src="/act/thsiff10/images/ro01.jpg" border=0 ></a></td>
<td ><a href="#" ><img alt="javascript 圖片左右滾動效果代碼" src="/act/thsiff10/images/ro01.jpg" border=0 ></a></td>
<td ><a href="#" ><img alt="javascript 圖片左右滾動效果代碼" src="/act/thsiff10/images/ro01.jpg" border=0 ></a></td>
<!--數目-->
</tr></table></td>
</tr>
</table>
</td>
<td id=marquePic2 valign=top></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<script type="text/javascript">
var speed=30
marquePic2.innerHTML=marquePic1.innerHTML
function Marquee(){
if(demo.scrollLeft>=marquePic1.scrollWidth){
demo.scrollLeft=0
}else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
內容要夠多才會滾，你只放一兩張圖進去寬度不夠就不會動。
2. 在js中怎麼設置滾動條滾動的距離
如果使用jquery的話，可以這樣寫：
$(window).bind("scroll", function(){
var top = $(this).scrollTop(); // 當前窗口的滾動距離
});
如果使用原生js，可以這樣寫（摘自網上的）：
/**
* 獲取滾動條距離頂端的距離
* @return {}支持IE6
*/
function getScrollTop() {
var scrollPos;
if (window.pageYOffset) {
scrollPos = window.pageYOffset; }
else if (document.compatMode && document.compatMode != 'BackCompat')
{ scrollPos = document.documentElement.scrollTop; }
else if (document.body) { scrollPos = document.body.scrollTop; }
return scrollPos;
}
3. js如何寫自己的滾動條
由於網頁中使用到了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
其他就看實際應用做相應的修改了；
4. JS實現滾動條觸底載入更多
原理
1.通過監聽滾動睜悔區域DOM的scroll事件, 計算出觸底
// 滾動可視區域高度 + 當前滾動位置 === 整個滾動高度
scrollDom.clientHeight + scrollDom.scrollTop === scrollDom.scrollHeight
2.觸底後觸發列表添加, 列表添加使用createDocumentFragment, 將多次插入的DOM先存入內存, 最後爛廳一次填充進去, 提高性能, 也方便後面的MutationObserver監聽
3.使用MutationObserver監聽列表的DOM添加, 添加完畢後, 隱藏載入中飢早隱提示
示例
https://codepen.io/klren0312/full/dybgayL
參考資料
https://developer.mozilla.org/zh-CN/docs/Web/API/Element/clientHeight
https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollHeight
https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollTop
https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/onscroll
https://developer.mozilla.org/zh-CN/docs/Web/API/Document/createDocumentFragment
https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver
5. 通過JS，將列表實現5秒滾動
改成：
vartop=parseInt(hotListDiv.style.top);
if(top<=-700){
hotListDiv.style.top="0px";
}
else{
hotListDiv.style.top=(top-70)+"px";
}