实现文字自动横移--- jquery尺寸相关函数
效果图:

一实现文字自动横移
<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尺寸相关函数的更多相关文章
- 鼠标滑过图片变暗文字链接滑出jQuery特效
效果体验:http://hovertree.com/texiao/jquery/7.htm HTML文件代码: <!DOCTYPE html> <html xmlns="h ...
- jQuery 基础(4)jQuery 尺寸
jQuery 尺寸方法jQuery 提供多个处理尺寸的重要方法:width()height()innerWidth()innerHeight()outerWidth()outerHeight()jQu ...
- jQuery 尺寸
通过 jQuery,很容易处理元素和浏览器窗口的尺寸. jQuery 尺寸 方法 jQuery 提供多个处理尺寸的重要方法: width() height() innerWidth() innerHe ...
- 关于jquery尺寸的总结
以前总是对jquery的尺寸稀里糊涂,有需要的可以看下下面的代码: ①页面布局如下: <!doctype html> <html> <head> <meta ...
- jquery尺寸和jQuery设置和获取内容方法
一.jquery尺寸 jQuery 提供多个处理尺寸的重要方法: width() 设置或返回元素的宽度(不包括内边距.边框或外边距),括号中可填数值宽度参数,无单位 height() 设置或 ...
- 随着页面滚动,数字自动增大的jquery特效
首先为了截出gif图,我下载了一个小工具 GifCam: https://www.appinn.com/gifcam/ 随着页面滚动,数字自动增大的jquery特效 主要就是依赖这个脚本script. ...
- jQuery尺寸
jQuery 尺寸 jQuery width() 和 height() 方法 width() 方法设置或返回元素的宽度(不包括内边距.边框或外边距). height() 方法设置或返回元素的高度(不包 ...
- jquery实现文字自动向上滚动,鼠标放上去停止,移开继续滚动代码...
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 文本框/域文字提示(placeholder)自动显示隐藏jQuery小插件
// 文本框文本域提示文字的自动显示与隐藏 (function($){ $.fn.textRemindAuto = function(options){ options = options || {} ...
随机推荐
- SSD框架训练自己的数据集
SSD demo中详细介绍了如何在VOC数据集上使用SSD进行物体检测的训练和验证.本文介绍如何使用SSD实现对自己数据集的训练和验证过程,内容包括: 1 数据集的标注2 数据集的转换3 使用SSD如 ...
- 页面与ViewModel(上)
在UWP淘宝与旺信中,笔者主要负责页面与控件的制作,这些工作看似简单,但要想做的全面细致仍然需要深入的思考.本文想分享一些在UWP旺信的制作过程中,笔者在UI页面与控件制作上体会到的一些心得.可能笔者 ...
- 用java开发微信公众号:公众号接入和access_token管理(二)
本文为原创,原始地址为http://www.cnblogs.com/fengzheng/p/5027630.html 上一篇说了微信开发的准备工作,准备工作完成之后,就要开始步入正题了.其实微信公众号 ...
- JavaScript随笔2
JavaScript的组成:ECMA.DOM.BOM闭包,子函数可以使用父函数的局部变量 函数:arguments是个参数数组oDiv.style.width:只能操作行间的样式.在IE下oDiv.c ...
- springmvc注解事例
注解有简化 ,灵活性增强的功能 1.引入jar包 com.springsource.javax.validation-1.0.0.GA.jarcom.springsource.org.aopallia ...
- MySQL触发器-条件触发器语法
文章为作者原创,未经许可,禁止转载. -Sun Yat-sen University 冯兴伟 实验4 触发器 )实验目的 掌握数据库触发器的设计和使用方法 )实验内容和要求 定义BEFORE触发 ...
- jQuery 插件-(初体验一)
1.jquery有2个扩展方法: jquery.fn.extend=jquery.prototype.extend jquery.extend (两者的区别放在后面文章说) 2.具体实例结构: //创 ...
- 计算机程序的思维逻辑 (30) - 剖析StringBuilder
上节介绍了String,提到如果字符串修改操作比较频繁,应该采用StringBuilder和StringBuffer类,这两个类的方法基本是完全一样的,它们的实现代码也几乎一样,唯一的不同就在于,St ...
- 坎坷路:ASP.NET Core 1.0 Identity 身份验证(中集)
上一篇:<坎坷路:ASP.NET 5 Identity 身份验证(上集)> ASP.NET Core 1.0 什么鬼?它是 ASP.NET vNext,也是 ASP.NET 5,以后也可能 ...
- 压缩SWF文件大小!减少40%体积!
使用FlashBuild作为IDE的痛苦是显著的!如果开发的项目比较大,那么卡顿.崩溃.白屏是常事,使用别的IDE开发如Sublime.FlashDevelop.IDEA等,然后再用mxmlc编译出 ...