velocity中使用jquery出现的问题博客分类： web开发学习笔记 velocityjquery：

程序员文章站 2024-03-20 08:54:28

...

velocity中使用jquery：
代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<title>多行滚动jQuery循环新闻列表代码</title>
		<style type="text/css">ul,li{margin:0;padding:0}#scrollDiv{width:300px;height:100px;min-height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden}#scrollDiv li{height:25px;padding-left:10px;}
		</style>
		<script
			src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"
			type="text/javascript">
		</script>
		<script type="text/javascript">
(function($){
$.fn.extend({
Scroll:function(opt, callback){
if (!opt){
var opt = {};
}			
var _this = this.eq(0).find("ul:first");
var lineH = _this.find("li:first").height(),
line = opt.line ? parseInt(opt.line, 10) : parseInt(this.height()/lineH, 10),
speed = opt.speed ? parseInt(opt.speed, 10) : 400,
timer = opt.timer ? parseInt(opt.timer, 10) : 5000; 
if (line == 0){line = 1;}
var upHeight = 0 - line * lineH;
scrollUp = function() {
_this.animate( {
marginTop : upHeight
}, speed, function() {
for (i = 1; i <= line; i++) {
_this.find("li:first").appendTo(_this);
}
_this.css( {
marginTop : 0
});
});
}
_this.hover(function() {
clearInterval(timerID);
}, function() {
timerID = setInterval("scrollUp()", timer);
}).mouseout();
}
})
})(jQuery);


$(document).ready(function() {
$("#scrollDiv").Scroll( {
line : 4,
speed : 400,
timer : 5000
});
});
	</script>
	</head>
	<body>
		<p>
			多行滚动演示：
		</p>
		<div id="scrollDiv">
			<ul>
				<li>
					这是公告标题的第一行
				</li>
				<li>
					这是公告标题的第二行
				</li>
				<li>
					这是公告标题的第三行
				</li>
				<li>
					这是公告标题的第四行
				</li>
				<li>
					这是公告标题的第五行
				</li>
				<li>
					这是公告标题的第六行
				</li>
				<li>
					这是公告标题的第七行
				</li>
				<li>
					这是公告标题的第八行
				</li>
			</ul>
		</div>
	</body>
</html>

问题：
==================文件内容分析错误==================

/defaultSite/dezhou/roadCondition.html:解析错误 : Encountered "\r\nScroll:function(opt, callback){\r\nif (!opt){\r\nvar opt = {};\r\n}\t\t\t\r\nvar _this = this.eq(0).find(\"ul:first\");\r\nvar lineH = _this.find(\"li:first\").height(),\r\nline = opt.line ? parseInt(opt.line, 10) : parseInt(this.height()/lineH, 10),\r\nspeed = opt.speed ? parseInt(opt.speed, 10) : 400,\r\ntimer = opt.timer ? parseInt(opt.timer, 10) : 5000; \r\nif (line == 0){line = 1;}\r\nvar upHeight = 0 - line * lineH;\r\nscrollUp = function() {\r\n_this.animate( {\r\nmarginTop : upHeight\r\n}, speed, function() {\r\nfor (i = 1; i <= line; i++) {\r\n_this.find(\"li:first\").appendTo(_this);\r\n}\r\n_this.css( {\r\nmarginTop : 0\r\n});\r\n});\r\n}\r\n_this.hover(function() {\r\nclearInterval(timerID);\r\n}, function() {\r\ntimerID = setInterval(\"scrollUp()\", timer);\r\n}).mouseout();\r\n}\r\n})\r\n})(jQuery);\r\n\r\n\r\n" at line 14, column 14. Was expecting: ...

原因及解决方法（参考网友解决方法http://www.oschina.net/question/1092_3896）：
elocity的$与Jquery的$发生冲突时的解决方法有以下几个：
1、使用jQuery代替$。
   如:jQuery.ajax();
   缺点：不适合扩展，一旦替换成第三方库时，那就麻烦大发

2、使用jQuery.noConflict。
   如：var j = jQuery.noConflict(); j.ajax();
   缺点：当使用jQuery的相关插件时,会使得插件失效哦！

3、wrap jQuery中的冲突方法。
   如$.ajax()在Velocity中会冲突，则重新定义如下：
function dw(){}
dw.ajax=function(s){
    jQuery.ajax(s);
}
dw.ajax();

方案3基本上解决了1、2中的缺点~~~故推荐使用第三种方法！

velocity中使用jquery出现的问题 博客分类： web开发学习笔记 velocityjquery：