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类的定义
Jun 28 Javascript
js 实现菜单左右滚动显示示例介绍
Nov 21 Javascript
node.js中的require使用详解
Dec 15 Javascript
使用命令对象代替switch语句的写法示例
Feb 28 Javascript
详解JavaScript的表达式与运算符
Nov 30 Javascript
js简单网速测试方法完整实例
Dec 15 Javascript
用jQuery实现可输入多选下拉组合框实例代码
Jan 18 Javascript
通过vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题
Apr 08 Javascript
BootStrap modal实现拖拽功能
Dec 01 Javascript
Node.js实现简单的爬取的示例代码
Jun 25 Javascript
解决layui弹框失效的问题
Sep 09 Javascript
Vue性能优化的方法
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
在JavaScript中调用php程序
2009/03/09 PHP
PHP设计模式 注册表模式(多个类的注册)
2012/02/05 PHP
php内核解析:PHP中的哈希表
2014/01/30 PHP
PHP中Fatal error session_start()错误解决步骤
2014/08/05 PHP
PHP fastcgi模式上传大文件(大约有300多K)报错
2014/09/28 PHP
将FCKeditor导入PHP+SMARTY的实现方法
2015/01/15 PHP
深入理解Yii2.0乐观锁与悲观锁的原理与使用
2017/07/26 PHP
PHP设计模式之迭代器模式Iterator实例分析【对象行为型】
2020/04/26 PHP
两个DIV等高的JS的实现代码
2007/12/23 Javascript
javascript XML数据显示为HTML一例
2008/12/23 Javascript
JavaScript 提升运行速度之循环篇 译文
2009/08/15 Javascript
jQuery仿Excel表格编辑功能的实现代码
2013/05/01 Javascript
javascript同页面多次调用弹出层具体实例代码
2013/08/16 Javascript
跟我学习javascript的prototype原型和原型链
2015/11/18 Javascript
JavaScript学习笔记整理之引用类型
2016/01/22 Javascript
微信小程序  生命周期详解
2016/10/27 Javascript
jQuery Jsonp跨域模拟搜索引擎
2017/06/17 jQuery
利用纯js + transition动画实现移动端web轮播图详解
2017/09/10 Javascript
使用vue开发移动端管理后台的注意事项
2019/03/07 Javascript
了解Javascript中函数作为对象的魅力
2019/06/19 Javascript
layui数据表格跨行自动合并的例子
2019/09/02 Javascript
pycharm 使用心得(八)如何调用另一文件中的函数
2014/06/06 Python
python实现批量修改文件名代码
2017/09/10 Python
python Pexpect 实现输密码 scp 拷贝的方法
2019/01/03 Python
Python3+Appium实现多台移动设备操作的方法
2019/07/05 Python
python处理自动化任务之同时批量修改word里面的内容的方法
2019/08/23 Python
python聚类算法解决方案(rest接口/mpp数据库/json数据/下载图片及数据)
2019/08/28 Python
Python django框架输入汉字,数字,字符生成二维码实现详解
2019/09/24 Python
支票、地址标签、包装纸和慰问卡:Current Catalog
2018/01/30 全球购物
小学教师的自我评价范例
2013/10/31 职场文书
人事部专员岗位职责
2014/03/04 职场文书
北京奥运会口号
2014/06/21 职场文书
离婚协议书范本
2015/01/26 职场文书
Nginx stream 配置代理(Nginx TCP/UDP 负载均衡)
2021/11/17 Servers
SpringCloud Feign请求头删除修改的操作代码
2022/03/20 Java/Android
《地。-关于地球的运动-》单行本第七集上市,小说家朝井辽献上期待又害怕的推荐文
2022/03/31 日漫