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 相关文章推荐
iframe 自适应高度[在IE6 IE7 FF下测试通过]
Apr 13 Javascript
广告切换效果(缓动切换)
May 27 Javascript
JavaScript 原型与继承说明
Jun 09 Javascript
js 鼠标移动显示图片的简单实例
Dec 25 Javascript
JavaScript中操作Mysql数据库实例
Apr 02 Javascript
利用JS生成博文目录及CSS定制博客
Feb 10 Javascript
完美的js div拖拽实例代码
Sep 24 Javascript
原生JS实现隐藏显示图片 JS实现点击切换图片效果
Jan 27 Javascript
Vue项目webpack打包部署到服务器的实例详解
Jul 17 Javascript
深入理解requireJS-实现一个简单的模块加载器
Jan 15 Javascript
微信小程序如何获取地址
Dec 24 Javascript
解决vue prop传值default属性如何使用,为何不生效的问题
Sep 21 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 session_start()问题解疑(详细介绍)
2013/07/05 PHP
php将字符串随机分割成不同长度数组的方法
2015/06/01 PHP
大家都应该掌握的PHP关联数组使用技巧
2015/12/25 PHP
smarty模板数学运算示例
2016/12/11 PHP
基于laravel where的高级使用方法
2019/10/10 PHP
PHP 对象继承原理与简单用法示例
2020/04/21 PHP
jQuery控制输入框只能输入数值的小例子
2013/03/20 Javascript
jquery实现简单的banner轮播效果【实例】
2016/03/30 Javascript
angularjs实现文字上下无缝滚动特效代码
2016/09/04 Javascript
使用纯JS代码判断字符串中有多少汉字的实现方法(超简单实用)
2016/11/12 Javascript
详解jquery validate实现表单验证 (正则表达式)
2017/01/18 Javascript
利用node实现一个批量重命名文件的函数
2017/12/21 Javascript
nodejs读取并去重excel文件
2018/04/22 NodeJs
JavaScript常见JSON操作实例分析
2018/08/08 Javascript
Vue源码探究之状态初始化
2018/11/14 Javascript
ES6 新增的创建数组的方法(小结)
2019/08/01 Javascript
vue 使用v-for进行循环的实例代码详解
2020/02/19 Javascript
python将人民币转换大写的脚本代码
2013/02/10 Python
Python数据结构与算法之常见的分配排序法示例【桶排序与基数排序】
2017/12/15 Python
influx+grafana自定义python采集数据和一些坑的总结
2018/09/17 Python
对python判断是否回文数的实例详解
2019/02/08 Python
Django 内置权限扩展案例详解
2019/03/04 Python
Python使用sqlalchemy模块连接数据库操作示例
2019/03/13 Python
Python3基础教程之递归函数简单示例
2019/06/07 Python
python每天定时运行某程序代码
2019/08/16 Python
Staples加拿大官方网站:办公用品一站式采购
2016/09/25 全球购物
社区母亲节活动方案
2014/03/05 职场文书
2014年班主任工作总结
2014/11/08 职场文书
2014年宣传工作总结
2014/11/18 职场文书
2014年小学校长工作总结
2014/12/08 职场文书
不尊敬老师的检讨书
2014/12/21 职场文书
清洁工岗位职责
2015/02/13 职场文书
纪委立案决定书
2015/06/24 职场文书
正确使用MySQL update语句
2021/05/26 MySQL
解决redis批量删除key值的问题
2022/03/23 Redis
Golang 实现WebSockets
2022/04/24 Golang