js数组滚动,js循环滚动列表
在js中怎么设置滚动条滚动的距离
jQuery获取的相关方法
jquery?获取滚动条高度
获取浏览器显示区域的高度?：?
$(window).height();?
获取浏览器显示区域的宽度?：
$(window).width();?
获取页面的文档高度?：
$(document).height();?
获取页面的文档宽度?：$(document).width();
获取滚动条到顶部的垂直高度?：
$(document).scrollTop();?
获取滚动条到左边的垂直宽度?：
$(document).scrollLeft();
计算元素位置和偏移量：
$(id).offset();
offset方法是一个很有用的方法，它返回包装集中第一个元素的偏移信息。默认情况下是相对body的偏移信息。结果包含?top和left两个属性。
offset(options,?results)
options.relativeTo指定相对计
算偏移位置的祖先元素。这个元素应该是relative或absolute定位。省略则相对body。
options.scroll是否把
滚动条计算在内，默认TRUE
options.padding是否把padding计算在内，默认false
options.margin
是否把margin计算在内，默认true
options.border是否把边框计算在内，默认true
使用js获取的相关方法
//回到页面顶部
$("#goTotop").click(function(){
$('body,html').animate({scrollTop:0},1500);?//点击按钮让其回到页面顶部
});
$(window).scroll(function()?{
var?yheight1=window.pageYOffset;?//滚动条距顶端的距离
var?yheight=getScrollTop();?//滚动条距顶端的距离
var?height?=document.documentElement.clientHeight//浏览器可视化窗口的大小
var?top=parseInt(yheight)+parseInt(height)-217;
var?divobj=$(".kf");
divobj.attr('style','top:'+top+'px;');
})
/**
?*?获取滚动条距离顶端的距离
?*?@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;?
}
js中无缝滚动轮播图有多少种做法？
还有就是用原生js模仿jQuery写一个动画函数，最简单版的就是：
var timer = null;
function ani(ele,target) {
clearInterval(ele.timer);
ele.timer = setInterval(function() {
var step = (target - ele.offsetLeft)/10;
step = step0?Math.ceil(step):Math.floor(step);
ele.style.left = ele.offsetLeft + step + "px";
console.log(1);
if (Math.abs(target - ele.offsetLeft) = Math.abs(step)) {
ele.style.left = target + "px";
clearInterval(ele.timer);
}
},30);
}
利用动画实现图片位置的移动，也是放一个图片到前面。
第二个就是还是放一张图到前面，然后把带图片的li定位；用一个arr[{left:0},{left:"200px"},{left:"400px"},{left:"600px"}];这样的数组把值分别赋给li；要滚动的时候把arr的最后一项放到最前面，再依次赋值给li，加上过渡就是轮播了，当然直接跳的那一下把过渡关了才是无缝轮播。
求“用JS(javascript)如何判断滚动条移动的方向?”代码
浏览器差异：firefox滚轮事件是DOMMouseScroll，其他浏览器使用的是mousewheel
firefox事件的event对象使用detail值表示滚轮反向，（-3）表示向上，（3）表示向下。
其他浏览器使用wheelDelta值表示表示滚轮方向，（120）表示向上， （-120）表示向下。
监听事件，删除监听事件：IE678使用attachEvent/detachEvent, 其他浏览器使用addEventListener/removeEventListener。
fixedEvent：判断滚轮方向
fixedFn：滚动滚轮取消滚轮的默认滚动网页行为
el.wheelHash：把fixedFn存放到对象的wheelHash属性
var?mousewheel?=?(function(){
????var?types?=['DOMMouseScroll','mousewheel'];
????fixedEvent?=?function(e){
????????e.wheel?=?(e.wheelDelta??e.wheelDelta?:?-e.detail)??0??1?:?-1;//?通过事件判断鼠标滚轮反向，1是向上，-1是向下
????????e.wheelDir?=?e.wheel??0??'up'?:?'down';????//这个只是描述?e.wheel的值和滚轮方向的关系
????????return?e;
????};
????return{//返回mousewheel的方法
????????on:?function(el,?fn,?preventDefault){?//mousewheel对象的on方法，?el触发mousewheel事件对象，fn触发后执行函数，preventDefault是否阻止默认行为：滚轮的网页滚动效果
????????????if(typeof?preventDefault?!=?'boolean'){?//如果传入的实参preventDefault不是布尔值?
????????????????preventDefault?=?true;?//初始化为true
????????????}????
????????????var?fixedFn?=?function(e){?//阻止默认行为函数
????????????????e?=?fixedEvent(e?||?window.event);?//?兼容写法，?返回的e用来判断滚轮方向
????????????????if(preventDefault){?//?如果需要阻止默认行为
????????????????????if(e.preventDefault){????//firefox
????????????????????????e.preventDefault();
????????????????????}
????????????????????else{
????????????????????????e.returnValue?=?false;?//ie
????????????????????}
????????????????};
????????????????fn.call(el,?e);?//el事件对象调用fn函数，参数为e;?注意fn中使用e.wheel去判断鼠标滚轮事件
????????????},
????????????wheelHash?=?el.wheelHash;?//把包含fixedFn函数的?el.wheelHash属性?赋值给?wheelHash
????????????if(!wheelHash){??//判断函数是否存在?wheelHash?对象
????????????????wheelHsah?=?{};
????????????????wheelHash[fn]?=?fixedFn;??//wheelHash对象的属性fn为阻止默认行为函数
????????????????el.wheelHash?=?wheelHash;??//把wheelHash对象赋值给el的wheelHash属性??wheelHash[fn]?==?el.wheelHash[fn]
????????????}else{
????????????????if(wheelHash[fn])?return;?//如果存在?wheelHash?且?wheelHash中有?fixedFn?那么返回
????????????????wheelHash[fn]?=?fixedFn;??//如果没有，?就把fixedFn赋值给wheelHash.fn
????????????};
????????????if(document.addEventListener){??//firefox
????????????????var?i?=?types.length;??
????????????????while(i--){??//循环滚轮事件?数组
????????????????????el.addEventListener(types[i],?fixedFn,?false);????//firefox?el监听滚轮事件，执行取消默认行为
????????????????}
????????????}
????????????else{??//ie
????????????????el.attachEvent('onmousewheel',?fixedFn);?????//?ie?监听事件，?处理函数fixedFn
????????????}
????????},??
????//mousewheel中的on方法作用:?让元素监听事件，且处理是否执行默认行为。并且保存事件的阻止默认行为函数fixedFn到对象el.wheelHash属性中，
????????un:?function(el,?fn){
????????????if(!el.wheelHash)?return;??//如果对象不存在wheelHash,?直接跳出(没效果了)；
????????????var?wheelHash?=?el.wheelHash;
????????????if(document.removeEventListener){??//firefox
????????????????var?i?=?types.length;
????????????????while(i--){
????????????????????el.removeEventListener(types[i],wheelHsah[fn],?false);??//删除监听事件，执行取消默认行为
????????????????}
????????????}else{?//ie
????????????????el.detachEvent('onmousewheel',?wheelHash[fn]);
????????????}
????????????????delete?wheelHash[fn];?//删除?默认行为函数
????????},
????}
})();
//定义滚轮事件
//?var?myWheel?=?function(e){
????//?console.log(e.wheelDir);
//?}
//添加滚轮事件
//?mouseWheel.on(element,?myWheel);
//删除滚轮事件
//?mouseWheel.un(element,?myWheel);
JS实现按钮点击后图片列表滚动
我也是初学者，我就说说我的方法的，先放个数组，里面放对应的left值，
算了直接上代码
oUl是获取到的ul元素，aLi是获取到的li元素的集合;
给ul加一个过度;基本就没问题了
var?a=[];
for(?var?i=0;iaLi.length;i++?){?
????a.push(-100*i)
????aLi[i].index?=?i;
????aLi[i].onclick?=?function(){
????????oUl.style.left?=?a[i];
????}
}
js中数组和对象循环遍历
数组：
var arr = [‘a’，‘b’，'c'];
for (let i = 0;iarr.length;i++){
console.log(i,arr[i])
};
对象：
var person = { name:'tom',age:'29',sex:'男‘}；
// 对象如果要用for循环来遍历，需要先有Object.key()的方法来拿到可迭代（遍历）的私有属性名的集合（数组）
var keys = Object.keys(person);
for (let i = 0;ikeys.length;i++){
console.log(keys[i]+":"+person[keys[i]]);
};
数组：
for(let key in arr){
// 值得注意的是，key为数组的索引，如若需要获取属性的值，则需要使用数组加索引下标 的形式来获取
console.log(key,arr[key]);
}
对象：
for(let key in obj){
// 值得注意的是，key为对象的键名，键值要以obj[key]的方式来获取
console.log(key，obj[key]);
}
数组：
for(let value of arr){
//值得注意的是，for...of跟for...in是不一样的，for...in遍历的是数组的索引，for...of遍历的是数组的值
console.log(value);
}
对象：
for...in是不能单独来遍历一个对象的，会报错。
如果对象是一个类数组对象，那用array.from方法转成一个数组就可以用for...of来遍历了。
或者结合Object.keys()方法来使用
for(let key of Object.keys(obj)){
// for...of遍历输出的也是键名
console.log(key,obj[obj]);
}
数组：
forEach（）方法遍历数组是没有返回值
值得注意的是数组中有几项，那么传递进去的匿名回调函数就需要执行几次；
arr.forEach((item,index,arr)={
console.log(item,index,arr)
)
// 其中item是数组中的当前项，index是数组中的当前下标，arr是原始数组
对象：
原则上forEach是用来遍历数组的，不能遍历对象，但是可以用Object.getOnwPropertyNames()方法来使得对象能被forEach遍历出来。
Object.getOnwPropertyNames()返回一个数组，成员是参数对象自身全部属性的属性名，不管该属性是否能被遍历。
Object.getOnwPropertyNames(obj).forEach((item,index,arr)={
console.log(item,index,obj[item])
})