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 相关文章推荐
Jquery 扩展方法
May 06 Javascript
jQuery EasyUI 的EasyLoader功能介绍
Sep 12 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件
Dec 21 Javascript
Javascript 面向对象(二)封装代码
May 23 Javascript
javascript学习笔记(六)数据类型和JSON格式
Oct 08 Javascript
分享JavaScript监听全部Ajax请求事件的方法
Aug 28 Javascript
如何处理JSON中的特殊字符
Nov 30 Javascript
vue-router跳转页面的方法
Feb 09 Javascript
JavaScript实现的鼠标响应颜色渐变效果完整实例
Feb 18 Javascript
ES6 let和const定义变量与常量的应用实例分析
Jun 27 Javascript
vue中input的v-model清空操作
Sep 06 Javascript
js面试题之异步问题的深入理解
Sep 20 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实现批量查询清除一句话后门的代码
2008/01/20 PHP
ThinkPHP写数组插入与获取最新插入数据ID实例
2014/11/03 PHP
apache中为php 设置虚拟目录
2014/12/17 PHP
php实现数组中出现次数超过一半的数字的统计方法
2018/10/14 PHP
基于PHP+Jquery制作的可编辑的表格的代码
2011/04/10 Javascript
jQuery自定义事件的简单实现代码
2014/01/27 Javascript
js获取微信版本号的方法
2015/05/12 Javascript
简介JavaScript中的sub()方法的使用
2015/06/08 Javascript
.NET微信公众号开发之创建自定义菜单
2015/07/16 Javascript
JavaScript节点及列表操作实例小结
2015/08/05 Javascript
localStorage实现便签小程序
2016/11/28 Javascript
JavaScript事件处理程序详解
2017/09/19 Javascript
JS中appendChild追加子节点无效的解决方法
2018/10/14 Javascript
微信小程序实现搜索历史功能
2020/03/26 Javascript
通过实例讲解JS如何防抖动
2019/06/15 Javascript
Vue ​v-model相关知识总结
2021/01/28 Vue.js
[51:34]Ti4主赛事胜者组 DK vs EG 2
2014/07/19 DOTA
[03:08]迎霜节狂欢!2018年迎霜节珍藏Ⅰ一览
2018/12/25 DOTA
python在Windows8下获取本机ip地址的方法
2015/03/14 Python
Python中定时任务框架APScheduler的快速入门指南
2017/07/06 Python
python实现微信小程序用户登录、模板推送
2019/08/28 Python
Python猴子补丁知识点总结
2020/01/05 Python
Python selenium爬取微博数据代码实例
2020/05/22 Python
python使用hdfs3模块对hdfs进行操作详解
2020/06/06 Python
使用Python-OpenCV消除图像中孤立的小区域操作
2020/07/05 Python
Python pymsql模块的使用
2020/09/07 Python
浅谈Html5中视频 音频标签 进度条的问题
2016/07/26 HTML / CSS
介绍一些UNIX常用简单命令
2014/11/11 面试题
化学专业毕业生自荐信
2013/11/15 职场文书
中药专业毕业自荐书范文
2014/02/08 职场文书
《孔子拜师》教学反思
2014/02/24 职场文书
信息学院毕业生自荐信范文
2014/03/04 职场文书
电子信息工程自荐信
2014/05/26 职场文书
咖啡店创业计划书范文
2014/09/15 职场文书
2016年119消防宣传日活动总结
2016/04/05 职场文书
Kubernetes部署实例并配置Deployment、网络映射、副本集
2022/04/01 Servers