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 相关文章推荐
去除链接虚线全面分析总结
Aug 15 Javascript
JS继承 笔记
Jul 13 Javascript
Jquery使用Firefox FireBug插件调试Ajax步骤讲解
Dec 02 Javascript
json的定义、标准格式及json字符串检验
May 11 Javascript
alert出数组中的随即值代码
Sep 25 Javascript
详解在AngularJS的controller外部直接获取$scope
Jun 02 Javascript
angular.extend方法的具体使用
Sep 14 Javascript
浅谈React之状态(State)
Sep 19 Javascript
vue项目每30秒刷新1次接口的实现方法
Dec 04 Javascript
vue-cli3中vue.config.js配置教程详解
May 29 Javascript
VueCli3.0中集成MockApi的方法示例
Jul 05 Javascript
vue2.x数组劫持原理的实现
Apr 19 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
咖啡机如何保养和日常清洁?
2021/03/03 冲泡冲煮
php 移除数组重复元素的一点说明
2008/11/27 PHP
用PHP为SHOPEX增加日志功能代码
2010/07/02 PHP
php文件操作实例代码
2012/05/10 PHP
46 个非常有用的 PHP 代码片段
2016/02/16 PHP
thinkPHP5框架接口写法简单示例
2019/08/05 PHP
js各种验证文本框输入格式(正则表达式)
2010/10/22 Javascript
javascript权威指南 学习笔记之变量作用域分享
2011/09/28 Javascript
输入密码检测大写是否锁定js实现代码
2012/12/03 Javascript
Jquery取得iframe下内容的方法
2013/11/18 Javascript
jQuery实现的图文高亮滚动切换特效实例
2015/08/10 Javascript
js实现创建删除html元素小结
2015/09/30 Javascript
AngularJS 与Bootstrap实现表格分页实例代码
2016/10/14 Javascript
self.attachevent is not a function的解决方法
2017/04/04 Javascript
原生js获取left值和top值的三种方法
2017/08/02 Javascript
jQuery 同时获取多个标签的指定内容并储存为数组
2018/11/20 jQuery
js实现表格数据搜索
2020/08/09 Javascript
在Python中处理XML的教程
2015/04/29 Python
Python cookbook(数据结构与算法)让字典保持有序的方法
2018/02/18 Python
python 不以科学计数法输出的方法
2018/07/16 Python
浅谈Python 列表字典赋值的陷阱
2019/01/20 Python
Python3.6.x中内置函数总结及讲解
2019/02/22 Python
django将网络中的图片,保存成model中的ImageField的实例
2019/08/07 Python
python GUI库图形界面开发之PyQt5多线程中信号与槽的详细使用方法与实例
2020/03/08 Python
Python暴力破解Mysql数据的示例
2020/11/09 Python
numba提升python运行速度的实例方法
2021/01/25 Python
关于探究python中sys.argv时遇到的问题详解
2021/02/23 Python
战友聚会邀请函
2014/01/18 职场文书
保护环境倡议书范文
2014/05/13 职场文书
国庆65周年演讲稿:回首往昔,展望未来
2014/09/21 职场文书
入学证明
2015/06/23 职场文书
《小蝌蚪找妈妈》教学反思
2016/02/23 职场文书
一个成功的互联网创业项目,必须满足这些要求
2019/08/23 职场文书
【HBU】数据库第四周 单表查询
2021/04/05 SQL Server
HTML基础详解(上)
2021/10/16 HTML / CSS
apache虚拟主机配置的三种方式(小结)
2022/07/23 Servers