<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style>
<!--
*{margin:0;padding:0;}
#wrap{width:400px;height:400px;position:relative;margin:50px auto;}
.content{background:#000;color:#fff;position:absolute;top:0;left:0;width:400px;height:400px;text-align:center;line-height:25px;unselectable:on;-moz-user-select:-moz-none;cursor:pointer;}
-->
</style>
<body>
<div id="wrap">
<div class="content">
1111111111111<br />
1111111111111<br />
1111111111111<br />
1111111111111<br />
1111111111111<br />
1111111111111<br />
1111111111111<br />
1111111111111<br />
1111111111111<br />
</div>
<div class="content">
2222222222222<br />
2222222222222<br />
2222222222222<br />
2222222222222<br />
2222222222222<br />
2222222222222<br />
2222222222222<br />
2222222222222<br />
2222222222222<br />
2222222222222<br />
2222222222222<br />
</div>
<div class="content">
3333333333333<br />
3333333333333<br />
3333333333333<br />
3333333333333<br />
3333333333333<br />
3333333333333<br />
3333333333333<br />
3333333333333<br />
3333333333333<br />
3333333333333<br />
3333333333333<br />
3333333333333<br />
3333333333333<br />
</div>
<div class="content">
4444444444444<br />
4444444444444<br />
4444444444444<br />
4444444444444<br />
4444444444444<br />
4444444444444<br />
4444444444444<br />
4444444444444<br />
4444444444444<br />
4444444444444<br />
4444444444444<br />
</div>
<div class="content">
5555555555555<br />
5555555555555<br />
5555555555555<br />
5555555555555<br />
5555555555555<br />
5555555555555<br />
5555555555555<br />
5555555555555<br />
5555555555555<br />
5555555555555<br />
5555555555555<br />
5555555555555<br />
</div>
<div class="content">
6666666666666<br />
6666666666666<br />
6666666666666<br />
6666666666666<br />
6666666666666<br />
6666666666666<br />
6666666666666<br />
6666666666666<br />
6666666666666<br />
6666666666666<br />
6666666666666<br />
6666666666666<br />
</div>
</div>
<script type="text/javascript">
//通过class选取元素
function getByClass(oParent,sClass)
{
var aEle=oParent.getElementsByTagName('*');
var i=0;
var aResult=[];
var re=new RegExp('\\b'+sClass+'\\b','i'); //去掉class左右的空格
for(i=0;i<aEle.length;i++)
{
if(re.test(aEle[i].className))
{
aResult.push(aEle[i]);
}
}
return aResult;
}
//得到非行间样式
function getStyle(obj,attr)
{
if(obj.currentStyle)//行间样式
{
return obj.currentStyle[attr];
}
else
{
return getComputedStyle(obj,false)[attr]; //非行间样式
}
}
//运动框架
function startMove(obj,json,fn)
{
clearInterval(obj.timer); //先清除所有的运动
obj.timer=setInterval(function(){
var bStop=true; //假设所有的运动都停止了
for(attr in json)
{
//1.去当前值
var iCur=0;
if(attr=='opacity')
{
iCur=parseInt(parseFloat(getStyle(obj,attr))*100);
}
else
{
iCur=parseInt(getStyle(obj,attr));
}
//2.计算速度
var iSpeed=(json[attr]-iCur)/8;
iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
//3.检测停止
if(iCur!=json[attr])
{
bStop=false; //假设有一项运动没有完成,则不停止
}
if(attr=='opacity')
{
obj.style.filter='alpha(opacity='+(iCur+iSpeed)+')';
obj.style.opacity=(iCur+iSpeed)/100;
}
else
{
obj.style[attr]=iCur+iSpeed+'px';
}
}
if(bStop)
{
clearInterval(obj.timer);
if(fn)
{
fn();
}
}
},20)
}
function drag(id)
{
var oWrap=document.getElementById(id);
var aContent=getByClass(oWrap,'content');
var i=0;
for(i=0;i<aContent.length;i++)
{
aContent[i].index=i;
aContent[i].onmousedown=function(ev)
{
var oEvent=ev||event;
var _this=this;
var disX=oEvent.clientX-_this.offsetLeft;
document.onmousemove=function(ev)
{
var oEvent=ev||event;
if(_this.offsetLeft>oEvent.clientX-disX)
{
startMove(_this,{left:-(_this.offsetWidth/2+100),},function(){
if(_this.index==0)
{
divHide(_this.index);
aContent[aContent.length-1].style.zIndex=1;
startMove(_this,{left:0});
}
else
{
divHide();
aContent[_this.index-1].style.zIndex = 1;
startMove(_this,{left:0})
}
});
}
else if(_this.offsetLeft<oEvent.clientX-disX)
{
startMove(_this,{left:_this.offsetWidth/2+100},function(){
if(_this.index==aContent.length-1)
{
divHide();
aContent[0].style.zIndex=1;
startMove(_this,{left:0});
}
else
{
divHide();
aContent[_this.index + 1].style.zIndex = 1;
startMove(_this,{left:0});
}
})
}
}
document.onmouseup=function()
{
document.onmousemove=null;
document.onmousedown=null;
}
}
}
function divHide()
{
for(var i=0;i<aContent.length;i++)
{
aContent[i].style.zIndex=0;
}
}
}
window.onload=function()
{
drag('wrap');
}
</script>
</body>
</html>
问题就是左右拖动的时候那个666666的页面总会先闪一下
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style>
<!--
*{margin:0;padding:0;}
#wrap{width:400px;height:400px;position:relative;margin:50px auto;}
.content{background:#000;color:#fff;position:absolute;top:0;left:0;width:400px;height:400px;text-align:center;line-height:25px;unselectable:on;-moz-user-select:-moz-none;cursor:pointer;}
-->
</style>
<body>
<div id="wrap">
<div class="content">
1111111111111<br />
1111111111111<br />
1111111111111<br />
1111111111111<br />
1111111111111<br />
1111111111111<br />
1111111111111<br />
1111111111111<br />
1111111111111<br />
</div>
<div class="content">
2222222222222<br />
2222222222222<br />
2222222222222<br />
2222222222222<br />
2222222222222<br />
2222222222222<br />
2222222222222<br />
2222222222222<br />
2222222222222<br />
2222222222222<br />
2222222222222<br />
</div>
<div class="content">
3333333333333<br />
3333333333333<br />
3333333333333<br />
3333333333333<br />
3333333333333<br />
3333333333333<br />
3333333333333<br />
3333333333333<br />
3333333333333<br />
3333333333333<br />
3333333333333<br />
3333333333333<br />
3333333333333<br />
</div>
<div class="content">
4444444444444<br />
4444444444444<br />
4444444444444<br />
4444444444444<br />
4444444444444<br />
4444444444444<br />
4444444444444<br />
4444444444444<br />
4444444444444<br />
4444444444444<br />
4444444444444<br />
</div>
<div class="content">
5555555555555<br />
5555555555555<br />
5555555555555<br />
5555555555555<br />
5555555555555<br />
5555555555555<br />
5555555555555<br />
5555555555555<br />
5555555555555<br />
5555555555555<br />
5555555555555<br />
5555555555555<br />
</div>
<div class="content">
6666666666666<br />
6666666666666<br />
6666666666666<br />
6666666666666<br />
6666666666666<br />
6666666666666<br />
6666666666666<br />
6666666666666<br />
6666666666666<br />
6666666666666<br />
6666666666666<br />
6666666666666<br />
</div>
</div>
<script type="text/javascript">
//通过class选取元素
function getByClass(oParent,sClass)
{
var aEle=oParent.getElementsByTagName('*');
var i=0;
var aResult=[];
var re=new RegExp('\\b'+sClass+'\\b','i'); //去掉class左右的空格
for(i=0;i<aEle.length;i++)
{
if(re.test(aEle[i].className))
{
aResult.push(aEle[i]);
}
}
return aResult;
}
//得到非行间样式
function getStyle(obj,attr)
{
if(obj.currentStyle)//行间样式
{
return obj.currentStyle[attr];
}
else
{
return getComputedStyle(obj,false)[attr]; //非行间样式
}
}
//运动框架
function startMove(obj,json,fn)
{
clearInterval(obj.timer); //先清除所有的运动
obj.timer=setInterval(function(){
var bStop=true; //假设所有的运动都停止了
for(attr in json)
{
//1.去当前值
var iCur=0;
if(attr=='opacity')
{
iCur=parseInt(parseFloat(getStyle(obj,attr))*100);
}
else
{
iCur=parseInt(getStyle(obj,attr));
}
//2.计算速度
var iSpeed=(json[attr]-iCur)/8;
iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
//3.检测停止
if(iCur!=json[attr])
{
bStop=false; //假设有一项运动没有完成,则不停止
}
if(attr=='opacity')
{
obj.style.filter='alpha(opacity='+(iCur+iSpeed)+')';
obj.style.opacity=(iCur+iSpeed)/100;
}
else
{
obj.style[attr]=iCur+iSpeed+'px';
}
}
if(bStop)
{
clearInterval(obj.timer);
if(fn)
{
fn();
}
}
},20)
}
function drag(id)
{
var oWrap=document.getElementById(id);
var aContent=getByClass(oWrap,'content');
var i=0;
for(i=0;i<aContent.length;i++)
{
aContent[i].index=i;
aContent[i].onmousedown=function(ev)
{
var oEvent=ev||event;
var _this=this;
var disX=oEvent.clientX-_this.offsetLeft;
document.onmousemove=function(ev)
{
var oEvent=ev||event;
if(_this.offsetLeft>oEvent.clientX-disX)
{
startMove(_this,{left:-(_this.offsetWidth/2+100),},function(){
if(_this.index==0)
{
divHide(_this.index);
aContent[aContent.length-1].style.zIndex=1;
startMove(_this,{left:0});
}
else
{
divHide();
aContent[_this.index-1].style.zIndex = 1;
startMove(_this,{left:0})
}
});
}
else if(_this.offsetLeft<oEvent.clientX-disX)
{
startMove(_this,{left:_this.offsetWidth/2+100},function(){
if(_this.index==aContent.length-1)
{
divHide();
aContent[0].style.zIndex=1;
startMove(_this,{left:0});
}
else
{
divHide();
aContent[_this.index + 1].style.zIndex = 1;
startMove(_this,{left:0});
}
})
}
}
document.onmouseup=function()
{
document.onmousemove=null;
document.onmousedown=null;
}
}
}
function divHide()
{
for(var i=0;i<aContent.length;i++)
{
aContent[i].style.zIndex=0;
}
}
}
window.onload=function()
{
drag('wrap');
}
</script>
</body>
</html>
问题就是左右拖动的时候那个666666的页面总会先闪一下
解决方案 »
- js可以传递querystring值吗?
- 关于DIV嵌套onmouseout事件
- js 自定date对象getSecond不变问题
- 用一个变量,保存动态定义的函数,为何用toString()方法显示这个变量的代码,函数名称不对呢?
- JS 给表添加行
- 关于分页问题,向大家求教
- 为什么window.open(param1,param2,param3)中第二个参数的问题?
- a target的问题。。。
- 关于网页被覆盖的问题,急呀!
- 为什么了现在的网页代码这么难看懂呢
- 做可视化HtmlEditor,怎样得到选中的对象,如图片,然后右键弹出个层设置图片的属性?
- 通过子元素选择器,为什么不能选择Table下面的所有tr?
这样的话肯定是最后一张6666必定在所有0中是具有最高优先权显示出来的.以上是原因
解决方法是: 每个content都应该有不同z-index, 并且每次事件中最新的z-index为(最大zIndex+1)不需要完美的,忽略以下
对解决方法的补充: 基本上上面的方法就能搞定了, 防止出现变态的不停的点,导致zIndex无比巨大情况.
只要判断zIndex到达一定值, 跟换一批z-index就可以了.(是一批, 不是一个)
但是感觉这样会更加的繁琐
想不透
所以用的这个方法
现在左移没有问题了
问题都出在了右移
我设置了zIndex=2或者1
这样有个落差
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style>
<!--
*{margin:0;padding:0;}
#wrap{width:400px;height:400px;position:relative;margin:50px auto;}
.content{background:#000;color:#fff;position:absolute;top:0;left:0;width:400px;height:400px;text-align:center;line-height:25px;unselectable:on;-moz-user-select:-moz-none;cursor:pointer;}
-->
</style>
<body>
<div id="wrap">
<div class="content">
1111111111111<br />
1111111111111<br />
1111111111111<br />
1111111111111<br />
1111111111111<br />
1111111111111<br />
1111111111111<br />
1111111111111<br />
1111111111111<br />
</div>
<div class="content">
2222222222222<br />
2222222222222<br />
2222222222222<br />
2222222222222<br />
2222222222222<br />
2222222222222<br />
2222222222222<br />
2222222222222<br />
2222222222222<br />
2222222222222<br />
2222222222222<br />
</div>
<div class="content">
3333333333333<br />
3333333333333<br />
3333333333333<br />
3333333333333<br />
3333333333333<br />
3333333333333<br />
3333333333333<br />
3333333333333<br />
3333333333333<br />
3333333333333<br />
3333333333333<br />
3333333333333<br />
3333333333333<br />
</div>
<div class="content">
4444444444444<br />
4444444444444<br />
4444444444444<br />
4444444444444<br />
4444444444444<br />
4444444444444<br />
4444444444444<br />
4444444444444<br />
4444444444444<br />
4444444444444<br />
4444444444444<br />
</div>
<div class="content">
5555555555555<br />
5555555555555<br />
5555555555555<br />
5555555555555<br />
5555555555555<br />
5555555555555<br />
5555555555555<br />
5555555555555<br />
5555555555555<br />
5555555555555<br />
5555555555555<br />
5555555555555<br />
</div>
<div class="content">
6666666666666<br />
6666666666666<br />
6666666666666<br />
6666666666666<br />
6666666666666<br />
6666666666666<br />
6666666666666<br />
6666666666666<br />
6666666666666<br />
6666666666666<br />
6666666666666<br />
6666666666666<br />
</div>
</div>
<script type="text/javascript">
//通过class选取元素
function getByClass(oParent,sClass)
{
var aEle=oParent.getElementsByTagName('*');
var i=0;
var aResult=[];
var re=new RegExp('\\b'+sClass+'\\b','i'); //去掉class左右的空格
for(i=0;i<aEle.length;i++)
{
if(re.test(aEle[i].className))
{
aResult.push(aEle[i]);
}
}
return aResult;
}
//得到非行间样式
function getStyle(obj,attr)
{
if(obj.currentStyle)//行间样式
{
return obj.currentStyle[attr];
}
else
{
return getComputedStyle(obj,false)[attr]; //非行间样式
}
}
//运动框架
function startMove(obj,json,fn)
{
clearInterval(obj.timer); //先清除所有的运动
obj.timer=setInterval(function(){
var bStop=true; //假设所有的运动都停止了
for(attr in json)
{
//1.去当前值
var iCur=0;
if(attr=='opacity')
{
iCur=parseInt(parseFloat(getStyle(obj,attr))*100);
}
else
{
iCur=parseInt(getStyle(obj,attr));
}
//2.计算速度
var iSpeed=(json[attr]-iCur)/8;
iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
//3.检测停止
if(iCur!=json[attr])
{
bStop=false; //假设有一项运动没有完成,则不停止
}
if(attr=='opacity')
{
obj.style.filter='alpha(opacity='+(iCur+iSpeed)+')';
obj.style.opacity=(iCur+iSpeed)/100;
}
else
{
obj.style[attr]=iCur+iSpeed+'px';
}
}
if(bStop)
{
clearInterval(obj.timer);
if(fn)
{
fn();
}
}
},20)
}
function drag(id)
{
var oWrap=document.getElementById(id);
var aContent=getByClass(oWrap,'content');
var i=0;
for(i=0;i<aContent.length;i++)
{
aContent[i].index=i;
aContent[i].onmousedown=function(ev)
{
var oEvent=ev||event;
var _this=this;
var disX=oEvent.clientX-_this.offsetLeft;
document.onmousemove=function(ev)
{
var oEvent=ev||event;
if(_this.offsetLeft>oEvent.clientX-disX)
{
startMove(_this,{left:-(_this.offsetWidth/2+100),},function(){
if(_this.index==0)
{
divHide();
aContent[aContent.length-1].style.zIndex=1;
startMove(_this,{left:0});
}
else
{
divHide();
if(_this.index-2>=0)
{
aContent[_this.index-1].style.zIndex = 2;
aContent[_this.index-2].style.zIndex = 1;
}
else
{
aContent[_this.index-1].style.zIndex = 2;
aContent[aContent.length-1].style.zIndex = 1;
}
startMove(_this,{left:0})
}
});
}
else if(_this.offsetLeft<oEvent.clientX-disX)
{
startMove(_this,{left:_this.offsetWidth/2+100},function(){
if(_this.index==aContent.length-1)
{
divHide();
aContent[0].style.zIndex=2;
aContent[1].style.zIndex=1;
startMove(_this,{left:0});
}
else
{
divHide();
if(_this.index+2<=(aContent.length-1))
{
aContent[_this.index+1].style.zIndex =2;
aContent[_this.index+2].style.zIndex = 1;
}
else
{
aContent[_this.index+1].style.zIndex = 2;
aContent[0].style.zIndex = 1;
}
startMove(_this,{left:0})
}
})
}
}
document.onmouseup=function()
{
document.onmousemove=null;
document.onmousedown=null;
}
}
}
function divHide()
{
for(var i=0;i<aContent.length;i++)
{
aContent[i].style.zIndex=0;
}
}
}
window.onload=function()
{
drag('wrap');
}
</script>
</body>
</html>左移已经没有问题了
问题是右移
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style type="text/css">
body{margin:0;padding:0;text-align: center}
#wrap{width:400px;height:400px;position:relative;margin:50px auto;}
.content{background:#000;color:#fff;position:absolute;top:0;left:0;width:400px;height:400px;text-align:center;line-height:25px;unselectable:on;-moz-user-select:-moz-none;cursor:pointer;border: 1px solid #fff}
</style>
<body>
<div id="wrap">
<div class="content">
1111111111111<br />
1111111111111<br />
1111111111111<br />
1111111111111<br />
1111111111111<br />
1111111111111<br />
1111111111111<br />
1111111111111<br />
1111111111111<br />
</div>
<div class="content">
2222222222222<br />
2222222222222<br />
2222222222222<br />
2222222222222<br />
2222222222222<br />
2222222222222<br />
2222222222222<br />
2222222222222<br />
2222222222222<br />
2222222222222<br />
2222222222222<br />
</div>
<div class="content">
3333333333333<br />
3333333333333<br />
3333333333333<br />
3333333333333<br />
3333333333333<br />
3333333333333<br />
3333333333333<br />
3333333333333<br />
3333333333333<br />
3333333333333<br />
3333333333333<br />
3333333333333<br />
3333333333333<br />
</div>
<div class="content">
4444444444444<br />
4444444444444<br />
4444444444444<br />
4444444444444<br />
4444444444444<br />
4444444444444<br />
4444444444444<br />
4444444444444<br />
4444444444444<br />
4444444444444<br />
4444444444444<br />
</div>
<div class="content">
5555555555555<br />
5555555555555<br />
5555555555555<br />
5555555555555<br />
5555555555555<br />
5555555555555<br />
5555555555555<br />
5555555555555<br />
5555555555555<br />
5555555555555<br />
5555555555555<br />
5555555555555<br />
</div>
<div class="content">
6666666666666<br />
6666666666666<br />
6666666666666<br />
6666666666666<br />
6666666666666<br />
6666666666666<br />
6666666666666<br />
6666666666666<br />
6666666666666<br />
6666666666666<br />
6666666666666<br />
6666666666666<br />
</div>
</div>
<script type="text/javascript">
//通过class选取元素
function getByClass(oParent,sClass){
var aEle=oParent.getElementsByTagName('*');
var aResult=[];
var re=new RegExp('\\b'+sClass+'\\b','i'); //去掉class左右的空格
for(var i=0;i<aEle.length;i++){
if(re.test(aEle[i].className)){
aResult.push(aEle[i]);
}
}
return aResult;
}
//得到样式
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
}
function drag(id){
var oWrap=document.getElementById(id);
var aContent=getByClass(oWrap,'content');
function cut(b,n){
n+=b;
if(n<0)n=aContent.length-1;
if(n>aContent.length-1)n=0;
for(var i=0;i<aContent.length;i++){
if(i==n){
aContent[i].style.zIndex=2;
}else if(i!=b){
aContent[i].style.zIndex=1;
}
}
}
function move(obj,x){
obj.style.border="1px solid #ff3300";
var i=x>0?-5:5;
var st=null,_x=Math.floor(x);
if(Math.abs(x)>200){
obj.style.zIndex=1;
}else{
//需要返回原点
obj.style.filter="alpha(opacity=100)";
obj.style.opacity=1;
}
function b(){
_x+=i;
obj.style.left=_x+"px";
if(Math.abs(_x)<10){
clearInterval(st);
obj.style.left=0;
obj.style.filter="alpha(opacity=100)";
obj.style.opacity=1;
obj.style.border="1px solid #fff";
obj.move=false;
}
}
st=setInterval(b,20);
}
for(var i=0;i<aContent.length;i++){
aContent[i].index=i;
aContent[i].move=false;
aContent[i].onmousedown=function(ev){
if(this.move)return false;
this.move=true;
var oEvent=ev||event;
var _this=this, x,direction="";
var disX=oEvent.clientX-_this.offsetLeft;
//_this.style.filter="alpha(opacity=50)";
//_this.style.opacity=0.5;
_this.style.border="1px solid red";
_this.style.zIndex=3;
document.onmousemove=function(ev){
var oEvent=ev||event;
x=oEvent.clientX - disX;//x坐标位移量
_this.style.left = x + "px";//移动中
if(x<0&&direction!="left"){
direction="left";
cut(_this.index,1);
}else if(x>0&&direction!="right"){
direction="right";
cut(_this.index,-1);
}
document.onmouseup=function(){
move(_this,x);
document.onmousemove = document.onmouseup = null;
};
}; }
}
}
window.onload=function(){
drag('wrap');
}
</script>
</body>
</html>