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


Posted in Javascript onJanuary 08, 2017

通过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>

二  通过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>

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

Javascript 相关文章推荐
JS格式化数字金额用逗号隔开保留两位小数
Oct 18 Javascript
JavaScript实现维吉尼亚(Vigenere)密码算法实例
Nov 22 Javascript
Javascript中引用示例介绍
Feb 21 Javascript
javascript对JSON数据排序的3个例子
Apr 12 Javascript
javascript获取函数名称、函数参数、对象属性名称的代码实例
Apr 12 Javascript
深入理解JavaScript系列(22):S.O.L.I.D五大原则之依赖倒置原则DIP详解
Mar 05 Javascript
jQuery中deferred对象使用方法详解
Jul 14 Javascript
BootStrap栅格系统、表单样式与按钮样式源码解析
Jan 20 Javascript
JavaScript字符集编码与解码详谈
Feb 02 Javascript
vue-router路由简单案例介绍
Feb 21 Javascript
js JSON.stringify()基础详解
Jun 19 Javascript
Vue(定时器)解决mounted不能获取到data中的数据问题
Jul 30 Javascript
jQuery实现文字自动横移
Jan 08 #Javascript
div实现自适应高度的textarea实现angular双向绑定
Jan 08 #Javascript
JavaScript中日常收集常见的10种错误(推荐)
Jan 08 #Javascript
详解js中==与===的区别
Jan 08 #Javascript
JavaScript 动态三角函数实例详解
Jan 08 #Javascript
你不知道的 javascript【推荐】
Jan 08 #Javascript
js时间控件只显示年月
Jan 08 #Javascript
You might like
PHP在XP下IIS和Apache2服务器上的安装
2006/09/05 PHP
IIS环境下快速安装、配置和调试PHP5.2.0
2006/12/17 PHP
php HtmlReplace输入过滤安全函数
2010/07/03 PHP
php和数据库结合的一个简单的web实例 代码分析 (php初学者)
2011/07/28 PHP
php中使用DOM类读取XML文件的实现代码
2011/12/14 PHP
php&amp;mysql 日期操作小记
2012/02/27 PHP
获取URL文件名后缀
2013/10/24 PHP
PHP include任意文件或URL介绍
2014/04/29 PHP
php提高网站效率的技巧
2015/09/29 PHP
PHP空值检测函数与方法汇总
2017/11/19 PHP
PHP asXML()函数讲解
2019/02/03 PHP
在Ajax中使用Flash实现跨域数据读取的实现方法
2010/12/02 Javascript
4种JavaScript实现简单tab选项卡切换的方法
2016/01/06 Javascript
Cookies 和 Session的详解及区别
2017/04/21 Javascript
JS实现面向对象继承的5种方式分析
2018/07/21 Javascript
在vue中使用v-bind:class的选项卡方法
2018/09/27 Javascript
微信小程序自定义导航栏实例代码
2019/04/05 Javascript
ionic3双击返回退出应用的方法
2019/09/17 Javascript
[06:53]2018DOTA2国际邀请赛寻真——勇于创新的Vici Gaming
2018/08/14 DOTA
[01:52]PWL S2开团时刻第四期——DOTA2成语故事
2020/12/03 DOTA
Python中的元类编程入门指引
2015/04/15 Python
详谈Python高阶函数与函数装饰器(推荐)
2017/09/30 Python
python实现决策树分类(2)
2018/08/30 Python
Django基础知识 web框架的本质详解
2019/07/18 Python
基于python 等频分箱qcut问题的解决
2020/03/03 Python
Python实现列表索引批量删除的5种方法
2020/11/16 Python
python3通过subprocess模块调用脚本并和脚本交互的操作
2020/12/05 Python
Html5原生拖拽相关事件简介以及基础实现
2020/11/19 HTML / CSS
如何利用XMLHTTP检测URL及探测服务器信息
2013/11/10 面试题
海飞丝的广告词
2014/03/20 职场文书
乡镇群众路线整改落实情况汇报
2014/10/28 职场文书
婚礼父母答谢词
2015/01/04 职场文书
考博导师推荐信范文
2015/03/27 职场文书
超强台风观后感
2015/06/09 职场文书
开学随笔
2015/08/15 职场文书
SQL Server数据库基本概念、组成、常用对象与约束
2022/03/20 SQL Server