基于JQuery的图片动态特效设计与实现

・　２４　・　Ｃｏｍｐｕｔｅｒ　Ｅｒａ　Ｎｏ．１０　２０１　１　基－￣Ｊ　Ｑ　ｕ　ｅ　ｒｙ的图片动态特效设计与实现　刘伟’，王爽　（１．中国医科大学信息管理与信息系统学系，辽宁沈阳１１０００１；２．沈阳工程学院英语系）　摘要：网站设计中的动态元素能够给用户一种全新的感觉，有助于提高网站元素的吸引力，从而达到良好的网站信息　展现、交互效果。文章阐释了在网站设计中三种典型的基于ＪＱｕｅｒｙ的图片动态特效设计方法。　关键词：ＪＱｕｅｒｙ；图片；动态特效；网站　中图分类号：ＴＰ３１１．１　文献标志码：Ａ　文章编号：１００６—８２２８（２０１１）１０—２４—０３　Ｄｅｓｉｇｎ　ａｎｄ　Ｉｍｐｌｅｍｅｎｔａｔｉｏｎ　ｏｆ　Ｐｉｃｔｕｒｅ　Ｄｙｎａｍｉｃ　Ｅｆｆｅｃｔｓ　Ｂａｓｅｄ　ｏｎ　ＪＱｕｅｒｙ　ＬＩＵ　Ｗｅｉ　，ＷＡＮＧ　Ｓｈｕａｎｇ￣　（，．Ｄｅｐｔ．ｏｆ　Ｉｎｆｏｒｍａｔｉｏｎ　Ｍａｎａｇｅｍｅｎｔ　ａｎｄ　Ｉｎｆｏｒｍａｔｉｏｎ　Ｓｙｓｔｅｍｓ，Ｃｈｉｎａ　Ｍｅｄｉｃａｌ　Ｕｎｉｖｅｒｓｉｔｙ，Ｓｈｅｎｙａｎｇ，Ｌｉａｏｎｉｎｇ　１１０００１，Ｃｈｉｎａ；　２．Ｄｅｐｔ．ｏｆ　Ｅｎｇｌｉｓｈ，Ｓｈｅｎｙａｎｇ　Ｉｎｓｔｉｔｕｔｅ　ｏｆ　Ｅｎｇｉｎｅｅｒｉｎｇ）　Ａｂｓｔｒａｃｔ：Ｔｈｅ　ａｐｐｌｉｃａｔｉｏｎ　ｏｆ　ｄｙｎａｍｉｃ　ｅｌｅｍｅｎｔｓ　ｉｎ　ｗｅｂｓｉｔｅ　ｄｅｓｉｇｎ　ｃａｎ　ａｃｈｉｅｖｅ　ａ　ｇｏｏｄ　ｗｅｂｓｉｔｅ　ｉｎｆｏｒｍａｔｉｏｎ　ｄｉｓｐｌａｙ．Ｗｅ　ｅｘｐｌａｉｎ　ｔｈｒｅｅ　ｔｙｐｉｃａｌ　ｄｅｓｉｇｎ　ｍｅｔｈｏｄｓ　ｏｆ　ＪＱｕｅｒｙ—ｂａｓｅｄ　ｐｉｃｔｕｒｅ　ｄｙｎａｍｉｃ　ｅｆｆｅｃｔｓ　ｉｎ　ｗｅｂｓｉｔｅ　ｄｅｓｉｇｎ．　Ｋｅｙ　ｗｏｒｄｓ：ＪＱｕｅｒｙ；ｐｉｃｔｕｒｅ；ｄｙｎａｍｉｃ　ｅｆｆｅｃｔｓ；ｗｅｂｓｉｔｅ　０引言　ＪＱｕｅｒｙ是轻量级的Ｊｓ库并且兼容ＣＳＳ３，还兼容各种浏览　器。ＪＱｕｅｒｙ能被用来处理ＨＴＭＬ　ｄｏｃｕｍｅｎｔｓ、ｅｖｅｎｔｓ、实现动画　具体实现如下：　＜ｓｃｒｉｐｔ　ｓｒｃ＝’＇ｊｓ／ｊｑｕｅｒｙ一１．４．４．ｍｉｎ　ｊｓ”＞＜／ｓｃｒｉｐｔ＞　＜ｓｃｒｉｐｔ　ｓｒｃ＝’Ｉｓ／ｓｌｉｄｅｓ．ｍｉｎ　ｊｑｕｅｒｙ．ｊｓ”＞＜／ｓｃｒｉｐｔ＞　＜ｓｃｒｉｐｔ＞　效果，并且能够为网站提供ＡＪＡＸ交互。同时，ＪＱｕｅｒｙ能够使用　户的ｈｔｍｌ页实现代码和ｈｔｍｌ内容分离，即不用再在ｈｔｍｌ里插入　ｉＳ来调用命令，只需要定义ｉｄ【ｌ　’。本文通过调用ＪＱｕｅｒｙ库中的　相关函数实现了网页设汁中典型的三种图片动态特效，并获得　了良好的网页展示、交互效果。　￥（ｆｕｎｃｔｉｏｎ０｛　￥（’＃ｓｌｉｄｅｓ’）．ｓｌｉｄｅｓ（｛　ｐｒｅｌｏａｄ：ｔｒｕｅ，　ｐｒｅｌｏａｄｌｍａｇｅ：’ｉｍａｇｅｓ／ｌｏａｄｉｎｇ．ｇｉｆ＇，／／等待图标　ｐｌａｙ：６０００，／／图片切换延迟　ｐａｕｓｅ：６０００．／／图片暂停时间　ｈＯｖｅｒＰａｕｓｅ：ｔｒｕｅ．　１基于ＪＱｕｅｒｙ的图片动态特效设计　１．１带标题的图片幻灯切换效果　ａｎｉｍａｔｉｏｎＳｔａｒｔ：ｆｕｎｃｔｉｏｎ（）｛　￥（’．ｃａｐｔｉｏｎ’）．ａｎｉｍａｔｅ（｛　ｂｏｔｔｏｍ：一３５　），１Ｏ０）：　），　ａｎｉｍａｔｉｏｎＣｏｍｐｌｅｔｅ：ｆｕｎｃｔｉｏｎ（ｃｕｒｒｅｎｔ）｛　￥（。ｃａｐｔｉｏｎ‘）．ａｎｉｍａｔｅ（｛　ｂｏｔｔｏｍ：０　），１０Ｏ）：　ｉｆ（ｗｉｎｄｏｗ．ｃｏｎｓｏｌｅ＆＆ｃｏｎｓｏｌｅ　ｌｏｇ）｛　ｃｏｎｓｏｌｅ．１ｏｇ（ｃｕｒｒｅｎｔ）；　图ｌ图片幻灯片效果图　图片的幻灯切换效果类似于ＰＰＴ中的幻灯片切换效果，可　以使多幅图片以一种动态的方式自动切换，也可以通过鼠标点　击控制要显示的图片，从而达到良好的交互效果，如图１所示，　收稿日期：２０１１　６　２９　作者简介：刘伟（１９７５一），男，硕士研究生，副教授，研究方向：计算机网络，人工智能，ＷＥＢ工程。　

计算机时代２０１１年第ｌ０期　＜／ｓｃｒｉｐｔ＞　＜ｄｉｖ　ｃｌａｓｓ＝’‘ｓｃｒｏｌｐｉｃｔ”ｉｄ＝”ｃｏｎｔａｉｎｅｒ。’＞　・　２５　・　＜Ｉ－＞＜ａ　ｈｒｅｆ＝　”＞＜ｉｍｇ　ｓｒｃ＝”ｉｍａｇｅ３．ＪＰｇ”ａｌｔ＝　／＞＜／ａ＞＜／ｌｉ＞　＜／ｕｌ＞　＜ｄｉｖ＞　＜ａ　ｈｒｅｆ＝”＃”ｃｌａｓｓ＝”ｇｏｌ”ｉｄ＝”ｇｏｌ’。＞＜＜＜，ａ＞　＜ａ　ｈｒｅｆ＝’’　”ｃｌａｓｓ＝”ｇｏｒ”ｉｄ＝”ｇｏｒ’’＞＞＞＜，ａ＞　＜／ｄｉｖ＞　＜／ｄｉｖ＞　＜ｄｉｖ　ｉｄ＝”ｅｘａｍｐｌｅ”’　＜ｉｍｇ　ｓｒｃ＝”ｉｍａｇｅｓ／ｎｅｗ－ｒｉｂｂｏｎ　ｐｎｇ”ａｌｔ＝…’ｗｉｄｔｈ＝’’６０”ｈｅｉｇｈｔ　”　６０”ｖｓｐａｃｅ＝”１　０”Ｉｄ＝”ｒｉｂｂｏｎ”　＜ｄｉｖ　ｉｄ＝”ｓｌｉｄｅｓ”＞　＜ｄｉｖ　ｃｌａｓｓ＝”ｓｌｉｄｅｓｃｏｎｔａｉｎｅｒ。　’＿＜ｄｉｖ＞　＜ｓｃｒｉｐｔ　ｔｙｐｅ＝”ｔｅｘｔ／ｊａｖａｓｃｒｉｐｔ”ｓｒｃ＝”ｊｓ／ｊｑｕｅｒｙ一１．４．２．ｍｉｎ．ｊｓ”＞＜／　＜！一一＜！第一张图片一＞　＜ａ　ｈｒｅｆ＝”ｉｍａｇｅ１．ＪＰｇ”ｔｉｔｌｅ＝…‘ｔａｒｇｅｔ＝＂＿ｂｌａｎｋ”＞＜ｉｍｇ　ｓｒｃ　”ｉｍａｇｅ１．ＪＰｇ”ｗｉｄｔｈ＝”３００”ｈｅｉｇｈｔ＝”２００“ａｌｔ＝””＞＜／ａ’　＜ｄｉｖ　ｃｌａｓｓ＝“ｃａｐｔｉｏｎ”ｓｔｙｌｅ＝”ｂｏｔｔｏｍ：Ｏ’’＞　ｐ＞图片１＜／ｐ）　＜／ｄｉｖ＞　＜／ｄｉｖ＞　＜ｄｉｖ＞　＜！－－＜！第二张图片一＞　＜ａ　ｈｒｅｆ＝”ｉｍａｇｅ２．ＪＰｇ”ｔｉｔｌｅ＝　ｔａｒｇｅｔ＝＂＿ｂｌａｎｋ”＞＜ｉｍｇ　ｓｒｃ＝　”ｉｍａｇｅ２．ＪＰｇ”ｗｉｄｔｈ＝”３００”ｈｅｉｇｈｔ＝”２００”ａｌｔ＝”Ｓｌｉｄｅ　２”＞＜，ａ＞　＜ｄｉｖ　ｃｌａｓｓ＝”ｃａｐｔｉｏｎ”＞　‘Ｄ＞图片２＜／ｐ＞　＜／ｄｉｖ＞　＜／ｄｉｖ＞　＜ｄｉｖ＞　＜！～＜！第三张图片一＞　＜ａ　ｈｒｅｆ＝”ｉｍａｇｅ３ｊｐｇ”ｔｉｔｌｅ＝’…ｔａｒｇｅｔ＝’＿＇ｂｌａｎｋ”＞＜ｉｍｇ　ｓｒｃ＝　”ｉｍａｇｅ３．ＪＰｇ”ｗｉｄｔｈ＝”３００”ｈｅｉｇｈｔ＝”２００”ａｌｔ＝”Ｓｌｉｄｅ　３”＞＜，ａ＞　＜ｄｉｖ　ｃｌａｓｓ＝”ｃａｐｔｉｏｎ’‘＞　＜Ｄ＞图片３＜／ｐ＞　＜／ｄｉｖ＞　＜／ｄｉｖ＞　＜／ｄｉｖ＞　＜／ｄｉｖ＞　＜ｉｍｇ　ｓｒｃ＝　’ｆｒａｍｅ　ｐｎｇ’’ｗｉｄｔｈ＝”３００。’ｈｅｉｇｈｔ＝”２００”ａｌｔ＝””ｉｄ＝　”ｆｒａｍｅ’’＞　＜／ｄｉｖ＞　＜／ｄｉｖ＞　１．２图片循环滚动切换效果　网页中的多幅图片以循环滚动的方式切换，当前焦点图片　以放大、清晰的方式显示，其他图片以缩略方式显示，从而达到　一种耳目一新的效果，如图２所示，具体实现如下：　一　图２循环滚动切换效果图　＜ｄｉｖ　ｃ￣ａｓｓ＝”ｂｏｘ．’ｉｄ＝”ｂｏｘ．’　＜ｕ　＜Ｉｊ＞＜ａ　ｈｒｅｆ＝”撑”＞＜ｉｍｇ　ｓｒｃ＝”ｉｍａｇｅ１．ｊＰｇ”ａｌｔ＝…’　／＞＜／ａ＞＜／ｌｉ＞　＜ｌｉ＞＜ａ　ｈｒｅｆ＝“撑”＞＜ｉｍｇ　ｓｒｃ＝”ｉｍａｇｅ２．ＪＰｇ”ａｌｔ＝””　Ｉ＞＜／ａ＞＜／ｌｉ＞　ｓｃｒｉｐｔ＞　＜ｓｃｒｉｐｔ　ｔｙｐｅ＝”ｔｅｘｔ／ｊａｖａｓｃｒｉｐｔ’　’　￥（ｆｕｎｃｔｉｏｎＯ｛　ｔｒｉｄ．ｉｎｉｔＯ；　））：　ｖａｒ　ｔｒｉｄ＝ｎｅｗ　Ｏｂｊｅｃｔ（）；　ｔｒｉｄ＝｛　Ｉｉ：￥（”＃ｂｏｘ　Ｉｉ－１），　ｌｉｃｕｒ：￥（”＃ｂｏｘ　ｌｉ．ｃｕｒ”），　ｕＩ：￥（”＃ｂｏｘ　ｕｌ”），　Ｉｅｎ：￥（’＇＃ｂｏｘ　ＩｉＩ．）．１ｅｎｇｔｈ，　ｄｏｏｒ：ｔｒｕｅ，　ｃｕｒｉｄｘ：１，　ｇ０ｌ：　均ｏｌ”），　ｇ０ｒ：￥（”＃ｇｏｒ”），　ｉｎｉｔ：ｆｕｎｃｔｉｏｎ（）｛　ｔｈｉｓ．ｆｏｒｍａｔ（）；　ｔｈｉｓ．ｂｉｎｄａｃｔＯ；　），　ｆｏｒｍａｔ：ｆｕｎｃｔｉｏｎ（）｛　ｖａｒ　Ｗ＝（ｔｈｉｓ．１ｅｎ）　９６＋１７５＋”ｐｘ”：　ｔｈｉｓ．ｕ１．ｃｓｓ（｛　”ｗｉｄｔｈ’。：Ｗ　｝）：　），　ｓｔｅｐ：ｆｕｎｃｔｉｏｎ（ｉ）｛　ｖａｒ　ｓｅｌｆ＝ｔｈｉｓ；　ｉｆ（！ｓｅｌｆ．ｄｏｏｒ）　ｒｅｔｕｒｎ　ｆａＩｓｅ；　ｓｅｌｆ．ｄｏｏｒ＝ｆａＩｓｅ；　ｓｅｌｆ．ｃｕｒｉｄｘ＋＝ｉ：　ｖａｒ　ｍ＝９２　ｌ：　ｉｆ（ｉ＜０）（　ｉｆ（ｓｅｌｆ．ｃｕｒｉｄｘ＜＝一１）｛　ｓｅｌｆ．ｃｕｒｉｄｘ＋＝ｓｅｌｆ．Ｉｉ．１ｅｎｇｔｈ；　）　ｉ＝一ｉ：　ｆｏｒ（ｖａｒ　ｋ＝Ｏ；ｋ＜ｉ：ｋ＋＋）｛　ｓｅｌｆ．ｕ１．ｉｆｎｄ（”ｌｉ：ｌａｓｔ”）．ｐｒｅｐｅｎｄＴｏ（ｓｅｌｆ．ｕＩ）；　）　ｓｅｌｆ．ｕ１．ｃｓｓ（｛　”ｍａｒｇｉｎ－ｌｅｆｔ”‘ｍ＋”ｐｘ”　））：　ｓｅｌｆ．ｕ１．ａｎｉｍａｔｅ（｛　”ｍａｒｇｉｎ—ｌｅｆｔ’’：…０’　

・　２６　・　Ｃｏｍｐｕｔｅｒ　Ｅｒａ　Ｎｏ．１０　２０１　１　），｛　ｄｕｒａｔｉｏｎ：５００，　ｃｏｍｐｌｅｔｅ：ｆｕｎｃｔｉｏｎ（）｛　ｓｅｌｆ．ｄｏｏｒ：ｔｒｕｅ；　）　））：　）　ｅｌｓｅ　ｉｆ（ｉ＞０）｛　ｉｆ（ｓｅｌｆ．ｃｕｒｉｄｘ＞＝ｓｅｌｆ．１ｉ．１ｅｎｇｔｈ）｛　ｓｅｌｆ　ｃｕｒｉｄｘ一＝ｓｅｌｆ．１ｉ　ｌｅｎｇｔｈ；　）　ｓｅｌｆ．ｕ１．ａｎｉｍａｔｅ（｛　”ｍａｒｇｉｎ—ｌｅｆｔ”：一ｍ＋”Ｄｘ”　），｛　ｄｕｒａｔｉｏｎ：５００，　ｃｏｍｐｌｅｔｅ：ｆｕｎｃｔｉｏｎ（）｛　ｆｏｒ（ｖａｒ　ｋ＝０　ｋ＜ｉ：ｋ＋＋）｛　ｓｅｌｆ．ｕｌ　ｆｉｎｄ（”ｌｉ：ｆｉｒｓｔ”）．ａｐｐｅｎｄＴｏ（ｓｅｌｆ．ｕＩ）：　）　ｓｅｌｆ．ｕ１．ｃｓｓ（｛　”ｍａｒｇｉｎ—ｌｅｆｔ‘’：０　｝）；　ｓｅｌｆ．ｄｏｏｒ＝ｔｒｕｅ；　）　））：　）　ｓｅｌｆ．ｄｉｓｐｌａｙ（）；　），　ｄｉｓｐｌａｙ：ｆｕｎｃｔｉｏｎ（）｛　ｖａｒ　ｓｅｌｆ＝ｔｈｉｓ；　ｓｅｌｆ．１ｉｃｕｒ．ａｎｉｍａｔｅ（｛　”ｐａｄｄｉｎｇ—ｔｏｐ”：”２８ｐｘ”．　”ｗｉｄｔｈ’。：”８０ｐｘ”．　”ｈｅｉｇｈｔ”：”５６ｐｘ”．　”ｏｐａｃｉｔｙ”：”０．７”　），（ｄｕｒａｔｊｏｎ：５Ｏ０））：　ｓｅｌｆ．１ｉ．ｅｑ（ｓｅｌｆ．ｃｕｒｉｄｘ）ａｎｉｍａｔｅ（｛　”ｗｉｄｔｈ”：”１　６０ｐｘ”．　”ｈｅｉｇｈｔ”：“１　１　４ｐｘ”．　”ｐａｄｄｉｎｇ—ｔｏｐｌＩｌｌ’０”　”ｏｐａｃｉｔｙ”：”１．０”　），｛ｄｕｒａｔｉｏｎ：５００，　ｃｏｍｐｌｅｔｅ：ｆｕｎｃｔｉｏｎ０（ｃｕｒ（ｓｅｌｆ．１ｉ．ｅｑ（ｓｅｌｆ．ｃｕｒｉｄｘ））；）｝）　ｔｈｉｓ　ｌｉｃｕｒ＝ｔｈｉｓ．１ｉ．ｅｑ（ｔｈｉｓ．ｃｕｒｉｄｘ）；　｝，　ｂｉｎｄａｃｔ：ｆｕｎｃｔｉｏｎ（）｛　ｖａｒ　ｓｅｌｆ＝ｔｈｉｓ；　ｔｈｉｓ．ｇｏｒ．ｂｉｎｄ（”ｃｌｉｃｋ”，ｆｕｎｃｔｉｏｎ（）｛　ｓｅｌｆ．ｓｔｅｐ（１）ｉ　￥（ｔｈｉｓ）ｂｌｕｒ（）；　））：　ｔｈｉｓ．ｇｏ１．ｂｉｎｄ（”ｃｌｉｃｋ”，ｆｕｎｃｔｉｏｎ（）｛　ｓｅｌｆ．ｓｔｅｐ（一１）：　￥（ｔｈｉｓ）．ｂｌｕｒ（）；　））：　ｓｅｌｆ．１ｉ．ｂｉｎｄ（。’ｃｌｉｃｋ”。ｆｕｎｃｔｉｏｎ（）｛　ｉｆ（￥（ｔｈｉｓ）．ｈａｓＣｌａｓｓ（”ｃｕｒ”））ｒｅｔｕｒｎ；　ｖａｒ　ｊ＝￥（ｔｈｉｓ）．ｉｎｄｅｘ（）一１：　ｓｅｌｆ．ｓｔｅｐ（ｊ）；　））；　）　）　ｆｕｎｃｔｉｏｎ　ｃｕｒ（ｅｌｅ，ｃｕｒｒｅｎｔＣｌａｓｓ，ｔａｇ）｛　ｖａｒ　ｅｌｅ＝￥（ｅＩｅ）ｌｌ　ｅｌｅ；　ｖａｌ　ｔａｇ＝ｔａｇ　ｌＩ””：　ｖａｒ　ｍａｒｋ　ｃｕｒｒｅｎｔＣｌａｓｓ　Ｊ　Ｊ”ｃｕｒ”：　ｅｌｅ．ａｄｄＣｌａｓｓ（ｍａｒｋ）．ｓｉｂｌｉｎｇｓ（ｔａｇ）．ｒｅｍｏｖｅＣｌａｓｓ（ｍａｒｋ）；　）　＜／ｓｃｒｉｐｔ＞　１．３感应鼠标的图片放大效果　网页中所展示的是图片的缩略图，当鼠标焦点位ｆ缩略　图的任一区域时，该缩略图的源图像将以放大、清晰的方式　显示出来，从而达到良好的视觉效果，如图３所示，具体实现　如下：　图３图片放大效果图　＜ｈｅａｄ＞　＜ｓｃｒｉｐｔ　ｔｙｐｅ＝”ｔｅｘｔ／ｊａｖａｓｃｒｉｐｔ”ｓｒｃ＝’＇ｊｓ／ｊｑｕｅｒｙ１．３．２．ｊｓ”＞＜／ｓｃｒｉｐｔ＞　＜／ｈｅａｄ＞　＜ｂｏｄｙ＞　＜ｓｃｒｉｐｔ　ｔｙｐｅ＝”ｔｅｘｔ／ｊａｖａｓｃｒｉｐｔ。’＞　￥（ｆｕｎｃｔｉｏｎ０｛　￥（’．ｔｉｐ’）．ｍｏｕｓｅｏｖｅｒ（ｆｕｎｃｔｉｏｎ０｛　ｖａｒ￥ｔｉｐ＝￥（。＜ｄｉｖ　ｉｄ＝”ｔｉｐ”＞＜ｄｉｖ　ｃｌａｓｓ＝”ｔ＿ｂｏｘ”＞＜ｄｉＶ＞＜ｓ＞＜ｉ＞＜／　ｉ＞＜／ｓ＞＜ｉｍｇ　ｓｒｃ＝”。＋ｔｈｉｓ．ｓｒｃ＋”’Ｉ＞＜ｌｄｉｖ＞＜ｌｄｉｖ＞＜／ｄｉｖ＞。）：　￥（’ｂｏｄｙ’）．ａｐｐｅｎｄ（￥ｔｉｐ）；　￥（。＃ｔｉｐ。）．ｓｈｏｗ（’ｆａｓｔ’）；　））．ｍｏｕｓｅｏｕｔ（ｆｕｎｃｔｉｏｎ０｛　￥（’＃ｔｉｐ’）．ｒｅｍｏｖｅ（）；　））．ｍｏｕｓｅｍｏｖｅ（ｆｕｎｃｔｉｏｎ（ｅ）｛　￥（。ｔ＃ｉｐ’）．ｃｓｓ（｛”ｔｏｐ”：（ｅ．ｐａｇｅＹ－６０）＋”ｐｘ”，”ｌｅｆｔ”：（ｅ．ｐａｇｅＸ＋３０）＋”ｐｘ”））　））　））　＜／ｓｃｒｉｐｔ＞　＜ｐ＞＜，ｐ＞　＜ａ　ｈｒｅｆ＝…／’＞＜ｉｍｇ　ｃｌａｓｓ＝”ｔｉｐ”ｓｒｃ＝”ｉｍａｇｅｓ／ｉｍａｇｅ１　ＪＰｇ”／＞＜／ａ＞　（下转第２９页）　

计算机时代２０１１年第１０期　ｄｏｓ．ｗｒｉｔｅｌｎｔ（ｂ．１ｅｎｇｔｈ）；　ｄｏｓ．ｗｒｉｔｅ（ｂ）；／／￣对象序列后的字节数组　・　２９　・　４系统运行及测试　系统运行效果如图４所示。首先设置用户权限和显示选项，　再选择目标单位和日期并提交，最后查询结果在手机屏幕匕显示。　（３）ＤａｔａｌｎｐｕｔＳｔｒｅａｍ类实例来接收数据：　ｄｉｎ＝ｃｏｎｎ．０ｐｅｎＤａｔａｌｎｐｕｔＳｌｒｅａｍ（）：／，接收数据　ｉｎｔ　ｌｅｎｇｔｈ＝（ｉｎｔ）ｃｏｎｎ．ｇｅｔＬｅｎｇｔｈ０；　ｂｙｔｅ［］ｂ＝ｎｅｗ　ｂｙｔｅ［１ｅｎｇｔｈ］；　ｄｉｎ．ｒｅａｄ（ｂ）；／／读取服务器端发送的对象序列化字节数组　）ｃａｔｃｈ（Ｅｘｃｅｐｔｊｏｎ　ｉｅ）　３服务器端的设计与实现　３．１服务器的组成　系统Ｊ２ＥＥ￣．务器分为ｗｅｂ层、业务层和数据存储层。服　务器使用Ｓｅｒｖｌｅｔ容器来处理来自客户端的请求，在经过初级处　理后Ｓｅｒｖｌｅｔ将请求交由服务器上使用ＥＪＢ进行会话，处理请　求，并通过ＪＤＢＣ连接到后台数据库服务器的组成结构如图３　所示。　图４系统运行结果显示　５结束语　图３服务器结构示意图　３．２　Ｓｅｒｖｌｅｔ的设计与实现　本文探讨了Ｊ２ＭＥ与Ｊ２ＥＥ相结合的轻量级移动数据查询　架构的设计和实现方法，对权限验证操作方式和Ｊ２ＭＥ、Ｊ２ＥＥ间　Ｓｅｒｖｌｅｔ需要对客户都发送过来的信息进行提取、分类，并　传输对象数据的思路和实现作了详细的描述。该系统与传统　的短信查询方式相比具有实时性强、数据传输安全且不受字符　根据不同信息执行不同的模块，同时向客户端返回执行结果。　Ｓｅｒｖｌｅｔ有如下几个主要功能模块组成：一是信息接受与提取模　数量限制等优点，稍作修改能很好地集成到现有的警务系统　块，主要功能是接受客户端发送过来的信息（序列化后的数据　流），从中提取用户名、密码、显示选项、单位和日期等信息。二　是权限验证模块，该模块主要用于对查询客户端提交的用户名　和密码进行验汪，若通过则予以授权查询具体操作，否则返问　错误信息。三是主信息查询模块，该模块通过用户提交的单位　中。系统设计思路和实现方法对完善移动警务系统功能和进　一步开发移动数据信息系统具有很好的参考价值。　参考文献：　［１】郝玉龙，李向前Ｊ２ＭＥ移动应用开发［Ｍ］清华大学出版社，北京交通　大学出版社．２００６．　信息和日期信息对值班信息进行查询，并将结果封装成对象返　【２】杨军，秦冬，王莹．Ｊ２ＭＥ嵌入式开发案例精解［Ｍ】．电子工业出版社，　２００７．　回。最后是发送模块，就是将查询结果数据以对象形式序列化　【３】杨光，孙丹．Ｊ２ＭＥ￣序设计实例教程【Ｍ】．清华史学出版社，２００８．　后发送至客户端。　【４】汪永松．ｊ２ｍｅ手机高级编程【Ｍ】．机械工业出版社，２００９．　系统服务器端平台使用Ａｐａｃｈｅ　Ｔｏｍｃａｔ　５．５，数据库采用　ＭｙＳＱＬ　Ｓｅｒｖｅｒ　５．１。数据库中建有值班信息表ＴａｂｌｅＯｎｄｕｔｙ，　服务器使用ＪＤＢＣ技术实现对数据库的访问。　●Ｉ●●■●　●●●ＩＩ●●　（．ｒ．ａ－第２６页）　＜／ｂｏｄｙ＞　一　【５】徐炳文．基于Ｊ２ＭＥ的移动教务课表查询系统开发与实现【Ｊ】．西南民　族大学学报自然科学版，２０１１．３７（１）：１６１－１６６　【２】张子秋－ＪＱｕｅｒｙ风暴一完美用户体验［Ｍ】．电子工业出版社，２０１１．　【３】王成霞，薛春光．基于Ｊｓｃｒｉｐｔ技术的动态时钟和滚动字幕的设计【Ｊ】．　天津理工学院学报，２００３．１９（２）：８０～８２　２结束语　在网站的规划设计与实现中，通过调用ＪＱｕｅｒｙ库中的函数　【４】张惠芬．ＪａｖａＳｃｒｉｐｔ的理论分析及其应用【Ｊ】．衡水学院学报，２００６．８　（１）：４５－４６　实现图片的动态特效，不仅可以增强网页显示的视觉效果，而　且可以获得良好的展示和交互效果。　参考文献：　【１１陶国荣．ｊＱｕｅｒｙ权威指南【Ｍ】　机械工业出版社，２０１１．　【５】王志刚．ｊＱｕｅｒｙ即学即用［Ｍ】．电子工业出版社，２０１１．　【６】朱印宏．犀利开发—ｊＱｕｅｒｙ内檬详解与实践【Ｍ】．清肆大学出版社，　２０１０．