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 相关文章推荐
javascript比较文档位置
Apr 08 Javascript
js getElementsByTagName的简写方式
Jun 27 Javascript
jQuery在ul中显示某个li索引号的方法
Mar 17 Javascript
js判断浏览器类型及设备(移动页面开发)
Jul 30 Javascript
jQuery平滑旋转幻灯片特效代码分享
Sep 07 Javascript
HTML5 实现的一个俄罗斯方块实例代码
Sep 19 Javascript
ES6 javascript中Class类继承用法实例详解
Oct 30 Javascript
angularjs数组判断是否含有某个元素的实例
Feb 27 Javascript
js中el表达式的使用和非空判断方法
Mar 28 Javascript
vue 自定义提示框(Toast)组件的实现代码
Aug 17 Javascript
修改NPM全局模式的默认安装路径的方法
Dec 15 Javascript
利用uni-app生成微信小程序的踩坑记录
Apr 05 Javascript
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
【星际争霸1】人族1v7家ZBath
2020/03/04 星际争霸
解析php类的注册与自动加载
2013/07/05 PHP
PHP类的反射用法实例
2014/11/03 PHP
PHP new static 和 new self详解
2017/02/19 PHP
PHP关于foreach复制知识点总结
2019/01/28 PHP
jquery UI 1.72 之datepicker
2009/12/29 Javascript
js 函数调用模式小结
2011/12/26 Javascript
JS操作图片(增,删,改) 例子
2013/04/17 Javascript
jquery ui dialog实现弹窗特效的思路及代码
2013/08/03 Javascript
JavaScript中奇葩的假值示例应用
2014/03/11 Javascript
JQuery实现左右滚动菜单特效
2015/09/28 Javascript
详解jQuery移动页面开发中的ui-grid网格布局使用
2015/12/03 Javascript
jQuery属性选择器用法示例
2016/09/09 Javascript
JS焦点图,JS 多个页面放多个焦点图的实例
2016/12/08 Javascript
微信小程序getPhoneNumber获取用户手机号
2017/09/29 Javascript
微信小程序实现传参数的几种方法示例
2018/01/10 Javascript
jquery.picsign图片标注组件实例详解
2018/02/02 jQuery
vue插件--仿微信小程序showModel实现模态提示窗功能
2020/08/19 Javascript
如何在vue中使用video.js播放m3u8格式的视频
2021/02/01 Vue.js
[03:40]DOTA2英雄梦之声_第01期_炼金术士
2014/06/23 DOTA
python实现两个文件合并功能
2018/04/01 Python
Python中分支语句与循环语句实例详解
2018/09/13 Python
Win10下python 2.7.13 安装配置方法图文教程
2018/09/18 Python
Python 合并拼接字符串的方法
2020/07/28 Python
HTML5注册页面示例代码
2014/03/27 HTML / CSS
唤醒头发毛囊的秘密武器:Grow Gorgeous
2016/08/28 全球购物
extern是什么意思
2016/03/10 面试题
Linux常见面试题
2016/10/04 面试题
美德好少年主要事迹
2014/01/29 职场文书
2015年个人自我剖析材料
2014/12/29 职场文书
小爸爸观后感
2015/06/15 职场文书
恋恋笔记本观后感
2015/06/16 职场文书
100句人生哲理语录集锦:强者征服今天,懒汉坐等明天
2019/10/18 职场文书
python 实现定时任务的四种方式
2021/04/01 Python
一文搞懂Golang 时间和日期相关函数
2021/12/06 Golang
彻底解决MySQL使用中文乱码的方法
2022/01/22 MySQL