一个JS平滑效果 当鼠标放在一个DIV上,让这个DIV从左边平滑出来的例子有没有啊?这个DIV要绝对定位的。最好可以从某一点滑动出来。 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 <script> function ddd(obj, sType) { var oDiv = document.getElementById(obj); if (sType == 'show') { oDiv.style.display = 'block';} if (sType == 'hide') { oDiv.style.display = 'none';} }</script><a href="#" onmouseover="ddd('aa', 'show');" onmouseout="ddd('aa', 'hide');">鼠标</a> <div style="display:none;" id="aa"> 1 2 3 4 5 </div> 谢谢,这个不符合,DIV要绝对定位,要有平滑的效果,你这个是隐藏。 <!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" /><link rel="stylesheet" href="css/style.css" type="text/css" id="cssStyle"/><style>.list{position:relative;;background:#eee;border:1px #ccc solid;margin:10px;height:30px;width:100px;cursor :pointer ;}.listShow{position:relative;background:#eff;border:1px #ddd solid;margin:10px;height:30px;width:100px;cursor :pointer ;}.comment{position:absolute;left:0;display:none;position:absolute;border:1px #ccc solid;background:#fee;width:200px;height:200px;overflow:hidden;z-index:100;}</style></head><body><div class="" id="show">0</div><div class="list" id="list1">1<div class="comment" id="comment1">aaaaaaaaaaaaffffffffff<br/>ddddddddddddddddd<br/>ddddddddddddd<br/>dddddddddd<br/>aaaaa</div></div><div class="list" id="list2">2<div class="comment" id="comment2">aaaaaaaaaaaaaaaaa</div></div><div class="list" id="list3">3<div class="comment" id="comment3">aaaaaaaaaaaaaaaaa</div></div><div class="list" id="list4">4<div class="comment" id="comment4">aaaaaaaaaaaaaaaaa</div></div><div class="list" id="list5">5<div class="comment" id="comment5">aaaaaaaaaaaaaaaaa</div></div><div class="list" id="list6">6<div class="comment" id="comment6">aaaaaaaaaaaaaaaaa</div></div></body></html><script>var zindex=0;function $id(id){return document.getElementById(id);}var Bind = function(object,fun){var args = Array.prototype.slice.call(arguments).slice(2);return function(){return fun.apply(object,args);}}function addEventHandler(oTarget, sEventType, fnHandler){if(oTarget.addEventListener){oTarget.addEventListener(sEventType, fnHandler, false);}else if(oTarget.attachEvent){oTarget.attachEvent('on' + sEventType, fnHandler);}else{oTarget['on' + sEventType] = fnHandler;}}var Shower=function(){this.list=null;this.comment=null;this.moveLeft=80; //弹出div的水平偏移距离this.moveTop=20; //弹出div的竖直偏移距离this.height=150; //弹出div的高this.width=250; //弹出div的宽this.time=800; //弹出div所用时间this.init=function(lisObj,comObj){this.list=lisObj;this.comment=comObj;var _this=this;this._fnMove=Bind(this,this.move);(function(){var obj=_this;addEventHandler(obj.list,"click",obj._fnMove);})();};this.move=function(){var _this=this;var w=0; //水平偏移var h=0; //竖直偏移var height=0; //弹出div的高var width=0; //弹出div的宽var t=0;var startTime = new Date().getTime();//开始执行的时间if(!_this.comment.style.display||_this.comment.style.display=="none"){_this.comment.style.display="block";_this.comment.style.height=0+"px";_this.comment.style.width=0+"px";_this.list.style.zIndex=++zindex;_this.list.className="listShow";var comment=_this.comment.innerHTML;_this.comment.innerHTML=""; //去掉显示内容var timer=setInterval(function(){var newTime = new Date().getTime();var timestamp = newTime - startTime;_this.comment.style.left=Math.ceil(w)+"px";_this.comment.style.top=Math.ceil(h)+"px";_this.comment.style.height=height+"px";_this.comment.style.width=width+"px";t++;var change=(Math.pow((timestamp/_this.time-1), 3) +1); //根据运行时间得到基础变化量w=_this.moveLeft*change;h=_this.moveTop*change;height=_this.height*change;width=_this.width*change;$id("show").innerHTML=w;if(w>_this.moveLeft){clearInterval(timer);_this.comment.style.left=_this.moveLeft+"px";_this.comment.style.top=_this.moveTop+"px";_this.comment.style.height=_this.height+"px";_this.comment.style.width=_this.width+"px";_this.comment.innerHTML=comment; //回复显示内容}},1,_this.comment);}else{_this.hidden();}}this.hidden=function(){var _this=this;var flag=1;var hiddenTimer=setInterval(function(){if(flag==1){_this.comment.style.height=parseInt(_this.comment.style.height)-10+"px";}else{_this.comment.style.width=parseInt(_this.comment.style.width)-15+"px";_this.comment.style.left=parseInt(_this.comment.style.left)+5+"px";}if(flag==1 && parseInt(_this.comment.style.height)<10){flag=-flag;}if(parseInt(_this.comment.style.width)<20){clearInterval(hiddenTimer);_this.comment.style.left="0px";_this.comment.style.top="0px";_this.comment.style.height="0px";_this.comment.style.width="0px";_this.comment.style.display="none";if(_this.list.style.zIndex==zindex){zindex--;};_this.list.style.zIndex=0;_this.list.className="list";}},1)}}window.onload=function(){//建立各个菜单对象var shower1=new Shower();shower1.init($id("list1"),$id("comment1"));var shower2=new Shower();shower2.init($id("list2"),$id("comment2"));var shower3=new Shower();shower3.init($id("list3"),$id("comment3"));var shower4=new Shower();shower4.init($id("list4"),$id("comment4"));var shower5=new Shower();shower5.init($id("list5"),$id("comment5"));var shower6=new Shower();shower6.init($id("list6"),$id("comment6"));}</script>你要的是这个效果嘛- -? 不明白你的意思,如果当前的div是隐藏的,怎么才能把鼠标移上去?能不能把问题说清楚。 <script type="text/javascript" src="js/jq.js"></script> <script type="text/javascript"> <!-- $(document).ready( function(){ $("#kk").hover(function(){$(this).animate({left:"400px"},1000)},function(){$(this).animate({left:"480px"},1000)}) } ); //--> </script> </head> <body> <div id="" style="position:relative;width:500px;overflow:hidden;border:1px solid #ff0000;height:35px;"> <div id="kk" style="position:absolute;width:100px;left:480px;background-color:#333333;color:#fff;">hello</div> </div> </body> 页面加载就去掉body style的属性 进入一个页面后 自动刷新一次的js代码如何写 字符串处理 array al = aa.split(".")出错,请高手指点下 [急]麻烦大家推荐一本javascript方面较好的书籍. 怎样用javascript判断输入的用户名只能是英文和数字的结合? 如何使用 粘帖 ?---在线求助 求简单左侧菜单!!! 有人知道条码扫描器的keyCode是多少么? 谢谢,帮我 我想用javascriopt做一个浏览器以取代IE,并且去掉右上角的几个按钮,有这个可能吗? 请教FCK2.6 未知工具栏问题 dojo订阅-发布事件 -在线等
<script>
function ddd(obj, sType) {
var oDiv = document.getElementById(obj);
if (sType == 'show') { oDiv.style.display = 'block';}
if (sType == 'hide') { oDiv.style.display = 'none';}
}
</script>
<a href="#" onmouseover="ddd('aa', 'show');" onmouseout="ddd('aa', 'hide');">鼠标</a>
<div style="display:none;" id="aa">
1
2
3
4
5
</div>
谢谢,这个不符合,DIV要绝对定位,要有平滑的效果,你这个是隐藏。
<!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" />
<link rel="stylesheet" href="css/style.css" type="text/css" id="cssStyle"/>
<style>
.list{
position:relative;;
background:#eee;
border:1px #ccc solid;
margin:10px;
height:30px;
width:100px;
cursor :pointer ;
}
.listShow{
position:relative;
background:#eff;
border:1px #ddd solid;
margin:10px;
height:30px;
width:100px;
cursor :pointer ;
}
.comment{
position:absolute;
left:0;
display:none;
position:absolute;
border:1px #ccc solid;
background:#fee;
width:200px;
height:200px;
overflow:hidden;
z-index:100;
}
</style>
</head>
<body>
<div class="" id="show">
0
</div>
<div class="list" id="list1">1
<div class="comment" id="comment1">aaaaaaaaaaaaffffffffff<br/>
ddddddddddddddddd<br/>
ddddddddddddd<br/>
dddddddddd<br/>
aaaaa</div>
</div>
<div class="list" id="list2">2
<div class="comment" id="comment2">aaaaaaaaaaaaaaaaa</div>
</div>
<div class="list" id="list3">3
<div class="comment" id="comment3">aaaaaaaaaaaaaaaaa</div>
</div>
<div class="list" id="list4">4
<div class="comment" id="comment4">aaaaaaaaaaaaaaaaa</div>
</div>
<div class="list" id="list5">5
<div class="comment" id="comment5">aaaaaaaaaaaaaaaaa</div>
</div>
<div class="list" id="list6">6
<div class="comment" id="comment6">aaaaaaaaaaaaaaaaa</div>
</div>
</body>
</html>
<script>
var zindex=0;
function $id(id){
return document.getElementById(id);
}
var Bind = function(object,fun){
var args = Array.prototype.slice.call(arguments).slice(2);
return function(){
return fun.apply(object,args);
}
}
function addEventHandler(oTarget, sEventType, fnHandler){
if(oTarget.addEventListener){oTarget.addEventListener(sEventType, fnHandler, false);}
else if(oTarget.attachEvent){oTarget.attachEvent('on' + sEventType, fnHandler);}
else{oTarget['on' + sEventType] = fnHandler;}
}
var Shower=function(){
this.list=null;
this.comment=null;
this.moveLeft=80; //弹出div的水平偏移距离
this.moveTop=20; //弹出div的竖直偏移距离
this.height=150; //弹出div的高
this.width=250; //弹出div的宽
this.time=800; //弹出div所用时间
this.init=function(lisObj,comObj){
this.list=lisObj;
this.comment=comObj;
var _this=this;
this._fnMove=Bind(this,this.move);
(function(){
var obj=_this;
addEventHandler(obj.list,"click",obj._fnMove);
})();
};
this.move=function(){
var _this=this;
var w=0; //水平偏移
var h=0; //竖直偏移
var height=0; //弹出div的高
var width=0; //弹出div的宽
var t=0;
var startTime = new Date().getTime();//开始执行的时间
if(!_this.comment.style.display||_this.comment.style.display=="none"){
_this.comment.style.display="block";
_this.comment.style.height=0+"px";
_this.comment.style.width=0+"px";
_this.list.style.zIndex=++zindex;
_this.list.className="listShow";
var comment=_this.comment.innerHTML;
_this.comment.innerHTML=""; //去掉显示内容
var timer=setInterval(function(){
var newTime = new Date().getTime();
var timestamp = newTime - startTime;
_this.comment.style.left=Math.ceil(w)+"px";
_this.comment.style.top=Math.ceil(h)+"px";
_this.comment.style.height=height+"px";
_this.comment.style.width=width+"px";
t++;
var change=(Math.pow((timestamp/_this.time-1), 3) +1); //根据运行时间得到基础变化量
w=_this.moveLeft*change;
h=_this.moveTop*change;
height=_this.height*change;
width=_this.width*change;
$id("show").innerHTML=w;
if(w>_this.moveLeft){
clearInterval(timer);
_this.comment.style.left=_this.moveLeft+"px";
_this.comment.style.top=_this.moveTop+"px";
_this.comment.style.height=_this.height+"px";
_this.comment.style.width=_this.width+"px";
_this.comment.innerHTML=comment; //回复显示内容
}
},1,_this.comment);
}else{
_this.hidden();
}
}
this.hidden=function(){
var _this=this;
var flag=1;
var hiddenTimer=setInterval(function(){
if(flag==1){
_this.comment.style.height=parseInt(_this.comment.style.height)-10+"px";
}else{
_this.comment.style.width=parseInt(_this.comment.style.width)-15+"px";
_this.comment.style.left=parseInt(_this.comment.style.left)+5+"px";
}
if(flag==1 && parseInt(_this.comment.style.height)<10){
flag=-flag;
}
if(parseInt(_this.comment.style.width)<20){
clearInterval(hiddenTimer);
_this.comment.style.left="0px";
_this.comment.style.top="0px";
_this.comment.style.height="0px";
_this.comment.style.width="0px";
_this.comment.style.display="none";
if(_this.list.style.zIndex==zindex){
zindex--;
};
_this.list.style.zIndex=0;
_this.list.className="list";
}
},1)
}
}
window.onload=function(){
//建立各个菜单对象
var shower1=new Shower();
shower1.init($id("list1"),$id("comment1"));
var shower2=new Shower();
shower2.init($id("list2"),$id("comment2"));
var shower3=new Shower();
shower3.init($id("list3"),$id("comment3"));
var shower4=new Shower();
shower4.init($id("list4"),$id("comment4"));
var shower5=new Shower();
shower5.init($id("list5"),$id("comment5"));
var shower6=new Shower();
shower6.init($id("list6"),$id("comment6"));
}
</script>你要的是这个效果嘛- -?
<script type="text/javascript">
<!--
$(document).ready(
function(){
$("#kk").hover(function(){$(this).animate({left:"400px"},1000)},function(){$(this).animate({left:"480px"},1000)})
}
);
//-->
</script>
</head> <body>
<div id="" style="position:relative;width:500px;overflow:hidden;border:1px solid #ff0000;height:35px;">
<div id="kk" style="position:absolute;width:100px;left:480px;background-color:#333333;color:#fff;">hello</div>
</div>
</body>