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 相关文章推荐
jquery实现个人中心导航菜单效果和美观都非常不错
Sep 02 Javascript
JQuery中clone方法复制节点
May 18 Javascript
jQuery实现的简单折叠菜单(折叠面板)效果代码
Sep 16 Javascript
jquery实现tab键进行选择后enter键触发click行为
Mar 29 jQuery
Angularjs使用指令做表单校验的方法
Mar 31 Javascript
详解vue-cli开发环境跨域问题解决方案
Jun 06 Javascript
Javascript网页抢红包外挂实现分享
Jan 11 Javascript
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
Jun 05 jQuery
如何从0开始用node写一个自己的命令行程序
Dec 29 Javascript
NestJs 静态目录配置详解
Mar 12 Javascript
微信二次分享报错invalid signature问题及解决方法
Apr 01 Javascript
原生Vue 实现右键菜单组件功能
Dec 16 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
复杂检索数据并分页显示的处理方法
2006/10/09 PHP
Trying to clone an uncloneable object of class Imagic的解决方法
2012/01/11 PHP
如何使用PHP批量去除文件UTF8 BOM信息
2013/08/05 PHP
php使用glob函数快速查询指定目录文件的方法
2014/11/15 PHP
PHP执行linux命令常用函数汇总
2016/02/02 PHP
Zend Framework动作助手Redirector用法实例详解
2016/03/05 PHP
thinkphp5使用无限极分类
2019/02/18 PHP
javascript学习笔记(十一) 正则表达式介绍
2012/06/20 Javascript
js用Date对象处理时间实现思路及代码
2013/01/31 Javascript
jqplot通过ajax动态画折线图的方法及思路
2013/12/08 Javascript
javascript判断是否按回车键并解决浏览器之间的差异
2014/05/13 Javascript
JS中自定义定时器让它在某一时刻执行
2014/09/02 Javascript
JavaScript获取图片真实大小代码实例
2014/09/24 Javascript
一个php+js实时显示时间问题
2015/10/12 Javascript
Javascript中的数组常用方法解析
2016/06/17 Javascript
picLazyLoad 实现图片延时加载(包含背景图片)
2016/07/21 Javascript
nodeJS实现路由功能实例代码
2017/06/08 NodeJs
vue里如何主动销毁keep-alive缓存的组件
2019/03/21 Javascript
如何解决日期函数new Date()浏览器兼容性问题
2019/09/11 Javascript
解决antd日期选择组件,添加value就无法点击下一年和下一月问题
2020/10/29 Javascript
javascript实现前端分页功能
2020/11/26 Javascript
[01:18:36]LGD vs VP Supermajor 败者组决赛 BO3 第一场 6.10
2018/07/04 DOTA
[04:15]DOTA2-DPC中国联赛 正赛 Ehome vs Aster 选手采访
2021/03/11 DOTA
python3.6使用pymysql连接Mysql数据库
2018/05/25 Python
Python字符串通过'+'和join函数拼接新字符串的性能测试比较
2019/03/05 Python
Pandas时间序列重采样(resample)方法中closed、label的作用详解
2019/12/10 Python
python3环境搭建过程(利用Anaconda+pycharm)完整版
2020/08/19 Python
欧迪办公美国官网:Office Depot
2016/08/22 全球购物
戴尔美国官网:Dell
2016/08/31 全球购物
adidas官方旗舰店:德国运动用品制造商
2017/11/25 全球购物
师范学院毕业生求职信范文
2013/12/26 职场文书
社区七一党员活动方案
2014/01/25 职场文书
创先争优公开承诺书
2014/08/30 职场文书
历史名人教你十五个读书方法,赶快Get起来!
2019/07/18 职场文书
基于tensorflow权重文件的解读
2021/05/26 Python
mysql 体系结构和存储引擎介绍
2022/05/06 MySQL