js+div实现文字滚动和图片切换效果代码


Posted in Javascript onAugust 27, 2015

本文实例讲述了js+div实现文字滚动和图片切换效果代码。分享给大家供大家参考。具体如下:

这里演示js+div文字滚动和图片切换代码,为了演示方便,去掉了图片调用,用数字代替了,用时候再加上就可以了,本效果实现了两种效果,Div切换,TAB切换,和文字滚动,鼠标移上后文字停止滚动,两种功能可任意剥离出来,这不影响代码使用。

运行效果截图如下:

js+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" />
<title>TAB切换和文字滚动</title>
<style type="text/css">
<!--
#demo {
background: #FFF;
overflow:hidden;
width: 600px;
}
#demo img {
border: 3px solid #F2F2F2;
}
#indemo {
float: left;
width: 800%;
}
#demo1 {
float: left;
}
#demo2 {
float: left;
}
-->
</style>
<link href="images/css.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript">
// <!CDATA[
function lunTab(m)
{
 for(var j=1;j<=4;j++)
 {
  if(m==j)
  {
   document.getElementById("div"+j).style.display="block";
   document.getElementById("3"+j).className="on";
  }
  else{
   document.getElementById("div"+j).style.display="none";
   document.getElementById("3"+j).className="";
  }
 }
}
// ]]>
 </script>
</head>
<body>
<div class="main-center clearfix"> 
  <div class="txt">
  <div class="tit">
 <a href="#" id="31" onmouseover="lunTab(1)">急速提分一对一</a> | <a href="#" id="32" onmouseover="lunTab(2)">集训营</a> | <a href="#" id="33" onmouseover="lunTab(3)">协议包括VIP</a> | <a href="#" id="44" onmouseover="lunTab(4)">一卡通</a></div>
<div class="box-b" id="div1" style="display: block;">
<div id="demo">
<div id="indemo">
<div id="demo1">
<div style=" border:1px solid #000; overflow:hidden;height:155px;width:170px;text-align:center;float:left"><div style="height:135px;width:170px; background-color:#000; font-size:24px; color:#FFF;float:left; overflow:hidden;"></div>1333333333</div>
<div style=" border:1px solid #000; overflow:hidden;height:155px;width:170px;text-align:center; float:left"><div style="height:135px;width:170px; background-color:#000; font-size:24px; color:#FFF;float:left; overflow:hidden;float:left"></div>14444444444</div>
<div style=" border:1px solid #000; overflow:hidden;height:155px;width:170px;text-align:center;float:left"><div style="height:135px;width:170px; background-color:#000; font-size:24px; color:#FFF;float:left; overflow:hidden;"></div>1555555555</div>
<div style=" border:1px solid #000; overflow:hidden;height:155px;width:170px;text-align:center;float:left"><div style="height:135px;width:170px; background-color:#000; font-size:24px; color:#FFF;float:left; overflow:hidden;"></div>6666666666</div>
</div>
<div id="demo2"></div>
</div>
</div>
</div>
 <div class="box-b" id="div2" style="display: none;">
<div style=" width:170px; height:135px; background-color:#000; font-size:24px; color:#FFF;float:left; overflow:hidden;">3</div>
<div style=" width:170px; height:135px; background-color:#000; font-size:24px; color:#FFF;float:left; ">4</div>
   </div> 
   <div class="box-b" id="div3" style="display: none;">
<div style=" width:170px; height:135px; background-color:#000; font-size:24px; color:#FFF;float:left; overflow:hidden;">5</div>
<div style=" width:170px; height:135px; background-color:#000; font-size:24px; color:#FFF;float:left; ">6</div>
   </div> 
   <div class="box-b" id="div4" style="display: none;">
<div style=" width:170px; height:135px; background-color:#000; font-size:24px; color:#FFF;float:left; overflow:hidden;">7</div>
<div style=" width:170px; height:135px; background-color:#000; font-size:24px; color:#FFF;float:left; ">8</div>
   </div>
  </div>
 </div>
<script>
<!--
var speed=10;
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML;
function Marquee(){
if(tab2.offsetWidth-tab.scrollLeft<=0)
tab.scrollLeft-=tab1.offsetWidth
else{
tab.scrollLeft++;
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
-->
</script>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
让innerHTML的脚本也可以运行起来
Jul 01 Javascript
javascript 可以拖动的DIV(二)
Jun 26 Javascript
Jquery 动态添加按钮实现代码
May 06 Javascript
node.js中的console.warn方法使用说明
Dec 09 Javascript
Jquery实现弹性滑块滑动选择数值插件
Aug 08 Javascript
jQuery复制表单元素附源码分享效果演示
Sep 30 Javascript
基于javascript实现图片预加载
Jan 05 Javascript
ionic组件ion-tabs选项卡切换效果实例
Aug 27 Javascript
javascript实现圣旨卷轴展开效果(代码分享)
Mar 23 Javascript
带你了解session和cookie作用原理区别和用法
Aug 14 Javascript
vue实现的仿淘宝购物车功能详解
Jan 27 Javascript
vue项目中使用vue-layer弹框插件的方法
Mar 11 Javascript
javascript实现图片延迟加载方法汇总(三种方法)
Aug 27 #Javascript
json+jQuery实现的无限级树形菜单效果代码
Aug 27 #Javascript
jQuery on()方法示例及jquery on()方法的优点
Aug 27 #Javascript
js实现仿京东2级菜单效果(带延时功能)
Aug 27 #Javascript
jQuery UI设置固定日期选择特效代码分享
Aug 27 #Javascript
js实现的早期滑动门菜单效果代码
Aug 27 #Javascript
jQuery实现自动与手动切换的滚动新闻特效代码分享
Aug 27 #Javascript
You might like
PHP中查询SQL Server或Sybase时TEXT字段被截断的解决方法
2009/03/10 PHP
显示youtube视频缩略图和Vimeo视频缩略图代码分享
2014/02/13 PHP
PHP通过微信跳转的Code参数获取用户的openid(关键代码)
2016/07/06 PHP
php解析mht文件转换成html的实例
2017/03/13 PHP
js 表单验证方法(实用)
2009/04/28 Javascript
js 手机号码合法性验证代码集合
2012/09/29 Javascript
jquery判断小数点两位和自动删除小数两位后的数字
2014/03/19 Javascript
javascript获取函数名称、函数参数、对象属性名称的代码实例
2014/04/12 Javascript
使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)
2014/06/05 Javascript
直接拿来用的页面跳转进度条JS实现
2016/01/06 Javascript
jQuery DataTables插件自定义Ajax分页实例解析
2020/04/28 Javascript
BootStrap入门教程(三)之响应式原理
2016/09/19 Javascript
使用bootstrap实现多窗口和拖动效果
2016/09/22 Javascript
jQuery使用方法
2017/02/04 Javascript
详解微信小程序设置底部导航栏目方法
2017/06/29 Javascript
nodejs之get/post请求的几种方式小结
2017/07/26 NodeJs
基于canvas粒子系统的构建详解
2017/08/31 Javascript
vue环境搭建简单教程
2017/11/07 Javascript
vue-cli创建的项目,配置多页面的实现方法
2018/03/15 Javascript
详解Angularjs 自定义指令中的数据绑定
2018/07/19 Javascript
编写更好的JavaScript条件式和匹配条件的技巧(小结)
2019/06/27 Javascript
js实现图片粘贴到网页
2019/12/06 Javascript
tensorflow学习笔记之简单的神经网络训练和测试
2018/04/15 Python
使用python中的in ,not in来检查元素是不是在列表中的方法
2018/07/06 Python
Python 日期区间处理 (本周本月上周上月...)
2019/08/08 Python
Jupyter notebook 启动闪退问题的解决
2020/04/13 Python
python中对二维列表中一维列表的调用方法
2020/06/07 Python
浅谈tensorflow使用张量时的一些注意点tf.concat,tf.reshape,tf.stack
2020/06/23 Python
PREMIUM-MALL法国:行李、箱包及配件在线
2019/05/30 全球购物
PHP数据运算类型都有哪些
2013/11/05 面试题
医学专业毕业生个人求职信
2013/12/25 职场文书
农贸市场管理制度
2014/01/31 职场文书
欢迎标语大全
2014/06/21 职场文书
大学四年个人总结
2015/03/03 职场文书
单位工资证明范本
2015/06/12 职场文书
小爸爸观后感
2015/06/15 职场文书