JavaScript中实现无缝滚动、分享到侧边栏实例代码


Posted in Javascript onApril 06, 2016

废话不多说,直接给大家贴代码了,代码解决一起问题!

下面一段代码给大家介绍js无缝滚动实例代码:

代码如下所示:

<!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>
<style>
*{margin:0px;
padding:0px;}
#div1{width:830px; height:166px; margin:50px auto;
position:relative;
background:white;
overflow:hidden;}
#div1 ul li{float:left; width:174px; height:166px; list-style:none;
}
ul{position:absolute;}
</style>
<script>
window.onload=function(){
var oDiv=document.getElementById('div1');
var oUl=oDiv.getElementsByTagName('ul')[0];
var aLi=oUl.getElementsByTagName('li');
var speed=3
oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;
oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';
function move (){
if(oUl.offsetLeft<-oUl.offsetWidth/2)
{
oUl.style.left='0';
}
if(oUl.offsetLeft>0)
{
oUl.style.left=-oUl.offsetWidth/2+'px';
}
oUl.style.left=oUl.offsetLeft+speed+'px';
};
var timer=setInterval(move,30);
oDiv.onmouseover=function(){
clearInterval(timer);
};
oDiv.onmouseout=function(){
timer=setInterval(move,30);
}
document.getElementsByTagName('a')[0].onclick=function(){
speed=-3;
};
document.getElementsByTagName('a')[1].onclick=function(){
speed=3;
};
};
</script>
</head>
<body>
<a href="javascipt:;">向左走</a>
<a href="javascipt:;">向右走</a>
<div id="div1">
<ul>
<li><img src="images/b01.jpg" /></li>
<li><img src="images/b02.jpg" /></li>
<li><img src="images/b03.jpg" /></li>
<li><img src="images/b04.jpg" /></li>
<li><img src="images/b05.jpg" /></li>
</ul>
</div>
</body>
</html>

分享到侧边栏js代码如下所示:

代码如下所示:

<!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>
<style>
#div1{width:100px; height:150px; background:#0F0; position:absolute; left:-100px;}
#div1 span{position:absolute; width:20px; height:60px; line-height:20px; background:#00F; right:-20px; top:50px;}
</style>
<script>
window.onload=function(){
var oDiv=document.getElementById('div1');
oDiv.onmouseover=function(){
startMove(10,0);
}
oDiv.onmouseout =function(){
startMove(-10,-100);
}
}
var timer=null;
function startMove(speed,locall){
var oDiv=document.getElementById('div1');
clearInterval(timer);
timer=setInterval(function(){
if(oDiv.offsetLeft==locall){
clearInterval(timer);
}
else{
oDiv.style.left=oDiv.offsetLeft+speed+'px'; 
}
},30);
}
</script>
</head>
<body>
<div id="div1">
<span>分享到</span>
</div>
</body>
</html>

以上所述是小编给大家介绍的JavaScript中实现无缝滚动、分享到侧边栏实例代码,代码简单易懂,有疑问欢迎给我留言,小编及时给您答复!

Javascript 相关文章推荐
基于jquery的无缝循环新闻列表插件
Mar 07 Javascript
检测input每次的输入是否合法遇到汉字输入就有问题
May 23 Javascript
extjs render 用法介绍
Sep 11 Javascript
Javascript 正则表达式实现为数字添加千位分隔符
Mar 10 Javascript
js创建数组的简单方法
Jul 27 Javascript
AngularJS基础 ng-cut 指令介绍及简单示例
Aug 01 Javascript
Bootstrap实现input控件失去焦点时验证
Aug 04 Javascript
react.js 获取真实的DOM节点实例(必看)
Apr 17 Javascript
vue cli 3.0 搭建项目的图文教程
May 17 Javascript
javascript设计模式 ? 代理模式原理与用法实例分析
Apr 16 Javascript
node脚手架搭建服务器实现token验证的方法
Jan 20 Javascript
SSM VUE Axios详解
Oct 05 Vue.js
jQuery实现内容定时切换效果完整实例
Apr 06 #Javascript
jQuery隐藏和显示效果实现
Apr 06 #Javascript
JS动态改变浏览器标题的方法
Apr 06 #Javascript
jQuery ajax提交Form表单实例(附demo源码)
Apr 06 #Javascript
JS密码生成与强度检测完整实例(附demo源码下载)
Apr 06 #Javascript
JS控制伪元素的方法汇总
Apr 06 #Javascript
JS实现把鼠标放到链接上出现滚动文字的方法
Apr 06 #Javascript
You might like
解决php中Cannot send session cache limiter 的问题的方法
2007/04/27 PHP
基于PHP导出Excel的小经验 完美解决乱码问题
2013/06/10 PHP
CI框架学习笔记(一) - 环境安装、基本术语和框架流程
2014/10/26 PHP
PHP环境中Memcache的安装和使用
2015/11/05 PHP
PHP开发制作一个简单的活动日程表Calendar
2016/06/20 PHP
让插入到 innerHTML 中的 script 跑起来的实现代码
2006/07/01 Javascript
禁止JQuery中的load方法装载IE缓存中文件的方法
2009/09/11 Javascript
解决extjs grid 不随窗口大小自适应的改变问题
2014/01/26 Javascript
javascript判断网页是关闭还是刷新
2015/09/12 Javascript
js 获取范围内的随机数实例代码
2016/08/02 Javascript
jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单
2016/08/17 Javascript
基于BootStrap的Metronic框架实现页面链接收藏夹功能按钮移动收藏记录(使用Sortable进行拖动排序)
2016/08/29 Javascript
AngularJS 应用身份认证的技巧总结
2016/11/07 Javascript
JavaScript控制输入框中只能输入中文、数字和英文的方法【基于正则实现】
2017/03/03 Javascript
jQuery选择器之子元素过滤选择器
2017/09/28 jQuery
详解angular脏检查原理及伪代码实现
2018/06/08 Javascript
使用微信小程序开发弹出框应用实例详解
2018/10/18 Javascript
javascript实现导航栏分页效果
2019/06/27 Javascript
Python使用稀疏矩阵节省内存实例
2014/06/27 Python
python实现从网络下载文件并获得文件大小及类型的方法
2015/04/28 Python
Python的Django框架中的Context使用
2015/07/15 Python
python数组循环处理方法
2019/08/26 Python
pytorch进行上采样的种类实例
2020/02/18 Python
HTML5 progress和meter控件_动力节点Java学院整理
2017/07/06 HTML / CSS
Bata印度官网:源自欧洲舒适鞋履品牌
2020/01/30 全球购物
JAVA招聘远程笔试题
2015/07/23 面试题
前台文员我鉴定
2014/01/12 职场文书
高中政治教学反思
2014/01/18 职场文书
运动会开幕式邀请函
2014/02/03 职场文书
致共产党员倡议书
2014/04/16 职场文书
歌唱比赛策划方案
2014/06/06 职场文书
毕业生找工作自荐书
2014/06/30 职场文书
党的群众路线教育实践活动个人批评与自我批评
2014/10/16 职场文书
考察邀请函范文
2015/01/31 职场文书
2016大学生就业指导课心得体会
2016/01/15 职场文书
python基础之函数的定义和调用
2021/10/24 Python