JS运动框架之分享侧边栏动画实例
本文实例讲述了JS运动框架之分享侧边栏动画实现方法。分享给大家供大家参考。具体实现方法如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
#div1{
width:319px;
height: 340px;
border: 1px solid #FFF;
position: absolute;
top:100px;
left:-320px;
background-image: url(images/1.png);
background-repeat:no-repeat ;
}
#div1 span{
width:30px;
height: 130px;
border: 1px solid blue;
position: absolute;
right:-23px;
top:95px;
background: red;
font-family: "微软雅黑";
color: #FFFFFF;
text-align: center;
line-height: 40px;
border-radius: 0px 200px 200px 0px;
}
</style>
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementById("div1");
var oSpan=oDiv.getElementsByTagName('span')[0];
var time=null;
var speed=8;
oDiv.onmouseover=function(){//这里给整个div加鼠标移入的事件
clearInterval(time);
time=setInterval(function(){
if(oDiv.offsetLeft>=0){clearInterval(time);}
else{
oDiv.style.left=oDiv.offsetLeft+speed+'px';
}
},1);
}
oDiv.onmouseout=function(){//这里给整个div加鼠标移出事件
clearInterval(time);
time=setInterval(function(){
if(oDiv.offsetLeft<=-320){clearInterval(time);}
else{
oDiv.style.left=oDiv.offsetLeft-speed+'px';
}
},1);
}
}
</script>
</head>
<body>
<div id="div1">
<span>分享到</span>
</div>
</body>
</html>
优化后的代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
#div1{
width:319px;
height: 340px;
border: 1px solid #FFF;
position: absolute;
top:100px;
left:-320px;
background-image: url(images/1.png);
background-repeat:no-repeat ;
}
#div1 span{
width:30px;
height: 130px;
border: 1px solid blue;
position: absolute;
right:-23px;
top:95px;
background: red;
font-family: "微软雅黑";
color: #FFFFFF;
text-align: center;
line-height: 40px;
border-radius: 0px 200px 200px 0px;
}
</style>
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementById("div1");
var oSpan=oDiv.getElementsByTagName('span')[0];
var time=null;
var spe=8;
var speed=null;
function move(bord){
clearInterval(time);
time=setInterval(function(){
if(oDiv.offsetLeft>bord){speed=-spe;}
else{speed=spe;}
if(oDiv.offsetLeft==bord){clearInterval(time);}
else{
oDiv.style.left=oDiv.offsetLeft+speed+'px';
}
},1);
}
oDiv.onmouseover=function(){//这里给整个div加鼠标移入的事件
move(0);
}
oDiv.onmouseout=function(){//这里给整个div加鼠标移出事件
move(-320);
}
}
</script>
</head>
<body>
<div id="div1">
<span>分享到</span>
</div>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。
-
本文向大家介绍JS运动基础框架实例分析，包括了JS运动基础框架实例分析的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了JS运动基础框架。分享给大家供大家参考。具体分析如下： 这里需要注意： 1. 在开始运动时关闭已有的定时器 2. 把运动和停止隔开 希望本文所述对大家的javascript程序设计有所帮助。
-
本文向大家介绍JavaScript中实现无缝滚动、分享到侧边栏实例代码，包括了JavaScript中实现无缝滚动、分享到侧边栏实例代码的使用技巧和注意事项，需要的朋友参考一下 废话不多说，直接给大家贴代码了，代码解决一起问题！ 下面一段代码给大家介绍js无缝滚动实例代码： 代码如下所示： 分享到侧边栏js代码如下所示： 代码如下所示： 以上所述是小编给大家介绍的JavaScript中实现无缝滚动、
-
可以从左侧或者右侧滑出的面板。 使用侧栏 在任何元素上增加 .open-panel 类都可以使它能点击打开侧栏。如果有多个侧栏，你可以通过 data-panel='{panel的选择}'来指定具体打开哪一个侧栏 在任何元素上增加 .close-panel 类都可以使他点击关闭侧栏，因为侧栏只能同时打开一个，所以关闭的时候你不用指定是哪一个侧栏。 可以通过 .panel-left 或者 .panel
-
创建侧边栏对于以下目的很有用： 将 相关文档 分组 为每篇文档 显示一个侧边栏 提供带有 下一页/上一页（next/previous）按钮的 分页导航 要为你的 Docusaurus 网站添加侧边栏的话，需要： 创建一个导出（export） 侧边栏对象（sidebar object） 的文件。 将此对象直接或通过 @docusaurus/preset-classic 传递给 @docusaurus
-
问题内容： 我想在我的WP博客中添加它。这样，每个新的div帖子的边框上都会有此动画。但是问题在于它在SVG中。无论如何，我可以在不使用SVG的情况下使此动画工作，并且我也不想使用javascript。 可以说代码是： 问题答案： CSS可以做到这一点，并且在使用多个背景并使用动画更改其位置时非常简单。 这是一个页面加载后边框连续不断移动的示例。 归功于web-tiki，它有助于修复最初在动画每个
-
我需要一个简单的主div列100%满。 有时会出现一个侧边栏，具有动态宽度。 在这个示例中，您可以看到我无法更改侧栏宽度（每次都有一个新的宽度值），并且我无法将主div“拉伸”到100%的宽度。 怎么办？