html结构 首页 登录 分类查询 分类查询 分类查询 分类查询 分类查询 分类查询 分类查询 分类查询 掌上秒杀 0 0 : 0 0 : 0 0 更多 ¥10.00 ¥100.00 ¥10.00 ¥100.00 ¥10.00 ¥100.00 京东超市 京东超市
首页
登录
-
¥10.00
¥100.00
-
¥10.00
¥100.00
-
¥10.00
¥100.00
京东超市
京东超市
京东超市
/*定义一个全局变量*/
window.itcast = {};/*存储 我们将要封装的 事件方法*/
/*设置 属性 定义一个 transitionEnd 一个事件绑定方法*/
itcast.transitionEnd = function (dom, callback) {
/*过渡结束事件的绑定*/
/*
* 1.谁需要绑定 transitionEnd
* 2.需要处理的函数
* */
if (dom && typeof dom === 'object') {
dom.addEventListener('transitionEnd', function () {
/* if(callback){
callback();
}*/
callback && callback();
});
dom.addEventListener('webkitTransitionEnd', function () {
callback && callback();
});
}
}
index.js
"use strict"
window onload= function () {
search();banner();
}
function search() {
var searchBox = document.querySelector(".jd_header_box");
var banner=document.querySelector(".jd_banner");
var high=sbanner.offsetHight;
window.onscroll=function(){
var top=document.body.scrollTop;
var opacity=0;
if(top>high){
opacity=1
}else{
opacity=top/high;
}
searchBox.style.background="rgba(201,21,35,"+opacity+")";
}
}
function banner(){
var banner=document.querySelector(".jd_banner");
var img=document.querySelector(".clearfix");
var point=banner.chilrden[1].querySelector("li");
var wid=banner.offsetWidth;
var addTransition=function(){
img.style.transition="all 0.3s";
img.style.webkitTransiton="all 0.3s";
};
var addTranslateX=function(translateX){
img.style.translateX="(translateX "+translateX+"px)";
};
var removeTransition=function(){
img.style.transiton="";
};
var index=1;
var timer=setInterval(function(){
index++;
addTransition();
addTranslateX(-index*wid);
},2000);
itcast.transitionEnd=(img,function(){
if(index>=9){
index=1;
}else if(index<=0){
index=8;
}
addTransition();addTranslateX(-index*wid);
point();
})
function point(){
for(var i=0;i
wid/3)){
if(realX》0){
index--;
}else{
index++;
}
addTransition():addTranslateX(-index*wid);
}else {
addTransition():addTranslateX(-index*wid);
}
startX=0,moveX=0,realX=0,isMove=false;
timer=setInterval(function(){
addTransition();addTranslateX(-index*wid);
},2000);
})
}