js 文本滚动效果的实例代码


Posted in Javascript onAugust 17, 2013
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
 <style type="text/css">
  *{margin:0;padding:0;}
  ul{list-style:none outside none}
  .slchanpin001{width:200px;border:1px solid orange;margin:55px auto}
  .slchanpin001-t{height:25px;background:orange}
  .slchanpin001-c{width:200px;height:60px;overflow:hidden;position:relative}
  .slchanpin001-c li{float:left;width:200px;height:60px;background:red;}
  .slchanpingCon01{height:60px;position:absolute;top:0;left:0;}
 </style>
 </head>
 <body>
  <div class="slchanpin001">
   <div class="slchanpin001-t"></div>
   <div class="slchanpin001-c">
    <div class="slchanpingCon01" id="slchanpingCon01">
     <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
      <li>10</li>
      <li>10</li>
     </ul>
    </div>
   </div>
  </div>  
 <script type="text/javascript">
  var sl = function(id){ return document.getElementById(id)}
  var speed = 0;
  var timer = null;
  var i=0;
  function slProdust(){
   var slchanpingCon01 = sl("slchanpingCon01").getElementsByTagName("li");
   var slElem = sl("slchanpingCon01");
   var slDivWidth = slchanpingCon01[0].offsetWidth * slchanpingCon01.length;
    slElem.style.width = slDivWidth +"px";
    function autoFunc(){
     if(speed   >  -slDivWidth ){
      speed--;
      slElem.style.left = speed + "px"
     }
     else{
      clearTimeout(timer);
     }
     timer = setTimeout(function(){autoFunc()},10);
    }
    autoFunc();
  }
  slProdust();
 </script>
 </body>
</html>
Javascript 相关文章推荐
Firebug入门指南(Firefox浏览器)
Aug 21 Javascript
为你的网站增加亮点的9款jQuery插件推荐
May 03 Javascript
浮动的div自适应居中显示的js代码
Dec 23 Javascript
js形成页面的一种遮罩效果实例代码
Jan 04 Javascript
JS实现鼠标经过好友列表中的好友头像时显示资料卡的效果
Jul 02 Javascript
浅谈javascript中字符串String与数组Array
Dec 31 Javascript
jQuery实现仿路边灯箱广告图片轮播效果
Apr 15 Javascript
多个js毫秒倒计时同时进行效果
Jan 05 Javascript
基于JS分页控件实现简单美观仿淘宝分页按钮效果
Nov 07 Javascript
Web纯前端“旭日图”实现元素周期表
Mar 10 Javascript
vue.js内部自定义指令与全局自定义指令的实现详解(利用directive)
Jul 11 Javascript
AngularJS中的作用域实例分析
May 16 Javascript
javascript用户注册提示效果的简单实例
Aug 17 #Javascript
JS返回上一页实例代码通过图片和按钮分别实现
Aug 16 #Javascript
判断js对象是否拥有某一个属性的js代码
Aug 16 #Javascript
JS判断数组中是否有重复值得三种实用方法
Aug 16 #Javascript
对frameset、frame、iframe的js操作示例代码
Aug 16 #Javascript
jQuery实现密保互斥问题解决方案
Aug 16 #Javascript
图标线性回归斜着移动到指定的位置
Aug 16 #Javascript
You might like
PHP实例分享判断客户端是否使用代理服务器及其匿名级别
2014/06/04 PHP
php常用字符函数实例小结
2016/12/29 PHP
Mootools 1.2教程(3) 数组使用简介
2009/09/14 Javascript
EXT中xtype的含义分析
2010/01/07 Javascript
jquery ui对话框实例代码
2013/05/10 Javascript
JS和jquery获取各种屏幕的宽度和高度的代码
2013/08/02 Javascript
jQuery动画效果-fadeIn fadeOut淡入浅出示例代码
2013/08/28 Javascript
js判断60秒以及倒计时示例代码
2014/01/24 Javascript
jQuery插件开发详细教程
2014/06/06 Javascript
javascript实现youku的视频代码自适应宽度
2015/05/25 Javascript
javascript实现多栏闭合展开式广告位菜单效果实例
2015/08/05 Javascript
向JavaScript的数组中添加元素的方法小结
2015/10/24 Javascript
原生js开发的日历插件
2017/02/04 Javascript
基于JS实现翻书效果的页面切换样式
2017/02/16 Javascript
纯js实现图片匀速淡入淡出效果
2017/08/22 Javascript
微信小程序实现image组件图片自适应宽度比例显示的方法
2018/01/16 Javascript
jQuery替换节点元素的操作方法
2018/03/18 jQuery
Vue.js结合bootstrap前端实现分页和排序效果
2018/12/29 Javascript
Node.js中出现未捕获异常的处理方法
2020/06/29 Javascript
Python StringIO模块实现在内存缓冲区中读写数据
2015/04/08 Python
python3.5仿微软计算器程序
2020/03/30 Python
Python常用内置模块之xml模块(详解)
2017/05/23 Python
python实现代码统计器
2019/09/19 Python
python进度条显示之tqmd模块
2020/08/22 Python
详解python算法常用技巧与内置库
2020/10/17 Python
Django haystack实现全文搜索代码示例
2020/11/28 Python
C++面试题目
2013/06/25 面试题
北京鼎普科技股份有限公司软件测试面试题
2012/04/07 面试题
职业生涯规划设计步骤
2014/01/12 职场文书
大学生应聘导游自荐信
2014/06/02 职场文书
员工工作自我评价
2014/09/26 职场文书
党的群众路线教育实践活动自我剖析材料
2014/10/08 职场文书
2014年涉外离婚协议书范本
2014/11/20 职场文书
学校食品安全责任书
2015/01/29 职场文书
2015年青年志愿者工作总结
2015/05/20 职场文书
大学社团活动总结怎么写
2019/06/21 职场文书