jQuery模拟百度新闻不间断滚动...-关于变量那些事2-jQUERY延迟加载外部JS

当前位置: 编程技术>WEB前端

本页文章导读:

▪jQuery模拟百度新闻不间断滚动效果，支持文字、图片水平垂直滚动一、jQuery.roll 插件使用说明jQuery.roll 是模拟百度新闻不间断滚动效果，并支持文字、图片水平垂直滚动，该函数使用方法为：/* * @作者华子yjh http://www.cnblogs.com/yangjunhua/ * @source 博客园 * @module.........

▪关于变量那些事2 关于全局变量和局部变量1.局部变量 1 <script type="text/javascript"> 2 3 function aaa() 4 { 5 var a=10; 6 } 7 function bbb() 8 { 9 alert(a)10 }11 aaa()12 bbb()13 </script>.........

▪jQUERY延迟加载外部JS var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");$.getScript(gaJsHost + "google-analytics.com/ga.js",function(){try {var pageTracker = _gat._getTracker("UA-123456-16");pageTracker._trackPageview();} catch(err) .........

[1]jQuery模拟百度新闻不间断滚动效果，支持文字、图片水平垂直滚动

来源: 发布时间: 2013-11-06

一、jQuery.roll 插件使用说明

jQuery.roll 是模拟百度新闻不间断滚动效果，并支持文字、图片水平垂直滚动，该函数使用方法为：

/*
* @作者华子yjh http://www.cnblogs.com/yangjunhua/
* @source 博客园
* @module jQuery roll
* @param: contentCls 内容容器className
* @param: contentParentId 内容容器父元素节点ID
* @param: configs 配置参数
*
* @config: effect 滚动效果
* @config: duration 滚动1个像素的运行时间(毫秒数)
* @config: delay 开始滚动的延迟时间(毫秒数)
*
*/

jQuery.roll(contentCls, contentParentId, configs);

二、函数源码

1 jQuery.extend({
2 roll: function(contentCls, contentParentId, configs){
3
4 var setTimeID, totalWidth = 0, totalHeight = 0,
5 firstContent, secondContent, contents;
6
7 (function(){
8 var singleContent, cloneContent, nodeList;
9
10 singleContent = $(contentCls, contentParentId);
11 nodeList = singleContent.children();
12
13 if (configs.effect === 'scrollX') {
14 $.each(nodeList, function(idx, itm) {
15 totalWidth += $(itm).outerWidth(true);
16 });
17 singleContent.css({ 'width': totalWidth + 'px' });
18 }
19 else if (configs.effect === 'scrollY') {
20 $.each(nodeList, function(idx, itm) {
21 totalHeight += $(itm).outerHeight(true);
22 });
23 singleContent.css({ 'height': totalHeight + 'px' });
24 }
25
26 cloneContent = singleContent.clone();
27 cloneContent.appendTo(contentParentId);
28
29 contents = $(contentCls, contentParentId);
30 firstContent = contents[0];
31 secondContent = contents[1];
32
33 if (configs.effect === 'scrollX') {
34 $(firstContent).css({ 'left': 0 });
35 $(secondContent).css({ 'left': totalWidth + 'px' });
36 }
37 else if (configs.effect === 'scrollY') {
38 $(firstContent).css({ 'top': 0 });
39 $(secondContent).css({ 'top': totalHeight + 'px' });
40 }
41
42 })()
43
44 function cssAnimate(){
45 if (configs.effect === 'scrollX') {
46 $(firstContent).css({ left: parseInt(firstContent.style.left, 10) - 1 + 'px' });
47 $(secondContent).css({ left: parseInt(secondContent.style.left, 10) - 1 + 'px' });
48
49 $.each(contents, function(idx, itm) {
50 if (parseInt(itm.style.left,10) === -totalWidth) {
51 $(itm).css({ left: totalWidth + 'px' });
52 }
53 });
54 }
55 else if (configs.effect === 'scrollY') {
56 $(firstContent).css({ top: parseInt(firstContent.style.top, 10) - 1 + 'px' });
57 $(secondContent).css({ top: parseInt(secondContent.style.top, 10) - 1 + 'px' });
58
59 $.each(contents, function(idx, itm) {
60 if (parseInt(itm.style.top,10) === -totalHeight) {
61 $(itm).css({ top: totalHeight + 'px' });
62 }
63 });
64 }
65
66 setTimeId = setTimeout(cssAnimate, configs.duration);
67 }
68
69 function rollRun(){
70 setTimeId = setTimeout(cssAnimate, configs.delay);

[2]关于变量那些事2

来源: 发布时间: 2013-11-06

关于全局变量和局部变量

1.局部变量

1 <script type="text/javascript">
2
3 function aaa()
4 {
5 var a=10;
6 }
7 function bbb()
8 {
9 alert(a)
10 }
11 aaa()
12 bbb()
13 </script>

运行结果：错误: “a”未定义，a是局部变量，他只属于函数aaa，并不属于函数bbb

2.全局变量1

1 <script type="text/javascript">
2 var a
3 function aaa()
4 {
5 var a=10;
6 }
7 function bbb()
8 {
9 alert(a)
10 }
11 aaa()
12 bbb()
13 </script>

运行结果：弹出undefined，这也是变量的类型之一，只不过是undefined类型，他并不同等与第一种的未定义

变量的类型是由赋给变量的值决定的，这个时候bbb函数里的a是全局变量，虽然var了，但是并没有指定值，所以是undefined

3.全局变量2

1 <script type="text/javascript">
2 var a
3 function aaa()
4 {
5 a=10;
6 }
7 function bbb()
8 {
9 alert(a)
10 }
11 aaa()
12 bbb()
13 </script>

运行结果：10，a是全局变量并且通过函数aaa赋了值——10

ps：我们经常称undefined是未定义，都是通过1和2，是不是可以说undefined≠未定义呢

本文链接

[3]jQUERY延迟加载外部JS

来源: 发布时间: 2013-11-06

本文链接