• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >JavaScript > jquery实现文字单行横移或翻转(上下、左右跳转)

jquery实现文字单行横移或翻转(上下、左右跳转)

作者:镜子-正衣冠-知得失 字体:[增加 减小] 来源:互联网 时间:2017-05-11

镜子-正衣冠-知得失通过本文主要向大家介绍了cad单行文字快捷键,cad单行文字,单行文字的快捷键,单行文字转多行文字,cad单行文字命令等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

通过jquery的animate实现上下单行自动跳转

 <script type="text/javascript" src="__ROOT__/Style/H/js/jquery-1.7.2.min.js"></script>
<style>
  .rool-div{
    height:50px;
    width:700px;
    margin:0 auto;
    position: relative;
    overflow: hidden;
    border:2px solid red;
  }
  .roll{
    height:50px;
    width:700px;
    margin:0 auto;
  }
  .roll span{
    display:block;
    height:50px;
    width:700px;
    line-height:50px;
  }
  a {
    text-decoration:none;
     display:inline-block;
 }
</style>
<div class="rool-div">
 <div class="roll" id="roll">
   <span><a href="#">1. Lorem Ipsum is simply dummy text of the printing and typesetting industry</a></span>
   <span><a href="#">2. It is a long established fact that a reader will be distracted</a></span>
   <span><a href="#">3. Many desktop publishing packages</a></span>
   <span><a href="#">4. All the Lorem Ipsum generators on the Internet tend to repeat predefined</a></span>
   <span><a href="#">5. The standard chunk of Lorem Ipsum used</a></span>
   <span><a href="#">6. English versions from the 1914 translation by H. Rackham.</a></span>
   <span><a href="#">7. Bu metin deneme amaçlıdır the standard chunk of Lorem Ipsum used</a></span>
 </div>
</div>
<script>
  (function($){
    $.fn.extend({
      Roll:function(){
        return this.each(function(){
          var n=0;
          $('#roll span a').hover(function(){
            $(this).css('color','red');
          },function(){
            $(this).css('color','green');
          });
          var timername=setInterval(function(){Play()},1000);
          $("#roll").hover(
              function()
              {
                clearInterval(timername);
              },
              function()
              {
              timername=setInterval(function(){Play()},1000);
              });
          function Play(){
            if($("#roll>span").length>n)
              n++;
            else
              n=1;
            $("#roll").animate({'marginTop':-($("#roll span" ).height())*(n-1)});
          }
        });
      }
    })
  })(jQuery);
</script>
</div>

二  通过scrollLeft函数实现自动左右移动(谷歌浏览器偶尔不能移动)

<style type="text/css">
#demo {overflow:hidden;width:740px; }
#indemo { float: left; width: 800%;}
#demo1 { float: left; }
#demo2 { float: left;margin-left:7px;}
</style>
<script src="bootstrap-3.3.5-dist/js/jquery-1.11.3.js"></script>
<div id="demo">
  <div id="indemo">
    <div id="demo1">
      <a href="#"><img src="zhuanpan/images/pointer.png" alt="#" /></a>
      <a href="#"><img src="zhuanpan/images/pointer.png" alt="#" /></a>
      <a href="#"><img src="zhuanpan/images/pointer.png" alt="#" /></a>
      <a href="#"><img src="zhuanpan/images/pointer.png" alt="#" /></a>
      <a href="#"><img src="zhuanpan/images/pointer.png" alt="#" /></a>
      <a href="#"><img src="zhuanpan/images/pointer.png" alt="#" /></a>
    </div>
    <div id="demo2"></div>
  </div>
</div>
<script>
var speed=10;
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
$("#demo2").text($("#demo1").clone());
$("#demo2").clone();
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>
</div>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!

</div>
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • jquery实现文字单行横移或翻转(上下、左右跳转)

相关文章

  • 2017-05-11jQuery实现搜索页面关键字的功能
  • 2017-05-11nodejs的压缩文件模块archiver用法示例
  • 2017-05-11ES6生成器用法实例分析
  • 2017-05-11vue.js从安装到搭建过程详解
  • 2017-05-11AngularJS 防止页面闪烁的方法
  • 2017-05-11使用jQuery的ajax方法向服务器发出get和post请求的方法
  • 2017-05-11xmlplus组件设计系列之选项卡(Tabbar)(5)
  • 2017-05-11ES6实现的遍历目录函数示例
  • 2017-05-11node.js实现复制文本到剪切板的功能
  • 2017-08-14javascript Module

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • Avalonjs 实现简单购物车功能(实例代码)
    • JS实现图片高斯模糊切换效果的焦点图实例
    • vue.js事件处理器是什么
    • Vue开发过程中遇到的疑惑知识点总结
    • 纯javaScript、jQuery实现个性化图片轮播【推荐】
    • javascript监听页面刷新和页面关闭事件方法详解
    • Extjs让combobox写起来简洁又漂亮
    • vue2.0嵌套路由实现豆瓣电影分页功能(附demo)
    • JavaScript正则获取地址栏中参数的方法
    • javascript 显示全局变量与隐式全局变量的区别

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有