实现文字自动横移--- 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 || {} ...
随机推荐
- Harmonic Number(调和级数+欧拉常数)
题意:求f(n)=1/1+1/2+1/3+1/4-1/n (1 ≤ n ≤ 108).,精确到10-8 (原题在文末) 知识点: 调和级数(即f(n))至今没有一个完全正确的公式, ...
- s:form标签
2017-01-07 17:43:18 基本的用法 <!-- Action类必须有一个无参的构造器,因为在执行action方法之前,拦截器已经创建了一个"空"的Action对 ...
- 我将系统从Windows迁移至Linux下的点点滴滴
一.写在最前 由于本人的技术水平有限,难免会出现错误.本文对任何一个人有帮助都是我莫大的荣幸,任何一个大神对我的点拨,我都会感激不尽. 二.技术选型 在2013年8月低的时候,公司中了XXX市场监督局 ...
- 巧用 mask-image 实现简单进度加载界面
最近给 nzoo 折腾官网,拿 angular2.0 + webpack 实现SPA,然后觉得最终打包后的出口文件有点大,用户首次访问会有一个时间较长的白屏等候界面,感觉体验不太好. 于是希望在用户下 ...
- 【腾讯Bugly干货分享】微信热补丁Tinker的实践演进之路
本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57ad7a70eaed47bb2699e68e Dev Club 是一个交流移动 ...
- ES6+ 现在就用系列(一):为什么使用ES6+
系列目录 ES6+ 现在就用系列(一):为什么使用ES6+ ES6+ 现在就用系列(二):let 命令 ES6+ 现在就用系列(三):const 命令 ES6+ 现在就用系列(四):箭头函数 => ...
- 使用Rest访问Redis中的数据
原创文章转载请注明出处:@协思, http://zeeman.cnblogs.com 大家在用Redis保存数据的时候,有不同的序列化方式.用得最多应该还是JSON,有一些场景我们需要以Http请 ...
- 创建DbContext
返回总目录<一步一步使用ABP框架搭建正式项目系列教程> 上一篇介绍了<创建实体>,这一篇我们顺其自然地介绍<创建DbContext>. 温故: 提到DbConte ...
- C#服务器获取客户端IP地址以及归属地探秘
背景:博主本是一位Windows桌面应用程序开发工程师,对网络通信一知半解.一日老婆逛完某宝,问:"为什么他们知道我的地址呢,他们是怎么获取我的地址的呢?" 顺着这个问题我们的探秘 ...
- node.js学习总结(一)
1.1.1 安装 Node.js 有三种方式安装 Node.js:一是通过安装包安装,二是通过源码编译安装,三是在 Linux 下可以通过 yum|apt-get 安装,在 Mac 下可以通过 Hom ...