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 相关文章推荐
node+express+jade制作简单网站指南
Nov 26 Javascript
javascript动态创建表格及添加数据实例详解
May 13 Javascript
javascript特效实现——当前时间和倒计时效果的简单实例
Jul 20 Javascript
JS使用onerror捕获异常示例
Aug 03 Javascript
JS中动态创建元素的三种方法总结(推荐)
Oct 20 Javascript
使用重写url机制实现验证码换一张功能
Aug 01 Javascript
Webpack 服务器端代码打包的示例代码
Sep 19 Javascript
vue+vuex+axios实现登录、注册页权限拦截
Mar 09 Javascript
react+redux仿微信聊天界面
Jun 21 Javascript
微信小程序官方动态自定义底部tabBar的例子
Sep 04 Javascript
layui加载表格,绑定新增,编辑删除,查看按钮事件的例子
Sep 06 Javascript
Centos7 安装Node.js10以上版本的方法步骤
Oct 15 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
对盗链说再见...
2006/10/09 PHP
PHP如何抛出异常处理错误
2011/03/02 PHP
PHP遍历二维数组的代码
2011/04/22 PHP
PHP去掉从word直接粘贴过来的没有用格式的函数
2012/10/29 PHP
PHP获取php,mysql,apche的版本信息示例代码
2014/01/16 PHP
php文件系统处理方法小结
2016/05/23 PHP
Ubuntu VPS中wordpress网站打开时提示”建立数据库连接错误”的解决办法
2016/11/03 PHP
nginx 设置多个站跨域
2021/03/09 Servers
用JavaScript调用WebService的示例
2008/04/07 Javascript
javascript 动态设置已知select的option的value值的代码
2009/12/16 Javascript
js监听输入框值的即时变化onpropertychange、oninput
2011/07/13 Javascript
Javascript中对象继承的实现小例
2014/05/12 Javascript
实现js保留小数点后N位的代码
2014/11/13 Javascript
node.js中的fs.symlink方法使用说明
2014/12/15 Javascript
深入浅析JS是按值传递还是按引用传递(推荐)
2016/09/18 Javascript
jQuery实现滚动条滚动到子元素位置(方便定位)
2017/01/08 Javascript
jQuery简单实现根据日期计算星期几的方法
2019/01/09 jQuery
微信小程序间使用navigator跳转传值问题实例分析
2020/03/27 Javascript
浅谈vue中get请求解决传输数据是数组格式的问题
2020/08/03 Javascript
Python获取apk文件URL地址实例
2013/11/01 Python
详解python实现线程安全的单例模式
2018/03/05 Python
Python Django 实现简单注册功能过程详解
2019/07/29 Python
Django {{ MEDIA_URL }}无法显示图片的解决方式
2020/04/07 Python
python3.8.1+selenium实现登录滑块验证功能
2020/05/22 Python
python实现批处理文件
2020/07/28 Python
怀俄明州飞钓:Platte River Fly Shop
2017/12/28 全球购物
墨西哥皇宫度假村预订:Palace Resorts
2018/06/16 全球购物
就业协议书范本
2014/04/11 职场文书
质量保证书范本
2014/04/29 职场文书
2014年技术部工作总结
2014/12/12 职场文书
导游词开场白
2015/01/31 职场文书
讲文明倡议书
2015/04/29 职场文书
如何使用Maxwell实时同步mysql数据
2021/04/08 MySQL
Python如何配置环境变量详解
2021/05/18 Python
《极主夫道》真人电影正式预告 定档6月3日上映
2022/04/05 日漫