我的一些JS

最新推荐文章于 2024-04-28 11:43:36 发布

hangzhou5257

最新推荐文章于 2024-04-28 11:43:36 发布

阅读量91

点赞数

分类专栏： Javascript+JQuery 文章标签： jQuery JavaScript XHTML C C++ ViewUI

本文链接：https://blog.csdn.net/hangzhou5257/article/details/83734486

版权

Javascript+JQuery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1. 数字单个滚动显示(用了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=utf-8" />
        <title>New Web Project</title>
		<script type="text/javascript" src="lib/jquery/jquery-1.4.2.min.js"></script>
		<script type="text/javascript">
			
			function rollString(){
				rollNumber("58045780", 0, "", "showInput", 50);
				unrollNumber("58045780", 0, "", "showInput2", 80);
			}
			
			function rollNumber(numString, s, v, id, dly){
				var showInput = document.getElementById(id);
				if (s == 10 || numString == ""){
					return;
				}
				showInput.value = v + "" + s;
				if (numString.charAt(0) == s) {
					numString = numString.substring(1);
					v = showInput.value;
					setTimeout("rollNumber('"+numString+"', 0, '"+ v + "', '"+id+"',"+dly+")", dly);
				} else {
					var s = s - 0 + 1;
					setTimeout("rollNumber('"+numString+"',"+s+",'"+v+"','"+id+"',"+dly+")", dly);
				}
			}
			function unrollNumber(numString, s, v, id, dly){
				var showInput = document.getElementById(id);
				if (s == 10 || numString == ""){
					return;
				}
				showInput.value = s + "" + v;
				if (numString.charAt(numString.length - 1) == s) {
					numString = "" + numString.substring(0, numString.length - 1);
					v = showInput.value;
					setTimeout("unrollNumber('"+numString+"', 0, '"+ v + "','"+id+"',"+dly+")", dly);
				} else {
					var s = s - 0 + 1;
					setTimeout("unrollNumber('"+numString+"',"+s+",'"+v+"','"+id+"',"+dly+")", dly);
				}
			}
		</script>
    </head>
    <body>
        <h1>New Web Project Page</h1>
		<input type="button" value=" Show " οnclick="javascript:rollString();" />
		<input type="text" id="showInput" value="" style="font-family:Verdana;font-size:20pt;font-weight:bolder;" />
		<input type="text" id="showInput2" value="" style="font-family:Verdana;font-size:20pt;font-weight:bolder;" />
    </body>
</html>

2.用JQuery的mouseover和mouseout方法来实现菜单等鼠标移入改变背景颜色时(animate动态渐变效果时, 须引入JQuery插件color ), 为避免快速移入移出产生的鼠标移出后仍多次闪动, 应该在背景颜色改变之前, 先把该幸免元素的动作先stop掉...

var c = '#000000';
var bg = '#eeeeee';
$('table div').mouseover(function(){
	$(this).stop().animate({
		'color':bg,
		backgroundColor:c
	}, 100);
}).mouseout(function(){
	$(this).stop().animate({
		color:c,
		backgroundColor:bg
	}, 500);
});

3. JQuery的animate和其它方法交叉执行时(如addClass, removeClass, text, val等等), 会失去顺序执行, 在此处用queue/dequeue方法解决

$('#div').click(function(){
	$(this).stop().animate({width:'0px'}, 2000);
	//在div完全隐藏后, 更换div的内容
	$(this).queue(function(){
		$(this).text('12312312311233333333');
		$(this).dequeue();
	});
	$(this).animate({width:'200px'}, 2000);
});

hangzhou5257

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
我的一些JS

1. 数字单个滚动显示(用了JQuery的选择器) &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xh...
复制链接

扫一扫