效果图:

一实现文字自动横移

<style type="text/css">
#demo {overflow:scroll;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>
</div>
<div id="demo2"></div> </div>
</div>
一 采用jquery方式实现文字横移
<script>
var speed=20;
$("#demo2").html($("#demo1").children().clone());
var n=0;
function Marquee(){
if(n>=$("#demo").innerWidth())
n=0;
else{
n++;
}
$("#demo").scrollLeft( n );
}
var MyMar=setInterval(Marquee,speed);
$("#demo").mouseover(function(){clearInterval(MyMar)});
$("#demo").mouseout(function(){MyMar=setInterval(Marquee,speed)});
</script>
二 采用原生script实现横移
<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>

附:jquery尺寸:

width() 方法设置或返回元素的宽度(不包括内边距、边框或外边距)。

height() 方法设置或返回元素的高度(不包括内边距、边框或外边距)。

innerWidth() 方法返回元素的宽度(包括内边距)。

innerHeight() 方法返回元素的高度(包括内边距)。

outerWidth() 方法返回元素的宽度(包括内边距和边框)。

outerHeight() 方法返回元素的高度(包括内边距和边框)。

outerWidth(true) 方法返回元素的宽度(包括内边距、边框和外边距)。

outerHeight(true) 方法返回元素的高度(包括内边距、边框和外边距)。

scrollLeft() 方法返回或设置匹配元素的滚动条的水平位置。

.scrollTop()上面的是不带参数的,是获取匹配元素的相对滚动条顶部的偏移。

.scrollTop(value)这是带参数的用法,是用来设置匹配元素相对于滚动条顶部的偏移。value是数字,请不要带上像素单位“px”.

实现文字自动横移--- jquery尺寸相关函数的更多相关文章

  1. 鼠标滑过图片变暗文字链接滑出jQuery特效

    效果体验:http://hovertree.com/texiao/jquery/7.htm HTML文件代码: <!DOCTYPE html> <html xmlns="h ...

  2. jQuery 基础(4)jQuery 尺寸

    jQuery 尺寸方法jQuery 提供多个处理尺寸的重要方法:width()height()innerWidth()innerHeight()outerWidth()outerHeight()jQu ...

  3. jQuery 尺寸

    通过 jQuery,很容易处理元素和浏览器窗口的尺寸. jQuery 尺寸 方法 jQuery 提供多个处理尺寸的重要方法: width() height() innerWidth() innerHe ...

  4. 关于jquery尺寸的总结

    以前总是对jquery的尺寸稀里糊涂,有需要的可以看下下面的代码: ①页面布局如下: <!doctype html> <html> <head> <meta ...

  5. jquery尺寸和jQuery设置和获取内容方法

    一.jquery尺寸 jQuery 提供多个处理尺寸的重要方法: width()    设置或返回元素的宽度(不包括内边距.边框或外边距),括号中可填数值宽度参数,无单位 height()   设置或 ...

  6. 随着页面滚动,数字自动增大的jquery特效

    首先为了截出gif图,我下载了一个小工具 GifCam: https://www.appinn.com/gifcam/ 随着页面滚动,数字自动增大的jquery特效 主要就是依赖这个脚本script. ...

  7. jQuery尺寸

    jQuery 尺寸 jQuery width() 和 height() 方法 width() 方法设置或返回元素的宽度(不包括内边距.边框或外边距). height() 方法设置或返回元素的高度(不包 ...

  8. jquery实现文字自动向上滚动,鼠标放上去停止,移开继续滚动代码...

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 文本框/域文字提示(placeholder)自动显示隐藏jQuery小插件

    // 文本框文本域提示文字的自动显示与隐藏 (function($){ $.fn.textRemindAuto = function(options){ options = options || {} ...

随机推荐

  1. 手把手教你做个人 app

    我们都知道,开发一个app很大程度依赖服务端:服务端提供接口数据,然后我们展示:另外,开发一个app,还需要美工协助切图.没了接口,没了美工,app似乎只能做成单机版或工具类app,真的是这样的吗?先 ...

  2. 支付宝web支付

    过程 1. 用户下单 2. 商户后台产生订单 3. 请求支付宝web支付页面(将订单信息返回给用户---放在form里面---隐藏起来-----并通过脚本自动提交此form到支付宝web支付页) 4. ...

  3. CYQ.Data 从入门到放弃ORM系列:开篇:自动化框架编程思维

    前言: 随着CYQ.Data 开始回归免费使用之后,发现用户的情绪越来越激动,为了保持这持续的激动性,让我有了开源的念头. 同时,由于框架经过这5-6年来的不断演进,以前发的早期教程已经太落后了,包括 ...

  4. 无限分级和tree结构数据增删改【提供Demo下载】

    无限分级 很多时候我们不确定等级关系的层级,这个时候就需要用到无限分级了. 说到无限分级,又要扯到递归调用了.(据说频繁递归是很耗性能的),在此我们需要先设计好表机构,用来存储无限分级的数据.当然,以 ...

  5. Demo源码放送:打通B/S与C/S !让HTML5 WebSocket与.NET Socket公用同一个服务端!

    随着HTML5 WebSocket技术的日益成熟与普及,我们可以借助WebSocket来更加方便地打通BS与CS -- 因为B/S中的WebSocket可以直接连接到C/S的服务端,并进行双向通信.如 ...

  6. ABP(现代ASP.NET样板开发框架)系列之3、ABP分层架构

    点这里进入ABP系列文章总目录 基于DDD的现代ASP.NET开发框架--ABP系列之3.ABP分层架构 ABP是“ASP.NET Boilerplate Project (ASP.NET样板项目)” ...

  7. 在网上摘录一段对于IOC的解析,比较直观,大家观摩观摩

    其实IoC非常简单,基本思想就是面向接口的编程,只是老外给起了个名字名充分利用之. 简单的说,传统模式下,如果你要用钱,你需要去银行取,IoC模式下,银联在你家安了一个取款机,你直接找取款机要钱就可以 ...

  8. Android注解使用之使用Support Annotations注解优化代码

    前言: 前面学习总结了Java注解的使用,博客地址详见Java学习之注解Annotation实现原理,从本质上了解到什么注解,以及注解怎么使用?不要看见使用注解就想到反射会影响性能之类,今天我们就来学 ...

  9. [C#] Linq To Objects - 如何操作文件目录

    Linq To Objects - 如何操作文件目录 开篇语: 上次发布的 <LINQ:进阶 - LINQ 标准查询操作概述> 社会反响不错,但自己却始终觉得缺点什么!“纸上得来终觉浅,绝 ...

  10. 从接口、抽象类到工厂模式再到JVM来总结一些问题

    俗话说,自己写的代码,6个月后也是别人的代码……复习!复习!复习! 涉及到的知识点总结如下: 为什么使用接口? 接口和抽象类的区别 简单工厂模式总结 Java中new和newInstance的区别 J ...