jQuery高仿腾讯图片浏览器
viewer.js--一个强大的jQuery图像查看插件
viewer.js--⼀个强⼤的jQuery图像查看插件Viewer 是⼀款强⼤的 jQuery 图像浏览插件。
主要功能：⽀持选项⽀持⽅法⽀持事件⽀持触摸⽀持移动⽀持缩放⽀持旋转⽀持键盘跨浏览器⽀持部分插件⽹站提供的下载包有缺陷，不能兼容ie8-10。
错误表现为放⼤的图⽚没有取到url，导致图⽚不显⽰。
所以此链接为 viewer的官⽅演⽰，及github上的开源代码。
使⽤⽅法：1.引⼊css和js<link rel="stylesheet" href="css/viewer.min.css"><script src="js/viewer.min.js"></script>2. html 部分<ul id="viewer"><li><img src="img/tibet-1.jpg" data-original="img/tibet-1.jpg" alt="图⽚1"></li><li><img src="img/tibet-2.jpg" data-original="img/tibet-2.jpg" alt="图⽚2"></li><li><img src="img/tibet-3.jpg" data-original="img/tibet-3.jpg" alt="图⽚3"></li><li><img src="img/tibet-4.jpg" data-original="img/tibet-4.jpg" alt="图⽚4"></li><li><img src="img/tibet-5.jpg" data-original="img/tibet-5.jpg" alt="图⽚5"></li><li><img src="img/tibet-6.jpg" data-original="img/tibet-6.jpg" alt="图⽚6"></li></ul>插件默认会取图⽚的src地址。
仿腾讯QQ的用户登录窗口中的图形验证码和在线用户计数的实现示例
仿腾讯QQ的用户登录窗口中的图形验证码和在线用户计数的实现示例1.1.1仿腾讯QQ的用户登录窗口中的图形验证码1、添加一个实现验证码功能的JavaBean组件类（1）类名称为VerifyCodeBean，包名称为com.px1987.oasystem.util（2）编程该JavaBean2、再添加一个在页面中产生验证码JPEG图像功能的调度Servlet组件（1）新建一个Servlet组件（2）类名称为ShowVerifyCodeImage，包名称为com.px1987.oasystem.imsystem.servlet（3）设置该Servlet的url-pattern为：/showVerifyCodeImage.action（4）将产生出下面的Servlet组件（5）编程该Servlet组件（6）部署该Servlet组件<servlet><servlet-name>ShowVerifyCodeImage</servlet-name><servlet-class>com.px1987.oasystem.imsystem.servlet.ShowVerifyCodeImage</servlet-class> </servlet><servlet-mapping><servlet-name>ShowVerifyCodeImage</servlet-name><url-pattern>/showVerifyCodeImage.action</url-pattern></servlet-mapping>3、在客户端的HttpClientUserInfoRequestResponseImple类获得服务器端程序产生的验证码（1）getVerifyCodeImage方法的代码示例（2）执行IM客户端程序时，将能够看到下面的效果1.1.2仿腾讯QQ的在线用户实时统计计数的实现示例1、在线计数的OnLineCounter类（1）类名称为OnLineCounter，包名称为com.px1987.oasystem.util（2）编程该类2、执行IM客户端程序时，将能够看到下面的在线用户计数的功能实现效果。
jquery图片预览插件实现方法详解
jquery图⽚预览插件实现⽅法详解⼀、需求说明效果如图：⼆、代码实现项⽬结构如图：example.html<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>LIGHTBOX EXAMPLE</title><script type="text/javascript" src="/jquery-1.8.3.js" ></script><script type="text/javascript" src="/ui/1.10.4/jquery-ui.js"></script><script type="text/javascript" src="js/jquery-mousewheel.js" ></script><script type="text/javascript" src="js/mylightbox.js" ></script><script type="text/javascript">$(function(){// 写法⼀：/*LightBox.init({imgObj : $(".imgPreview"),config : {boxHeight : 300,boxWidth : 500}});*/// 写法⼆：$(".imgPreview").lightbox({boxHeight : 300,boxWidth : 500});});</script><link rel="stylesheet" href="css/mylightbox.css" rel="external nofollow" /><link rel="stylesheet" href="/ui/1.10.4/themes/smoothness/jquery-ui.css" /></head><body><img id="lightImgaa" class="imgPreview" src="images/1.png"/><img id="lightImgbb" class="imgPreview" src="images/2.png"/></body></html>mylightbox.css.white_content {display: none;position: absolute;width: 800px;height: 600px;/*padding: 6px 16px;*/padding: 0;border: 3px solid rgb(252,252,252, 0.2);background-color: #f5f6f7;z-index:1002;overflow: hidden;}.white_content .con {width: 800px;height: 600px;}.black_overlay {display: none;position: absolute;top: 0%;left: 0%;width: 100%;height: 100%;background-color:#777777;z-index:1001;-moz-opacity: 0.8;opacity:.80;filter: alpha(opacity=80);}.white_content .close {position: relative;float:right;clear:both;width:100%;text-align:right;margin:0;z-index: 10;height: 20px;line-height: 20px;background: white;}.white_content .close a {color:#333;text-decoration:none;font-size:14px;font-weight:700}（兼容⿏标滚轮事件的⼀个插件）mylightbox.js(function($){var LightBox = function(lightbox) {var _this_ = this;// 保存单个lightbox组件this.lightbox = lightbox;// 默认配置参数this.config = {// 弹框的默认⾼度"boxHeight" : 600,// 弹框的默认宽度"boxWidth" : 800,// 页⾯显⽰的缩略图默认⾼度"thumbnailWidth" : 80,// 页⾯显⽰的缩略图默认宽度"thumbnailHeight" : 80};var userConfig = lightbox.config;if (userConfig) { // 如果传⼊了⽤户设置，则使⽤⽤户设置；否则使⽤默认配置$.extend(this.config, userConfig);}var imgObj = lightbox.imgObj; // 需要有图⽚预览功能的img对象（jquery对象）imgObj.width(this.config.thumbnailWidth).height(this.config.thumbnailHeight); // 设置缩略图⼤⼩// 设置图⽚点击后显⽰预览图imgObj.click(function() {_this_.invoke($(this), _this_.config);});};LightBox.prototype = {// 事件驱动⽅法invoke : function(imgObj, config) {var _this_ = this;// 存放图⽚信息的对象this.imgInfo = this.getImgInfo(imgObj[0].src, config);var promptHtml = '<div><div id="light" class="white_content">'+ '<div class="close"><a class="removePrompt" href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" >关闭</a> <a class="resetPosition" href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="exte + ' <a class="downloadImg" href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" >下载</a></div>'+ '<div class="con"></div></div>'+ '<div id="fade" class="black_overlay"></div></div>';var imgHtml = '<img id="lightImg" class="ui-content" src="' + this.imgInfo.imgPath + '"/>';var $imgHtml = $(imgHtml).width(this.imgInfo.imgActualWidth).height(this.imgInfo.imgActualHeight);var $promptHtml = $(promptHtml);var $whiteContent = $promptHtml.find(".white_content");var $con = $promptHtml.find(".con");// 设置⾃定义的弹框⾼宽$whiteContent.width(config.boxWidth).height(config.boxHeight);$con.width(config.boxWidth).height(config.boxHeight);$imgHtml.appendTo($con);var $body = $("body");$promptHtml.appendTo($body);// 设置提⽰框的样式var returnData = this.promptPosition($promptHtml);this.imgInfo.imgOriginTop = returnData.imgOriginTop;this.imgInfo.imgOriginLeft = returnData.imgOriginLeft;// 绑定事件$promptHtml.find(".resetPosition").off("click").on("click", function() { // 重置按钮_this_.revertImg($promptHtml, _this_.imgInfo);});$promptHtml.find(".removePrompt").off("click").on("click", function() { // 关闭按钮$promptHtml.remove();});$promptHtml.find(".downloadImg").off("click").on("click", function() { // 下载按钮_this_.downloadImg(_this_.imgInfo.imgPath);});this.showPrompt($promptHtml);},// 显⽰提⽰框showPrompt : function(promptObject) {var $whiteContent = promptObject.find(".white_content");var $blackOverlay = promptObject.find(".black_overlay");$whiteContent.show();$blackOverlay.show();},// 对需要显⽰的提⽰框的样式进⾏初始化操作promptPosition : function(promptObject, imgActualHeight, imgActualWidth) {var _this_ = this;// 设置提⽰框⽔平垂直居中var $whiteContent = promptObject.find(".white_content");var $con = $whiteContent.find(".con"); // 存放图⽚内容区var $close = $whiteContent.find(".close"); // 存放“关闭，重置”按钮区var leftDistance = ($(window).width() - $whiteContent.outerWidth(false)) / 2;var topDistance = ($(window).height() - $whiteContent.outerHeight(false)) / 2;$whiteContent.css({"left":leftDistance,"top":topDistance});// 添加在div范围内的⿏标滚轮事件窗⼝滚动// ⿏标滚动var $lightImg = $whiteContent.find(".ui-content");$whiteContent.on("mousewheel", function(event, delta){var imgWidth = $lightImg.width() * (1 + 0.1 * delta);var imgHeight = $lightImg.height() * (1 + 0.1 * delta);$lightImg.width(imgWidth).height(imgHeight);_this_.setImgCenterPosition($lightImg, $close, $con);});// 设置待显⽰图⽚在提⽰框居中var data = this.setImgCenterPosition($lightImg, $close, $con);// 设置图⽚可以拖拽$lightImg.draggable({scroll: true});// 记录图⽚的初始位置var returnObj = new Object();returnObj.imgOriginTop = data.top;returnObj.imgOriginLeft = data.left;return returnObj;},// 设置图⽚在⽗容器中⽔平垂直居中显⽰setImgCenterPosition : function(imgObj, closeObj, parentObj) {var imgOriginTop = (parentObj.outerHeight() - closeObj.outerHeight() - imgObj.outerHeight())/2;var imgOriginLeft = (parentObj.outerWidth() - imgObj.outerWidth())/2;var data = {"top" : imgOriginTop, "left" : imgOriginLeft};imgObj.css(data);return data;},// 下载图⽚这个只能在chrome上⽤，firefox，IE都不⾏①downloadImg : function(imgPath) {var imgFileName = imgPath.substring(stIndexOf("/")+1); // 获取图⽚⽂件名var $a = $("<a></a>").attr("href", imgPath).attr("download", imgFileName);$a[0].click();},// 将图⽚恢复⾄初始⼤⼩，和原始位置revertImg : function(promptObject, imgInfo) {var $lightImg = promptObject.find(".ui-content");if ($lightImg.height() != imgInfo.imgActualHeight|| $lightImg.width() != imgInfo.imgActualWidth|| parseInt($lightImg.css("top")) != imgInfo.imgOriginTop|| parseInt($lightImg.css("left")) != imgInfo.imgOriginLeft) {$lightImg.animate({"height" : imgInfo.imgActualHeight,"width" : imgInfo.imgActualWidth,"top": imgInfo.imgOriginTop,"left": imgInfo.imgOriginLeft});}},// 获取图⽚信息getImgInfo : function(imgPath, config) {// 获取显⽰弹框的宽⾼var boxHeight = config.boxHeight;var boxWidth = config.boxWidth;var imgObj = $("<img/>", {"src" : imgPath})[0];// 获取图⽚的真实宽⾼var imgRealHeight = imgObj.height;var imgRealWidth = imgObj.width;// 计算图⽚适应提⽰框⼤⼩后呈现的宽⾼var imgActualHeight;var imgActualWidth;if (imgRealHeight / imgRealWidth >= boxHeight / boxWidth) {imgActualHeight = imgRealHeight > boxHeight ? boxHeight : imgRealHeight;imgActualWidth = imgActualHeight / imgRealHeight * imgRealWidth;} else {imgActualWidth = imgRealWidth > boxWidth ? boxWidth : imgRealWidth;imgActualHeight = imgActualWidth / imgRealWidth * imgRealHeight;}var returnObj = new Object();returnObj.imgPath = imgPath;returnObj.imgRealHeight = imgRealHeight;returnObj.imgRealWidth = imgRealWidth;returnObj.imgActualHeight = imgActualHeight;returnObj.imgActualWidth = imgActualWidth;return returnObj;},};// 插件供外部调⽤的两种写法// ⽅法⼀：LightBox.init = function(lightboxes) {var _this_ = this;var imgObjs = lightboxes.imgObj;var config = lightboxes.config;imgObjs.each(function() {new _this_({imgObj : $(this),config : config});});};window.LightBox = LightBox;// ⽅法⼆：注册成jq⽅法$.fn.extend({lightbox : function(config){this.each(function(){new LightBox({imgObj : $(this),config : config});});return this;}});}(jQuery));// 下载图⽚这个只能在chrome上⽤，firefox，IE都不⾏①以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。
模拟微信浏览器
伪装虽易测试不易之微信浏览器前言众所周知，微信项目html5界面的开发时间会相对较长（为什么这么说就不解释了），以及在微信浏览器内会出现一些无法在web端检测出的问题，笔者有了模拟微信浏览器的想法，google之后，发现有方法来伪装浏览器，也就是利用浏览器的user Agent，（每款浏览器都有自己不同的user Agent ，而且通过user Agent可以判断浏览器版本、所用的操作系统等参数，当用户通过浏览器向服务器发起请求时，请求头（header）中就会包含User Agent，服务器端可以获取该值）。
插件下载：笔者以火狐为例来详解如何模拟微信浏览器：首先，下载火狐浏览器的User Agent Switcher 插件，下载地址：https:///zh-CN/firefox/addon/user-agent-switcher/ 插件如图：安装成功后可在工具选项中看到Default User Agent选项，如下图：获取微信浏览器的User Agent经笔者的测试，MicroMessenger是微信浏览器特定的标识，所以上图中的if语句即可判断请求是否为微信浏览器发起。
注意一下上图中的agent，下文中要用到搭建微信浏览器笔者用自己的GT-I9300获取的agent为：Mozilla/5.0 (Linux; U; Android 4.1.2; zh-cn; GT-I9300 Build/JZO54K) AppleWebKit/534.30 (KHTML, like Gecko)Version/4.0 Mobile Safari/534.30 MicroMessenger/5.2.380打开Default User Agent下的将user agent切换为刚建的GT-9300 进行测试：自己比较一下原来的样子,如图算是添加成功了。
模拟微信浏览器请求这是笔者之前所用的方法，基本作用跟前文差不多，希望对各位有所帮助1 package sedion.wq.MonitorWechattest;23 import org.apache.http.HttpEntity;4 import org.apache.http.HttpResponse;5 import org.apache.http.HttpStatus;6 import org.apache.http.client.HttpClient;7 importorg.apache.http.client.methods.HttpGet; 8 import org.apache.http.impl.client.DefaultHttpClient; 9 importorg.apache.http.util.EntityUtils;10 11 /**12 * 模拟微信浏览器请求13 */14 public class MonitorWechatBrowser {15 public static void main(String[] args) {16 String url = "http://www.where is your ";17 String userAgent="Mozilla/5.0 (Linux; U; Android 4.1.2; zh-cn; GT-I9300 Build/JZO54K) "+18 "AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30 MicroMessenger/5.2.380";19 String html = getHttpClientHtml(url, "UTF-8");20 System.out.println(html);21 }22 23 24 /**25 *根据URL获得所有的html信息26 */27 public static String getHttpClientHtml(String url,String code,StringuserAgent) {28 String html = null;29 HttpClient httpClient = new DefaultHttpClient();// 创建httpClient对象30 HttpGet httpget = new HttpGet(url);// 以get方式请求该URL31httpget.setHeader("User-Agent",userAgent );32 try {33 // 得到responce对象34 HttpResponse responce = httpClient.execute(httpget);35 // 返回码36 int returnCode = responce.getStatusLine().getStatusCode();37 // 是200证明正常其他就不对38 if (returnCode== HttpStatus.SC_OK) {39 // 获得相应实体40 HttpEntity entity = responce.getEntity();41 if (entity != null) {42 html = newString(EntityUtils.toString(entity));// 获得html源代码43 }44 }45 } catch (Exception e) {46 System.out.println("出现出现异常");47e.printStackTrace();48 } finally {49httpClient.getConnectionManager().shutdown();50 }51 return html;52 }53 }总结本文只是自我的一个总结，如果对你有所帮助是我的荣幸，文章不妥之处希望指正，大神勿喷，请通过留言或关注微信公众帐号codenewbie来支持小八哥！若有不妥之处，欢迎指点。
仿腾讯 QQ 和 Skype 通过URL触发自己的程序
::首页 >> 文档中心 >> 在线杂志 >> I n t e r n e t 与W E B 服务[ 在线杂志 第52期 ][ 原创文档 本文适合中级读者 已阅读4968次 ]文档仿腾讯 QQ 和 Skype 通过URL 触发自己的程序作者：谢红伟下载源代码如果你电脑中装有QQ ，在IE 地址栏输入：“tencent://Message/?menu=yes&exe=&uin=13231462”然后[回车]，立即可以与我的QQ 建立临时会话，如下图：Skype 也有类似的功能。
到底是如何实现的呢？看MSDN 中有这么一段话：The IURLSearchHook interface is used by the browser to translate the address of an unknown URL protocol. Whenattempting to browse to a URL address that does not contain a protocol, the browser will first attempt to determine the correct protocol from the address. If this is not successful, the browser will create URL Search Hook objects and call each object's Translate method until the address is translated or all of the hooks have been queried.IURLSearchHook 接口被浏览器用来转换一个未知的URL 协议地址。
当浏览器企图去打开一个未知协议的URL 地址时，浏览器首先尝试从这个地址得到当前的协议，如果不成功，浏览器将创建在系统中注册的URL Search Hook 对象并调用每一个对象的Translate 方法，直到地址被转换或所有的URL Search Hook 都尝试过。
基于zepto.js实现仿手机QQ空间的大图查看组件ImageView.js详解
基于zepto.js实现仿手机QQ空间的大图查看组件ImageView.js详解这篇文章主要介绍了基于zepto.js实现仿手机QQ空间的大图查看组件ImageView.js的源码和使用方法，并附上一个使用ImageView.js的实例，这里分享给大家，有需要的小伙伴参考下。
调用方式 :ImageView(index,imgData) --index参数为图片默认显示的索引值，类型为Number --imaData参数为图片url数组，类型为Array使用之前要先引入 zepto.js 文件ImageView.js具体代码如下：代码如下:/** ImageView v1.0.0* --基于zepto.js的大图查看* --调用方法 ImageView(index,imgDada)* --index 图片默认值显示索引,Number --imgData 图片url数组,Array* */var ImageView=(function(window,$){var _this=$("#slideView"),_ImgData=[],_index=0,_length=0,_start=[],_org=[],_orgTime=null,_lastTapDate=null,_zoom=1,_zoomXY=[0,0],_transX=null,_advancedSupport = false,_doubleDistOrg=1,_doubleZoomOrg=1,isDoubleZoom = false,isSlide=true,isDrag=false,timer=null,winW=window.innerWidth,winH=window.innerHeight;/*** 事件对象 event*/var Event={touchstart:function(e){e.preventDefault ;if (_advancedSupport && e.touches && e.touches.length >= 2) {var img = getImg ;$(img).css({"-webkit-transitionDuration": "0ms","transitionDuration": "0ms"});_doubleZoomOrg = _zoom;_doubleDistOrg = getDist(e.touches[0].pageX,e.touches[0].pageY, e.touches[1].pageX, e.touches[1].pageY);isDoubleZoom = true;return}e = e.touches ? e.touches[0] : e;isDoubleZoom = false;_start = [e.pageX, e.pageY];_org = [e.pageX, e.pageY];_orgTime = Date.now ;_transX = -_index * winW;if(_zoom!=1){_zoomXY = _zoomXY || [0, 0];_orgZoomXY = [_zoomXY[0], _zoomXY[1]];var img = getImg ;img&&($(img).css({"-webkit-transitionDuration": "0ms","transitionDuration": "0ms"}));isDrag = true}else{_this.find(".pv-inner").css({"-webkit-transitionDur ation":"0ms","transitionDuration":"0ms"});isSlide = true}},touchmove:function(e){e.preventDefault ;if (_advancedSupport && e.touches && e.touches.length >= 2) {var newDist = getDist(e.touches[0].pageX, e.touches[0].pageY, e.touches[1].pageX, e.touches[1].pageY);_zoom = (newDist/_doubleDistOrg) * _doubleZoomOrg var img = getImg ;$(img).css({"-webkit-transitionDuration": "0ms","transitionDuration": "0ms"});if (_zoom _zoom = 1;_zoomXY = [0, 0];$(img).css({"-webkit-transitionDuration": "200ms","transitionDuration": "200ms"})} else if (_zoom >getScale(img) * 2){_zoom = getScale(img) * 2;}$(img).css({"-webkit-transform": "scale(" + _zoom+ ") translate(" + _zoomXY[0] + "px," + _zoomXY[1] + "px)","transform": "scale(" + _zoom + ") translate(" + _zoomXY[0] + "px," + _zoomXY[1] + "px)"});return}if (isDoubleZoom){return;}e = e.touches ? e.touches[0] : e;if (_zoom != 1) {var deltaX = (e.pageX - _start[0]) / _zoom;var deltaY = (e.pageY - _start[1]) / _zoom;_start = [e.pageX, e.pageY];var img = getImg ;var newWidth = img.clientWidth *_zoom,newHeight = img.clientHeight * _zoom;var borderX = (newWidth - winW) / 2 / _zoom,borderY = (newHeight - winH) / 2 / _zoom;(borderX >= 0)&&(_zoomXY[0] borderX)&&(deltaX /= 3);(borderY > 0)&&(_zoomXY[1] borderY)&&(deltaY /= 3);_zoomXY[0] += deltaX;_zoomXY[1] += deltaY;(_length == 1 && newWidth (_length == 1 && newHeight $(img).css({"-webkit-transform": "scale(" + _zoom + ") translate(" + _zoomXY[0] + "px," + _zoomXY[1] + "px)","transform": "scale(" + _zoom + ") translate(" + _zoomXY[0] +"px," + _zoomXY[1] + "px)"})}else{if (!isSlide) return;var deltaX = e.pageX - _start[0];(_transX > 0 || _transX _transX = -_index * winW + deltaX;_this.find(".pv-inner").css({"-webkit-transform":"t ranslate(" + _transX + "px,0px) translateZ(0)"});}},touchend:function(e){if (isDoubleZoom) {return;}if (_zoom != 1) {if (!isDrag){return;}var img = getImg ;var newWidth = img.clientWidth *_zoom,newHeight = img.clientHeight * _zoom;var borderX = (newWidth - winW) / 2 / _zoom,borderY = (newHeight - winH) / 2 / _zoom;if (_length > 1 && borderX >= 0) {var updateDelta = 0;var switchDelta = winW / 6;if (_zoomXY[0] updateDelta = 1;}else if (_zoomXY[0] > borderX + switchDelta / _zoom && _index > 0){updateDelta = -1;}if (updateDelta != 0) {scaleDown(img);changeIndex(_index + updateDelta);return}}var delta = Date.now - _orgTime;if (delta (delta var deltaDis = Math.pow(180 / delta, 2);_zoomXY[0] += (_zoomXY[0] - _orgZoomXY[0]) * deltaDis;_zoomXY[1] += (_zoomXY[1] - _orgZoomXY[1]) * deltaDis;$(img).css({"-webkit-transition": "400ms cubic-bezier(0.08,0.65,0.79,1)","transition": "400ms cubic-bezier(0.08,0.65,0.79,1)"})} else{$(img).css({"-webkit-transition": "200ms linear","transition": "200ms linear"});}if (borderX >= 0){if (_zoomXY[0] _zoomXY[0] = -borderX;}else if (_zoomXY[0] > borderX){_zoomXY[0] = borderX;}}if (borderY > 0){if (_zoomXY[1] _zoomXY[1] = -borderY;}else if (_zoomXY[1] >borderY){_zoomXY[1] = borderY;}}if (Math.abs(_zoomXY[0]) $(img).css({"-webkit-transform": "scale(" + _zoom + ") translate(0px," + _zoomXY[1] + "px)","transform": "scale(" + _zoom + ") translate(0px," + _zoomXY[1] + "px)"});return} else{$(img).css({"-webkit-transform": "scale(" + _zoom + ") translate(" + _zoomXY[0] + "px," + _zoomXY[1] + "px)","transform": "scale(" + _zoom + ") translate(" + _zoomXY[0] + "px," + _zoomXY[1] + "px)"});}isDrag = false}else{if (!isSlide){ return;}var deltaX = _transX - -_index * winW;var updateDelta = 0;if (deltaX > 50){updateDelta = -1;}else if(deltaX updateDelta = 1; }_index=_index+updateDelta; changeIndex(_index);isSlide =false}},click:function(e){_zoom=1;_zoomXY=[0,0];_this.css("opacity","0");timer=setTimeout(function {_this.css({"display":""}).html(""); unbind ;},150)},dobelTap:function(e){clearTimeout(timer);var now = new Date;if (now - _lastTapDate return; }_lastTapDate = now;var img = getImg ;if (!img){return;}if (_zoom != 1){scaleDown(img);}else{scaleUp(img);}},setView:function(e){winW=window.innerWidth;winH=window.innerHeight;_this.width(window.innerWidth).height(window.innerH eight);translate((-_index*window.innerWidth),0,0,$(".pv-in ner")[0]);scaleDown(getImg )}};var handleEvent=function(e){ switch (e.type){case "touchstart":Event.touchstart(e);break;case "touchmove":Event.touchmove(e);break;case "touchcancel":case "touchend":Event.touchend(e);break;case "orientationchange": case "resize":Event.setView(e);break}};/*** 绑定事件*/var bind=function {_this.on("singleTap",function(e){e.preventDefault ;var now = new Date;if (now - _lastTapDate return;}_lastTapDate = now;Event.click(e);return false;}).on("doubleTap", function(e) {e.preventDefault ;Event.dobelTap(e);return false;});_this.on("touchstart touchmove touchend touchcancel", function(e) {handleEvent(e);});Event.setView ;"onorientationchange" in window ? window.addEventListener("orientationchange",Event.s etView,false) : window.addEventListener("resize",Event.setView,false);};/*** 解除事件*/var unbind= function {_this.off ;"onorientationchange" in window ? window.removeEventListener("orientationchange",Even t.setView, false) : window.removeEventListener("resize",Event.setView, false)};var getDist= function(x1, y1, x2, y2) {return Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2), 2)}/*** 图片缩放*/var getScale=function(img) {var h = img.naturalHeight, w = img.naturalWidth,Scale=w*h/(img.clientHeight*img.clientWidth);return Scale;};var scaleUp=function(img) {var scale = getScale(img);if (scale > 1)$(img).css({"-webkit-transform": "scale(" + scale + ")","transform": "scale(" + scale + ")","-webkit-transition": "200ms","transition": "200ms"});_zoom = scale;};var scaleDown=function(img) {_zoom = 1;_zoomXY = [0, 0];_doubleDistOrg = 1;_doubleZoomOrg = 1;$(img).css({"-webkit-transform": "scale(1)","transform":"scale(1)","-webkit-transition":"200ms","transition": "200ms"});};/*** 滑动效果* dist*/var translate = function( distX,distY,speed,ele) {if( !!ele ){ ele=ele.style; }else{ return; }ele.webkitTransitionDuration = ele.MozTransitionDuration = ele.msTransitionDuration = ele.OTransitionDuration = ele.transitionDuration = speed + 'ms';ele.webkitTransform = 'translate(' + distX + 'px,'+distY+'px)' + 'translateZ(0)';ele.msTransform = ele.MozTransform = ele.OTransform = 'translateX(' + distX + 'px) translateY(' + distY + 'px)';};/*** 更改索引值 _index*/var changeIndex=function(index,force){if (index index = 0;}else if(index >= _length){index =_length - 1;}_index = index;translate((-_index*window.innerWidth),0,force? "0" : "200" ,$(".pv-inner")[0]);$("#J_index").html(_index+1+"/"+_length);imgLoad ;}/*** 图片获取*/var getImg=function(index) {var img = _this.find("li").eq(index || _index).find("img");if (img.size == 1){return img[0];}else{return null}}/*** 图片加载*/var imgLoad=function {if($(".pv-img").eq(_index).find("img")[0]){$("#J_loading").css("display","");return;}else{$("#J_loading").css("display","block");var tempImg=new Image ,w,h,set;tempImg.src=_ImgData[_index];$(".pv-img").eq(_index)[0].appendChild(tempImg);tempImg.onload=function {$("#J_loading").css("display","");}}};/*** 创建大图查看Dome结构*/var Create=function {_this.append("").append(""+(_index+1)+"/"+_length+"").append("")for(var i=0;i $(".pv-inner").append("")}imgLoad ;};/*** 大图查看初始化*/var init=function {!!_this[0]||$("body").append("");_this=$("#slideView");($.os.iphone || $.os.android && parseFloat($.os.version) >= 4)&&(_advancedSupport = true);} ;/*** 大图查看返回接口函数* ImageView(index,data)* index 初始索引值 nubmer* data 图片数组 array*/var ImageView=function(index,data){_ImgData=data;_index=index;_length=data.length;//创建dom结构Create ;//dom结构显示_this.css("display","block");//绑定事件bind ;}return ImageView;})(window,Zepto);ImageView.js用到的css代码如下：代码如下:/*大图查看*/.slide-view {background: #000;position: fixed;width: 100%;height: 100%;overflow: hidden;top: 0;left: 0;z-index: 100;opacity:0;display: none;-webkit-animation:fadeIn .2s linear forwards;animation:fadeIn .2s linear forwards;-webkit-touch-callout:none;-webkit-transform-style: preserve-3d; }.slide-view .counts {position: absolute;top: 5%;left: 0;right: 0;text-align: center;font-size: 0;-webkit-transform-style: preserve-3d; }.slide-view .counts .value {border-radius: 9px;line-height: 18px;padding: 0 6px;font-size: 11px;display: inline-block;background-color: rgba(102,102,102,.6);color: #f1f1f1;}.pv-inner {position: relative;z-index: -1;display: -webkit-box;display: box;width: 100%;height: 100%;-webkit-transition: all 350ms linear;-webkit-backface-visibility:hidden;transition: all 350ms linear;backface-visibility:hidden;-webkit-touch-callout:none;-webkit-transform-style: preserve-3d; }.pv-inner li {text-align: center;display: -webkit-box;display: box;-webkit-box-align: center;overflow: hidden;width: 100%;height: 100%;-webkit-touch-callout: none;backface-visibility: hidden;-webkit-transform-style: preserve-3d; }.pv-inner img {max-width: 97%;max-height: 100%;-webkit-transform: scale(1)translate(0px,0px);transform: scale(1) translate(0px,0px);visibility:visible;-webkit-transition: 200ms;transition: 200ms;-webkit-user-select: none;user-select: none;display: block;margin: 0 auto;backface-visibility:hidden;-webkit-transform-style: preserve-3d; } @-webkit-keyframes fadeIn{0%{opacity:0;}100%{opacity:1;}}@keyframes fadeIn{0%{opacity:0;}100%{opacity:100%;}}/*--------------------loading-----------------------*/.ui-loading {position: absolute;left: 50%;top: 50%;display: none;vertical-align: middle;font: 0/0 arial;margin: -5px 0 0 -10px;}.ui-loading i {display: inline-block;width:5px;height: 12px;background: #fff;vertical-align: top;-webkit-animation: loading-spin 1s infinite linear;animation: loading-spin 1s infinite linear;} .ui-loading i {-webkit-animation: loading-spin 1s infinite linear;animation: loading-spin 1s infinite linear}.ui-loading i.t2 {margin: 0 3px;-webkit-animation-name:loading-spin-one;animation-name: loading-spin-one} .ui-loading i.t3 {-webkit-animation-name: loading-spin-two;animation-name: loading-spin-two} @-webkit-keyframes loading-spin {0% {opacity: 0}30% {opacity: 1;-webkit-transform: scale(1,1.2)} 60% {opacity: 0;-webkit-transform: scale(1)}100% {opacity: 0}}@-webkit-keyframes loading-spin-one {0% {opacity: 0}20% {opacity: 0}50% {opacity: 1;-webkit-transform: scale(1,1.2)} 80% {opacity: 0;-webkit-transform: scale(1)}100% {opacity: 0}}@-webkit-keyframes loading-spin-two {0% {opacity: 0}40% {opacity: 0}70% {opacity: 1;-webkit-transform: scale(1,1.2)} 100% {opacity: 0;-webkit-transform: scale(1)}}@keyframes loading-spin {0% {opacity: 0}30% {opacity: 1;transform: scale(1,1.2)}60% {opacity: 0;transform: scale(1)}100% {opacity: 0}}@keyframes loading-spin-one {0% {opacity: 0}20% {opacity: 0}50% {opacity: 1;transform: scale(1,1.2)}80% {opacity: 0;transform: scale(1)}100% {opacity: 0}}@keyframes loading-spin-two {0% {opacity: 0}40% {opacity: 0}70% {opacity: 1;transform: scale(1,1.2)}100% {opacity: 0;transform: scale(1)}}/*--------------------loading-end----------------------*/ps:代码功能比较简单，可能会存在诸多问题。
代替iframe的方法
代替iframe的方法【实用版4篇】目录（篇1）1.引言：介绍 iframe 的作用和局限性2.几种常见的代替 iframe 的方法3.1.使用 AJAX 和 jQuery4.2.使用静态资源5.3.使用弹出窗口6.4.使用嵌入式框架7.5.使用单页应用8.结论：总结各种方法的优缺点及适用场景正文（篇1）在网页设计中，iframe 是一种常用的技术，可以方便地在一个页面中嵌入另一个网页。
然而，iframe 也存在一些局限性，比如 SEO 优化困难、加载速度较慢等问题。
针对这些问题，本文将为大家介绍几种常见的代替 iframe 的方法。
首先，可以使用 AJAX 和 jQuery 技术来实现网页内容的动态加载。
通过 AJAX，可以实现与服务器的数据交互，获取所需的网页内容，并使用 jQuery 来操作 DOM 元素，将获取到的内容插入到指定位置。
这种方法可以提高网页加载速度，有利于 SEO 优化。
其次，可以使用静态资源来代替 iframe。
例如，可以将一个网页的内容生成为一个静态的 HTML 文件，然后通过 iframe 的 src 属性直接引用这个静态文件。
这样可以减少服务器的负担，提高加载速度，但需要注意的是，这种方法适用于内容相对固定的网页。
第三，可以使用弹出窗口来实现嵌入式展示。
通过 JavaScript 控制弹出窗口的显示和关闭，可以实现对内容的灵活展示。
这种方法适用于内容较为复杂，需要独立展示的场景。
第四，可以使用嵌入式框架来代替 iframe。
例如，可以使用 Google 推出的 Accelerated Mobile Pages（AMP）框架，将网页内容转换为 AMP 格式，然后嵌入到原始页面中。
这种方法可以提高加载速度，有利于 SEO 优化，但需要注意的是，AMP 框架有一定的使用限制，不适用于所有场景。
最后，可以使用单页应用（SPA）来实现网页内容的动态加载和展示。
通过 SPA，可以将网页划分为多个模块，实现模块化开发和页面路由，提高用户体验。
QQ手机浏览器,又一次模仿的逆袭？
番 （ ４） 图 。
从 目前来 看 ， ＱＱ 览器 手机 版》的功 能只相 当 于一 年前 的 ￣ Ｃ 《 浏 （ ＷＥ 浏 览器》， Ｕ Ｂ 要走 的路 还有 很长 。 不过 从 腾 讯一贯 的表 现来 看， 它一定会 将更多 好用的功能 加入 到其 中一 一 “ 别人 的路， 别人无 路可走 。 走 让 ”皿睡匝
◎首次运行． 软 件会 自动 获取话 费信息
在软件安装之后 ， 根据提示设定好使用手机的地区和套餐信息。然后 ， 它会 花费一分钟左右的时间来计算当前话费情况 （ ） 图１ 。
Ｐ Ｄ２ １Ｉ 期Ｉ １ ｃｌ ０ ｏ 第３ ４
感 到 陌 生 。 过 多 标 签 形 式 ， 们 可 以 高 效 率 地 浏 览 多 网 通 我
《 ＱＱ浏 览 器 手 机 版 》的操 作 方 式 ， 模 仿 之 中 却 有 着 一 点 新 在 意。为什么这么说呢 ？ 因为它既保留了 《 Ｃ Ｅ 浏览器》的操作方 ＵＷ Ｂ
式， 叉加入了 《 手机ＱＱ》的浏览方法 ， 相信你在这两者之间能找到 自己习惯的那一种 （ 图３） 。对了， 忘记说了， 打开“ 菜单 设置 一 一
《 力资费 通》是一 个 适用于 ￥０Ｖ 版 的手机 资费统 计软件 （ 瓦 ６ ３ 目前仅 支持 中国移动） 它 集成了 “ ， 资费保 护” 能。 过它 ， 功 通 我们 可以清楚地 了解 实时 的话费 情况 ， 以更安 全旗 也陡用手机 。 可
软件 的安 装过 程 ， 我就 不 赘述 无非 就是 通 过 蓝牙 或者 数 据线 ， 软件 将 复制到 手机上 ， 然后在 文件管理 器 中运行 安装 文件而 已。
手机话费睫时报
・ 轩
，
瓦力资费通
山寨QQ(韩顺平版)
这是一个简单的javaProject项目，没有涉及到数据库界面对这个项目中完成的功能进行阐述：1、qq用户登录：用户账号为1、2、3一直到50，密码都为123456，由于没有涉及到数据库，所以只是简单的在服务器进行验证。
2、实现1对1之间的聊天，实现1对多之间的聊天。
3、实现用户上线显示功能具体的演示为：1、启动服务器QqServer下com.qq.view.MyServerFrame，在该类下面启动服务器2、启动客户端QqClient下com.qq.view.QqClientLogin，在该类下面输入账号和密码登入ps:聊天时要把要把需要聊天的窗口都打开，才能看到。
比如1和2聊天，必须打开1对2聊天的窗口和2对1聊天的窗口QQ客户端：QQ服务器下面的是关于各个包的源代码，小伙伴们可以新建一个class，然后把这些拷贝上去就可以用了，当然前提是按照上面的工程创建好包Image文件夹下用到的图片：命名为：beibu.gif命名为：xiangdao.png命名为：quxiao.png命名为：qq.png命名为：mm.png命名为：clear.png命名为：dengru.pngQqClientConService类：package com.qq.client.model;import java.io.ObjectInputStream;import java.io.ObjectOutputStream;import .Socket;import com.qq.client.tools.ClientConServerThread;import com.qq.client.tools.ManageClientConServerThread; import mon.Message;import er;/*** 客户端连接服务器后台* */public class QqClientConService {public Socket client;//判断是否成功登录,成功返回true,否则返回falsepublic boolean sendLoginInfoToServer(Object o) {boolean isLogin = false;try {//创建连接client = new Socket("localhost", 9999);ObjectOutputStream oos = newObjectOutputStream(client.getOutputStream());oos.writeObject(o);ObjectInputStream ois = newObjectInputStream(client.getInputStream());Message message = (Message)ois.readObject();//登录成功的判断if(message.getMesType()==1) {isLogin = true;//登录成功,创建一个改客户端和服务器的线程ClientConServerThread ccst = new ClientConServerThread(client);//把改线程添加到管理线程的map中ManageClientConServerThread.addClientConServerThread(((User )o).getName(), ccst);//启动该线程new Thread(ccst).start();}} catch (Exception e) {e.printStackTrace();}return isLogin;}}QqClientUser类：package com.qq.client.model;import er;/*** 这是QQ客户端,发送用户名和密码** */public class QqClientUser {//调用客户端连接服务器后台的方法,返回true为成功登录,false为登入失败public boolean checkUser(User user) {return newQqClientConService().sendLoginInfoToServer(user);}}ClientConServerThread类：package com.qq.client.tools;import java.io.ObjectInputStream;import .Socket;import com.qq.client.view.QqChar;import com.qq.client.view.QqFriendList;import mon.Message;import mon.MessageType;/*** 这是客户端和服务器保持通讯的线程* */public class ClientConServerThread implements Runnable{ public Socket client;public ClientConServerThread(Socket client) {this.client = client;}@Overridepublic void run() {//不停的读取从服务器发来的消息while(true) {try {ObjectInputStream ois = newObjectInputStream(client.getInputStream());Message message = (Message) ois.readObject();//判断发来的消息包是否为普通消息包,或者是返回在线好友的包if(message.getMesType() ==MessageType.message_common_mes) {//把从服务器发来的消息显示在聊天界面:1.从管理聊天窗口的类中取得该窗口 2.调用显示方法.QqChar qqChar =ManageQqChar.getQqChar(message.getGetter()+""+message.getSender());qqChar.showMessage(message);} else if(message.getMesType() == MessageType.message_ret_onLineFriend) {String getter = message.getGetter();//修改响应的好友列表QqFriendList qqFriendList = ManageQqFriendList.getQqFriendList(getter);//更新在线好友if(qqFriendList != null) {qqFriendList.updateFriend(message);}}} catch (Exception e) {e.printStackTrace();}}}}ManageClientConServerThread类：package com.qq.client.tools;import java.util.HashMap;import java.util.Map;/*** 这是一个管理客户端和服务器保持通讯的线程类* */public class ManageClientConServerThread {public static Map map = new HashMap<String, ClientConServerThread>();//把线程添加到map中public static void addClientConServerThread(String userName, ClientConServerThread ccst) {map.put(userName, ccst);}//根据用户名取得该线程public static ClientConServerThread getClientConServerThread(String userName) {return (ClientConServerThread)map.get(userName);}}ManageQqChar类：package com.qq.client.tools;import java.util.HashMap;import java.util.Map;import com.qq.client.view.QqChar;/*** 这是一个管理用户聊天界面的类* */public class ManageQqChar {public static Map map = new HashMap<String, QqChar>();//把用户聊天界面Qqchar添加到map中public static void addQqChar(String loginAndFriend, QqChar qqchar) {map.put(loginAndFriend, qqchar);}//根据登入用户和发送用户取得该聊天界面public static QqChar getQqChar(String loginAndFriend) { return (QqChar)map.get(loginAndFriend);}}ManageQqFriendList类：package com.qq.client.tools;import java.util.HashMap;import java.util.Map;import com.qq.client.view.QqFriendList;/*** 管理好友、黑名单..界面类* */public class ManageQqFriendList {public static Map map = new HashMap<String, QqFriendList>();//把用用户列表类添加到map中public static void addQqFriendList(String userName, QqFriendList list) {map.put(userName, list);}//根据登录用户取得该用户列表类public static QqFriendList getQqFriendList(String userName) { return (QqFriendList)map.get(userName);}}package com.qq.client.view;import java.awt.event.ActionEvent;import java.awt.event.ActionListener;import java.io.ObjectOutputStream;import java.util.Date;import javax.swing.ImageIcon;import javax.swing.JButton;import javax.swing.JFrame;import javax.swing.JPanel;import javax.swing.JTextArea;import javax.swing.JTextField;import com.qq.client.tools.ManageClientConServerThread;import mon.Message;import mon.MessageType;/*** QQ聊天窗口** */public class extends JFrame implements ActionListener { JTextField jtf;//输入的文本框JTextArea jta;//文本区域JButton jb;//发送按钮JPanel jp;//装文本框和发送按钮的panelString friend;String userName;public static void main(String[] args) {QqChar qqChar = new QqChar("1","2");}public QqChar(String userName,String friend) {erName = userName;this.friend = friend;jtf = new JTextField(15);jta = new JTextArea();jb = new JButton("发送");jb.addActionListener(this);jp = new JPanel();jp.add(jtf);jp.add(jb);this.add(jta, "Center");this.add(jp, "South");this.setTitle(userName+" 正在和 " + friend + " 聊天");this.setIconImage(newImageIcon("image/qq.png").getImage());this.setSize(300, 200);this.setVisible(true);}public void showMessage(Message message) {String info=message.getSender()+" 对"+message.getGetter()+" 说:"+message.getContext()+"\r\n";this.jta.append(info);}@Overridepublic void actionPerformed(ActionEvent e) {//当点击发送按钮时,把消息发送到服务器端if(e.getSource() == jb) {Message message = new Message();message.setMesType(MessageType.message_common_mes);message.setSender(userName);message.setGetter(friend);message.setContext(jtf.getText());jtf.setText("");message.setTime(new Date().toString());try {ObjectOutputStream oos = newObjectOutputStream(ManageClientConServerThread.getClientConSer verThread(userName).client.getOutputStream());oos.writeObject(message);} catch (Exception e1) {e1.printStackTrace();}}}}import javax.swing.JLabel;import javax.swing.JOptionPane;import javax.swing.JPanel;import javax.swing.JPasswordField;import javax.swing.JTabbedPane;import javax.swing.JTextField;import com.qq.client.model.QqClientUser;import com.qq.client.tools.ManageClientConServerThread; import com.qq.client.tools.ManageQqFriendList;import mon.Message;import mon.MessageType;import er;/*** QQ客户端登入窗口** */public class extends JFrame implements //定义北部组件JLabel jbl1;//定义中部组件:其中中部组件有一个选项卡的窗口管理,有三个JPanel,一个文本框,一个密码框,4个JLabel,一个清除号码按钮,两个多选框JTabbedPane jtp;//选项卡窗口JPanel jp2;//QQ号码JPanel jp3;//手机号码JPanel jp4;//电子邮件JLabel jp2_jpl1;//QQ号码JLabel jp2_jpl2;//QQ密码JLabel jp2_jpl3;//忘记密码JLabel jp2_jpl4;//申请密码保护JButton jp2_jb1;//清除号码JTextField jp2_jtf;//文本框JPasswordField jp2_jpf;//密码框JCheckBox jp2_jcb1;//隐身登入JCheckBox jp2_jcb2;//记住密码//定义南部组件JPanel jp1;JButton jp1_jb1;//登入按钮JButton jp1_jb2;//取消按钮JButton jp1_jb3;//注册向导按钮public static void main(String[] args) {QqClientLogin qqClientLogin=new QqClientLogin();}public QqClientLogin() {//处理北部的组件jbl1 = new JLabel(new ImageIcon("image/beibu.gif"));//处理中部的组件jp2=new JPanel(new GridLayout(3,3));//把中部分成三行三列jp2_jpl1 = new JLabel("QQ号码", JLabel.CENTER);jp2_jpl2 = new JLabel("QQ密码", JLabel.CENTER);jp2_jpl3 = new JLabel("忘记密码", JLabel.CENTER);jp2_jpl3.setForeground(Color.blue);//把忘记密码设为蓝色jp2_jpl4 = new JLabel("申请密码保护", JLabel.CENTER);jp2_jb1 = new JButton(new ImageIcon("image/clear.png"));jp2_jtf = new JTextField();jp2_jpf = new JPasswordField();jp2_jcb1 = new JCheckBox("隐身登入");jp2_jcb2 = new JCheckBox("记住密码");//把控件按照顺序加入到jp2jp2.add(jp2_jpl1);jp2.add(jp2_jtf);jp2.add(jp2_jb1);jp2.add(jp2_jpl2);jp2.add(jp2_jpf);jp2.add(jp2_jpl3);jp2.add(jp2_jcb1);jp2.add(jp2_jcb2);jp2.add(jp2_jpl4);//创建选项卡窗口,把三个JPanel放进去,最后把选项卡放进JFrame 中jtp=new JTabbedPane();jtp.add("QQ号码",jp2);jp3= new JPanel();jtp.add("手机号码",jp3);jp4=new JPanel();jtp.add("电子邮件",jp4);//处理南部的组件jp1 = new JPanel();jp1_jb1 = new JButton(new ImageIcon("image/dengru.png"));jp1_jb1.addActionListener(this);jp1_jb2 = new JButton(new ImageIcon("image/quxiao.png"));jp1_jb3=new JButton(new ImageIcon("image/xiangdao.png"));//把三个按钮放进jp1中jp1.add(jp1_jb1);jp1.add(jp1_jb2);jp1.add(jp1_jb3);//把定义好的组件放入到JFrame中this.add(jbl1,"North");//放入北部组件this.add(jp1, "South");//放入南部组件this.add(jtp, "Center");//放入中部组件//定义JFrame的一些属性this.setSize(350, 240);this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);this.setIconImage(newImageIcon("image/qq.png").getImage());this.setResizable(false);//不允许放大，改变窗口大小等this.setVisible(true);}@Overridepublic void actionPerformed(ActionEvent e) {//用户点击登录按钮if(e.getSource()==jp1_jb1) {User user =new User();user.setName(jp2_jtf.getText().trim());user.setPassWord(newString(jp2_jpf.getPassword()).trim());QqClientUser qqClientUser = new QqClientUser();//判断是否登录成功if(qqClientUser.checkUser(user)) {try {//把创建好友列表提前QqFriendList qqList = newQqFriendList(jp2_jtf.getText());ManageQqFriendList.addQqFriendList(user.getName(), qqList);//发送一个要求返回在线好友的请求包ObjectOutputStream oos = new ObjectOutputStream(ManageClientConServerThread.getClientConServerThread(user.getName()).client.getOutputSt ream());Message message = new Message();message.setSender(user.getName());message.setMesType(MessageType.message_get_onLineFriend);//发送oos.writeObject(message);} catch (Exception e1) {e1.printStackTrace();}this.dispose();} else {JOptionPane.showMessageDialog(this,"QQ号码或者密码错误");}}}}package com.qq.client.view;import javax.swing.*;import com.qq.client.tools.ManageQqChar;import mon.Message;import java.awt.*;import java.awt.event.*;/*** 我的好友列表(包括陌生人和黑名单)* */public class extends JFrame implements //第一张卡片信息(我的好友列表)JPanel jphy1;//总panelJPanel jphy2;//中部的panelJPanel jphy3;//南部的panel，放两个buttonJButton jphy_jb1;//我的好友按钮,防在总panel的北部JButton jphy_jb2;//陌生人按钮,放在jphy3中JButton jphy_jb3;//黑名单按钮,放在jphy3中JScrollPane jsp1;//中部的滚动的paneJLabel jbls[];//中部在线好友的列表//第二张卡片信息(陌生人列表)JPanel jpmsr1;//总panelJPanel jpmsr2;//中部的panelJPanel jpmsr3;//南部的panel，放两个buttonJButton jpmsr_jb1;//我的好友按钮,放在jpmsr3中JButton jpmsr_jb2;//陌生人按钮,放在jpmsr3中JButton jpmsr_jb3;//黑名单按钮,放在总的panel的南部JScrollPane jsp2;//中部的滚动的paneString userName;//把整个JFrame变成卡片布局CardLayout c1;public static void main(String[] args) {QqFriendList qqFriendList = new QqFriendList("1");}public QqFriendList(String userName) {erName = userName;//处理第一张卡片jphy_jb1 = new JButton("我的好友");jphy_jb2 = new JButton("陌生人");jphy_jb2.addActionListener(this);jphy_jb3 = new JButton("黑名单");jphy1 = new JPanel(new BorderLayout());//总的JPaneljphy2= new JPanel(new GridLayout(50,1,4,4));//中部的JPanel,假定有五十个好友//给jphy2这个panel中初始化50个好友jbls = new JLabel[50];for(int i=0; i<jbls.length; i++) {jbls[i] = new JLabel(i+1+"", newImageIcon("image/mm.png"), JLabel.LEFT);jbls[i].setEnabled(false);if(jbls[i].getText().equals(userName)) {jbls[i].setEnabled(true);}jbls[i].addMouseListener(this);jphy2.add(jbls[i]);}jphy3 = new JPanel(new GridLayout(2, 1));//把黑名单按钮和陌生人按钮加入到jpyh3中jphy3.add(jphy_jb2);jphy3.add(jphy_jb3);//把jphy2放入滚动的pane中jsp1 = new JScrollPane(jphy2);//把jphy_jb1,jsp1,jphy3分别放入jphy1中北，中，南三个位置jphy1.add(jphy_jb1,"North");jphy1.add(jsp1,"Center");jphy1.add(jphy3,"South");//处理第二张卡片jpmsr_jb1 = new JButton("我的好友");jpmsr_jb1.addActionListener(this);jpmsr_jb2 = new JButton("陌生人");jpmsr_jb3 = new JButton("黑名单");jpmsr1 = new JPanel(new BorderLayout());//总的JPaneljpmsr2 = new JPanel(new GridLayout(20,1,4,4));//中部的JPanel,假定有二十个陌生人//给jpmsr2这个panel中初始化20个陌生人JLabel jbls2[] = new JLabel[20];for(int i=0; i<jbls2.length; i++) {jbls2[i] = new JLabel(i+1+"", newImageIcon("image/mm.png"), JLabel.LEFT);jpmsr2.add(jbls2[i]);}jpmsr3 = new JPanel(new GridLayout(2, 1));//把我的好友按钮和陌生人按钮加入到jpmsr3中jpmsr3.add(jpmsr_jb1);jpmsr3.add(jpmsr_jb2);//把jpmsr1放入滚动的pane中jsp2 = new JScrollPane(jpmsr2);//把jpmsr3,jsp2,jpmsr_jb3分别放入jpmsr1中北，中，南三个位置jpmsr1.add(jpmsr3,"North");jpmsr1.add(jsp2,"Center");jpmsr1.add(jpmsr_jb3,"South");//把卡片放入JFrame中c1 = new CardLayout();this.setLayout(c1);this.add(jphy1, "1");this.add(jpmsr1, "2");//在窗口显示自己的namethis.setTitle(userName);this.setSize(170, 450);this.setVisible(true);}//更新在线好友情况public void updateFriend(Message message) {String onLineFriend[] = message.getContext().split(" ");for(int i=0; i<onLineFriend.length; i++) {jbls[Integer.parseInt(onLineFriend[i])-1].setEnabled(true);}}@Overridepublic void mouseClicked(MouseEvent e) {//响应用户双击事件,并得到好友编号if(e.getClickCount() ==2) {String friendNo = ((JLabel)e.getSource()).getText();QqChar qqChar = new QqChar(userName,friendNo);//把新开的聊天窗口加入到管理聊天窗口的map中ManageQqChar.addQqChar(erName+" "+friendNo, qqChar);}}@Overridepublic void mousePressed(MouseEvent e) {}@Overridepublic void mouseReleased(MouseEvent e) {}@Overridepublic void mouseEntered(MouseEvent e) {//当鼠标移上去时,使好友头像变为红色JLabel j1 = (JLabel)e.getSource();j1.setForeground(Color.red);}@Overridepublic void mouseExited(MouseEvent e) { //当把鼠标移走时,恢复成黑色JLabel j1 = (JLabel)e.getSource();j1.setForeground(Color.black);}@Overridepublic void actionPerformed(ActionEvent e) { //如果点击了陌生人按钮,就显示第二张卡片if(e.getSource()==jphy_jb2) {c1.show(this.getContentPane(), "2");} else if(e.getSource()==jpmsr_jb1) {c1.show(this.getContentPane(), "1");}}}package mon;import java.io.Serializable;/*** 发送的消息的类* */public class implements Serializable{private int mesType;//服务器返回的信息包：1代表用户验证成功,2代表用户验证失败,3代表其他信息包;private String sender;//发送消息的人private String getter;//接收消息的人private String context;//发送的消息private String time;//发送的时间public int getMesType() {return mesType;}public void setMesType(int mesType) {this.mesType = mesType;}public String getSender() {return sender;}public void setSender(String sender) {this.sender = sender;}public String getGetter() {return getter;}public void setGetter(String getter) {this.getter = getter;}public String getContext() {return context;}public void setContext(String context) { this.context = context;}public String getTime() {return time;}public void setTime(String time) {this.time = time;}}MessageType类：package mon;/*** 定义包的总类* */public interface MessageType {//表明登入成功的包int message_succeed = 1;//表明登入失败的包int message_login_fail = 2;//表明普通的包int message_common_mes = 3;//要求返回在线好友的包int message_get_onLineFriend = 4;//返回在线好友的包int message_ret_onLineFriend = 5; }package mon;import java.io.Serializable;/*** 用户类* */public class implements Serializable{ private String name;//用户名private String passWord;//密码public String getName() {return name;}public void setName(String name) { = name;}public String getPassWord() {return passWord;}public void setPassWord(String passWord) { this.passWord = passWord;}}ManageClientThread类：package com.qq.server.model;import java.util.HashMap;import java.util.Iterator;import java.util.Map;/*** 这是一个管理服务器和客户端保持通讯的线程类* */public class ManageClientThread {public static Map map = new HashMap<String, SerConClientThread>();//向map中添加一个线程public static void addCilentThread(String userName, SerConClientThread sc) {map.put(userName, sc);}//根据userName取得一个线程public static SerConClientThread getCilentThread(String userName) {return (SerConClientThread) map.get(userName);}//返回当前在线的人的情况public static String getAllOnLineUser() {//使用迭代器完成Iterator it = map.keySet().iterator();String res = "";while(it.hasNext()) {res += it.next().toString() + " ";}return res;}}MyQqServer类：package com.qq.server.model;import java.io.ObjectInputStream;import java.io.ObjectOutputStream;import .ServerSocket;import .Socket;import mon.Message;import er;/*** 这是QQ服务器** */public class MyQqServer {public ServerSocket server;public static void main(String[] args) {new MyQqServer();}public MyQqServer() {try {System.out.println("在9999服务器监听.....");server = new ServerSocket(9999);//阻塞,等待某个客户端来连接while(true){Socket client = server.accept();//读取从客户端发来的消息ObjectInputStream ois = newObjectInputStream(client.getInputStream());User user = (User)ois.readObject();System.out.println("姓名是==="+user.getName()+"===密码是---"+user.getPassWord()+"---");ObjectOutputStream oos = newObjectOutputStream(client.getOutputStream());Message message = new Message();//只要密码是123456都让它登录成功if(user.getPassWord().equals("123456")) {message.setMesType(1);oos.writeObject(message);//登入成功,开启一个线程SerConClientThread sc = new SerConClientThread(client);//把该线程加入到map中ManageClientThread.addCilentThread(user.getName(), sc);//启动线程sc.start();//通知其他在线用户sc.notifyOther(user.getName());} else {//登录不成功时message.setMesType(2);oos.writeObject(message);client.close();}}} catch (Exception e) {e.printStackTrace();}}}QqServerUser类由于没写东西，所以不用创建也可以。
使用前端框架实现图片预览功能的方法
使用前端框架实现图片预览功能的方法图片预览功能是网页开发中常见的需求，通过这一功能，用户可以在网页上查看并放大图片，提升了用户体验。
为了实现图片预览功能，前端开发者通常会使用前端框架来简化开发过程，并提供更好的交互效果。
本文将介绍如何使用前端框架来实现图片预览功能。
一、选择合适的前端框架在开始实现图片预览功能之前，我们需要选择一个合适的前端框架。
目前市面上常见的前端框架有很多种，例如Vue.js、React.js和Angular等。
这些框架都提供了丰富的功能和工具，可以大大提高开发的效率。
二、引入所选框架选择好前端框架后，我们需要将该框架的相关文件引入到项目中。
通常情况下，我们可以使用CDN方式引入，也可以通过下载框架文件并引入到项目中。
这些文件通常包括框架的核心库以及相关的插件。
三、处理图片文件在实现图片预览功能之前，我们需要先处理图片文件。
在Web开发中，通常我们会将图片文件上传到服务器并保存在特定的位置。
一般来说，我们可以使用后端语言（如PHP、Node.js）来处理图片的上传和保存过程。
四、实现图片预览功能1. HTML结构首先，我们需要在HTML中创建一个容器来展示图片预览。
可以使用一个div元素来作为容器，并为其指定一个id属性，以便我们可以在后续的JavaScript代码中引用。
2. CSS样式为了能够呈现出良好的展示效果，我们需要为图片预览容器添加一些CSS样式。
可以通过设置容器的宽度、高度、边框等样式来定义图片展示的形态，并使其居中显示。
3. JavaScript代码使用前端框架来实现图片预览功能的关键部分是编写相应的JavaScript代码。
不同的前端框架可能有不同的API和用法，下面以Vue.js框架为例，介绍实现图片预览功能的基本步骤。
（1）创建Vue实例首先，我们需要在JavaScript代码中创建一个Vue实例。
可以通过Vue构造函数来创建，传入一个配置对象，其中包含el、data和methods等属性。
Jquery.LazyLoad.js修正版下载，实现图片延迟加载插件
zyLoad.js修正版下载，实现图⽚延迟加载插件从⽹上下载来的版本多多少少都有些BUG，尤其是加载后在IE6和IE7下图⽚闪动是个⼤问题，在⽹上查了很久，也没有找到相关的解决⽅案。
没解决⽅案，就得发挥咱DIY的精神，⾃⼰想法解决，分析了BUG，理了理思路，结合前段时间我做弹出窗⼝特效的⽅法，解决了zyLoad.js的兼容问题，现将思路和⽅法与⼤家分享⼀下。
解决思路⼤致是两点，⼀是从LazyLoad本⾝的滤镜参数下⼿，发现有⼀个参数在IE6和IE7是可以⽤的，就是show，那么在IE6和IE7下⽤这个特效；⼆是IE8以上（包括IE8）、FireFox，Chrome等⾮IE核⼼的浏览器对fadeIn特效都⽀持，那么在这些版本的浏览器中就使⽤这种酷酷的特效。
1、⾸先⽤JQ判断浏览器类型及版本，如果是IE8以下的浏览器就⽤effect=show，否则就⽤effect=fadeIn，判断浏览器版本函数如下：复制代码代码如下:function checkbrowse() {var ua = erAgent.toLowerCase();var is = (ua.match(/\b(chrome|opera|safari|msie|firefox)\b/) || ['', 'mozilla'])[1];var r = '(?:' + is + '|version)[\\/: ]([\\d.]+)';var v = (ua.match(new RegExp(r)) || [])[1];jQuery.browser.is = is;jQuery.browser.ver = v;return {'is': jQuery.browser.is,'ver': jQuery.browser.ver}}我是将以上的代码加⼊了JQ包⾥，⽅便以后使⽤，路径是/js/2011/lazyload/Js/lazyload/jquery.js。
仿谷歌浏览器ui代码[001]
![仿谷歌浏览器ui代码[001]](https://img.taocdn.com/s3/m/db4a93065627a5e9856a561252d380eb62942311.png)
仿谷歌浏览器ui代码谷歌浏览器（Google Chrome）作为一款全球最受欢迎的网络浏览器，其独特的用户界面（UI）设计为用户提供了流畅、简洁的浏览体验。
首先，我们来说说谷歌浏览器的整体布局。
在默认设置下，浏览器窗口的顶部是一个包含地址栏、搜索框和其他常用功能的工具栏。
这个工具栏非常简洁，使得用户可以快速访问和管理他们的网页浏览活动。
在地址栏的右侧，我们可以找到一些常用的按钮和图标，包括前进、后退、刷新和主页按钮。
这些按钮的位置恰到好处，让用户能够直观地操作浏览器的基本功能，提升了用户的使用便利性。
除了传统的功能按钮，谷歌浏览器还提供了一些独特的功能，比如“书签栏”和“应用启动器”。
书签栏位于浏览器窗口的顶部，用户可以将自己经常访问的网页添加到书签栏中，从而更快速地访问这些网页。
应用启动器则是一个位于工具栏的按钮，当点击该按钮时，用户可以快速访问已安装的应用程序、扩展和其他工具。
在浏览器的右上角，有一个三个水平线组成的按钮，点击后会弹出一个菜单。
这个菜单包含了一些高级选项，比如历史记录、下载页面、扩展和设置等。
谷歌浏览器的这种布局设计不仅提供了便利的功能访问，还给用户一种简洁、清爽的界面感受。
尽管谷歌浏览器的用户界面设计非常出色，但用户也可以根据自己的喜好进行个性化设置。
用户可以通过浏览器的设置页面，自定义界面的配色、布局和其他外观选项。
这种个性化设置给用户提供了更好的使用体验，使他们能够根据自己的喜好定制浏览器的外观和布局。
除了外观设计，谷歌浏览器的用户界面还非常注重功能的易用性和用户指导。
每当用户第一次打开浏览器时，浏览器会以简明的方式向用户介绍浏览器的基本功能，以及如何利用这些功能进行网页浏览。
这种用户指导不仅使新用户能够快速上手，也为之后的使用提供了方便。
总的来说，谷歌浏览器的用户界面设计简洁、清晰，提供了丰富的功能和个性化选项。
通过合理的布局和直观的操作方式，它为用户提供了流畅、快捷的浏览体验。
前端仿chatg对话界面的制作过程
前端仿chatg对话界面的制作过程创建一个仿照ChatGPT的对话界面涉及前端开发的多个方面，包括HTML、CSS和JavaScript。
下面是一个简单的步骤指南，帮助你开始这个过程：1. 设计界面布局首先，你需要设计一个用户友好的界面。
这通常包括一个输入框用于输入文本，一个显示对话历史的区域，以及可能的发送按钮。
html<div class="chat-container"><div class="chat-window"><!-- 聊天历史将在这里显示 --></div><div class="input-container"><input type="text" id="messageInput" placeholder="输入你的消息..."> <button id="sendMessage">发送</button></div></div>2. 样式化界面使用CSS为界面添加样式。
你可以根据需要调整颜色、字体、间距等。
css.chat-container {width: 100%;height: 100%;display: flex;flex-direction: column;}.chat-window {flex: 1;overflow-y: scroll;padding: 10px;border: 1px solid #ccc;}.input-container {display: flex;}#messageInput {flex: 1;padding: 5px;border: none;}#sendMessage {padding: 5px 10px;background-color: #4CAF50;color: white;border: none;cursor: pointer;}3. 添加交互功能使用JavaScript为输入框和按钮添加交互功能。
JS实现的模仿QQ头像资料卡显示与隐藏效果
JS 实现的模仿QQ 头像资料卡显示与隐藏效果本文实例讲述了JS 实现的模仿QQ 头像资料卡显示与隐藏效果。
分享给大家供大家参考，具体如下：我们使用QQ 时经常需要查看朋友的资料卡，当我们把鼠标移入头像时，资料卡显示，并且鼠标能在头像与资料卡之间能随意移动，当鼠标移出头像或资料卡时，资料卡延时隐藏。
实质就是延时提示框问题！首先写好布局：1 2 3 4 5 6 7 8 9 <style> div { float:left; margin:5px; } .head { width:50px;height:50px;background-color:pink; } .info { width:250px;height:200px;background-color:blue;display:none; } </style> <div> <div class="head"></div> <div class="info"></div> </div>其次js 部分：思路：（1）鼠标移入头像，资料卡显示；鼠标移出头像，资料卡延时隐藏setTimeout（2）鼠标移入资料卡，资料卡仍显示，并清除资料卡延时隐藏的变量（3）鼠标移出资料卡，资料卡延时隐藏，并且此时如果在移入到头像中，资料卡扔显示，并清除资料卡延时隐藏的变量1 2 3 4 5 6 window.onload =function(){var oHead = document.getElementsByClassName("head")[0]; var oInfo = document.getElementsByClassName("info")[0]; var timer = null;oHead.onmouseover=function(){clearTimeout(timer);7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23oInfo.style.display="block";};oHead.onmouseout=function(){timer = setTimeout(function(){oInfo.style.display="none";},500);};oInfo.onmouseover=function(){clearTimeout(timer);oInfo.style.display="block";};oInfo.onmouseout=function(){timer = setTimeout(function(){oInfo.style.display="none";},500);};}; 优化代码：1 2 3 4 5 6 7 8 9 oInfo.onmouseover = oHead.onmouseover=function(){clearTimeout(timer);oInfo.style.display="block";};oInfo.onmouseout = oHead.onmouseout=function(){timer = setTimeout(function(){oInfo.style.display="none";},500);};函数封装：注意：事件 .xx 等于 [“xx”]第一种：函数外获取变量，调用函数，适用于一个或两个元素调用此事件1 2 3 4 5 6 7 8 window.onload =function(){var oHead = document.getElementsByClassName("head")[0]; var oInfo = document.getElementsByClassName("info")[0]; reminder(oHead,oInfo,"onmouseover","onmouseout");function reminder (div1,div2,event1,event2){var timer = null;div1[event1] = div2[event1]=function(){clearTimeout(timer);9 10 11 12 13 14 15 16 17div2.style.display="block";};div1[event2] = div2[event2]=function(){timer = setTimeout(function(){div2.style.display="none";},500);};} }; 第二种：函数外获取变量，调用函数，适用于多个元素调用此事件1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 window.onload =function(){var number=0;reminder("head","info","onmouseover","onmouseout",number); function reminder (div1,div2,event1,event2,num){var oHead = document.getElementsByClassName(div1)[num]; var oInfo = document.getElementsByClassName(div2)[num]; var timer = null;oHead[event1] = oInfo[event1]=function(){clearTimeout(timer);oInfo.style.display="block";};oHead[event2] = oInfo[event2]=function(){timer = setTimeout(function(){oInfo.style.display="none";},500);};}};比如，一共有三个头像的话，就可以用for 循环遍历为每个元素绑定事件：1 2 3 4 var number=null;for(number=0;number<3;number++){reminder("head","info","onmouseover","onmouseout",number); }更多关于JavaScript 相关内容感兴趣的读者可查看本站专题：《JavaScript 切换特效与技巧总结》、《JavaScript 查找算法技巧总结》、《JavaScript 动画特效与技巧汇总》、《JavaScript 错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript 遍历算法与技巧总结》及《JavaScript数学运算用法总结》希望本文所述对大家JavaScript程序设计有所帮助。
jquery仿微信聊天界面
jquery仿微信聊天界⾯⾸先看⼀下我们的效果图。
这个颜⾊可能搭配的有些不合适，但基本功能⼤都实现了。
就是你和你同桌对话，你发的消息在你的左侧，⽽在他设备的右侧。
⾸先先写好整体的框架，在⼀个⼤容器中放两个盒⼦，分别是左侧和右侧的界⾯。
然后每个盒⼦⾥⾯包含了三⼤部分：头部、内容区、和底部。
只要写好⼀侧，另⼀侧进⾏粘贴复制就可以了。
⾸先定义⼀个⼤的来盛放左右两个盒⼦。
<div id = "main">//左侧聊天界⾯<div id = "box"><div id = "top"><span>你</span></div><div id = "content"><select multiple="multiple" id="leftcontent"></select></div><div id = "bottom"><input type = "text" class = "sendText" id = "leftText" /><input type = "button" id = "leftdBtn" class="sendBtn" value = "发送"></div></div>//右侧聊天界⾯<div id = "box"><div id = "top"><span>同桌</span></div><div id = "content"><select multiple="multiple" id="rightcontent"></select></div><div id = "bottom"><input type = "text" class = "sendText" id = "rightText" /><input type = "button" id = "rightBtn" class="sendBtn" value = "发送"></div></div></div>⾸先这两个盒⼦的代码不是复制粘贴就直接可以的。
android自定义Dialog,仿QQ手机浏览器
欢迎a88541521我的：收件箱资源博客空间设置|帮助|退出∙CSDN首页∙资讯∙论坛∙博客∙下载∙搜索更多hungxn的专栏∙目录视图∙摘要视图∙订阅用开源IaaS构建自己的云——OpenStack征稿启事不用买彩票，就有408万！CSDN博客频道“移动开发之我见”主题征文活动2012CSDN网站八大职位急聘android自定义Dialog，仿QQ手机浏览器分类：Android学习2011-12-31 18:52 126人阅读评论(0) 收藏举报以前一直不大喜欢android系统的对话框，这两天上班比较空闲，就试着模仿一下QQ浏览器的对话框。
本来以前想写个类继承Dialog，但受水平限制，没有实现。
主要代码如下：1public class CustomAlertDialog2{3private AlertDialog dialog;4private LayoutInflater inflater;5private Button leftBtn, midBtn, rightBtn;6private LinearLayout titleLay, bottomLay;7private ScrollView contentLay;8private TextView title, contentMsg;9private Context context;10private View dialogView;12public CustomAlertDialog(Context context)13 {14this.context = context;15 inflater = LayoutInflater.from(context);16 dialogView = inflater.inflate(yout.dialog, null);1718 bottomLay = (LinearLayout) dialogView.findViewById(R.id.dialog_btns);19 contentLay = (ScrollView)dialogView.findViewById(R.id.dialog_content_lay);20 dialog = new AlertDialog.Builder(context).create();21 }222324public void show() {25 dialog.show();26 dialog.getWindow().setContentView(dialogView);27 }2829public void dismiss() {30if (dialog != null && dialog.isShowing()) {31 dialog.dismiss();32 }33 }3435public boolean isShowing() {36if (dialog != null)37return dialog.isShowing();38return false;39 }4041public void setCancelable(boolean bool) {42 dialog.setCancelable(bool);43 }4445public void setContentView(View view) {46 contentLay.removeAllViews();47 contentLay.addView(view);48 }4950public void setMessage(String msg) {51 contentMsg = (TextView) dialogView.findViewById(R.id.dialog_content);52 contentMsg.setText(msg);53 contentMsg.setVisibility(View.VISIBLE);5556public void setTitle(String title) {57 titleLay = (LinearLayout)dialogView.findViewById(R.id.dialog_title_lay);58this.title = (TextView) dialogView.findViewById(R.id.dialog_title);59 titleLay.setVisibility(View.VISIBLE);60this.title.setText(title);61 }6263public void setOnPositiveButton(String str, View.OnClickListener listener) {64 bottomLay.setVisibility(View.VISIBLE);65 leftBtn = (Button) dialogView.findViewById(R.id.dialog_left_btn);66 leftBtn.setVisibility(View.VISIBLE);67 leftBtn.setText(str);68 leftBtn.setOnClickListener(listener);69 }7071public void setOnNegativeButton(String str, View.OnClickListener listener) {72 bottomLay.setVisibility(View.VISIBLE);73 rightBtn = (Button) dialogView.findViewById(R.id.dialog_right_btn);74 rightBtn.setVisibility(View.VISIBLE);75 rightBtn.setText(str);76 rightBtn.setOnClickListener(listener);77 }7879public void setOnNeutralButton(String str, View.OnClickListener listener) {80 bottomLay.setVisibility(View.VISIBLE);81 midBtn = (Button) dialogView.findViewById(R.id.dialog_mid_btn);82 midBtn.setVisibility(View.VISIBLE);83 midBtn.setText(str);84 midBtn.setOnClickListener(listener);85 }86}这个对话框的布局由标题部分，内容部分，和底部按钮部分组成，最多3个按钮，需要哪些按钮，只要设置这些按钮的listener就可以显示出来；内容部分，可以设置为自定义的View，也可以是简单的一个TextView（通过setMessage方法）。
imgseccheck用法
imgseccheck用法
ImgSecCheck是腾讯云安全服务中的一种图片安全检测工具，常用于过滤敏感图片、违禁图片等涉及内容审查的应用场景。
其使用方法较为简单，以下为ImgSecCheck的基本使用方法：
1. 登录腾讯云安全服务控制台，找到ImgSecCheck工具。
2. 上传需要检测的图片文件，或者通过指定URL来进行在线检测。
3. 等待系统对上传的内容进行检测，并返回检测结果。
4. 根据检测结果对图片进行合理的处理，例如删除、屏蔽或者标记等。
需要注意的是，使用ImgSecCheck进行图片检测时，需要保证检测环境的稳定和网络连接的畅通，同时也要尽可能地提高图片检测的准确性和可信度。
此外，当涉及到敏感图片、违禁图片等重大问题时，需要及时联系相关部门进行处理，并遵守相关法律法规。
综上所述，ImgSecCheck是一种方便快捷的图片安全检测工具，能够帮助用户有效应对图片涉及内容审查等问题，并促进网络环境的健康发展。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
<%@Page Language="C#"AutoEventWireup="true"CodeFile="仿腾讯图片浏览器.aspx.cs" Inherits="仿腾讯图片浏览器" %>
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
#bigimg img
{
width: 510px;
height: 300px;
padding: 0px;
}
#smallimg img
{
width: 100px;
height: 110px;
padding: 0px;
margin: 2px;
}
#bigimg
{
width: 503px;
}
</style>
<script src="Jquery1.7.js"type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#smallimg img:eq(0)').css("border", '5px solid red'); //默认第一张图片有瓺边框
$('#smallimg img').click(function () {
$('#smallimg img').css("border", "");
$(this).css("border", '5px solid red');
var path = $(this).attr("src");
$('#bigimg img').attr("src", path);
}) //单击小图片显示大图片
var array = new Array('0.jpg', '1.jpg', '2.jpg', '3.jpg', '4.jpg');
var num = 0;
$('#rightimg').bind('click', function () {
num++;
if (num >= array.length) {
num = 0;
}
$('#bigimg img').attr('src', 'images/' + array[num]);
$('#smallimg img').css("border", "");
var im = $('#smallimg img');
im.each(function (index) {
if ($(this).attr('src') == $('#bigimg img').attr('src')) {
$(this).css("border", '5px solid red');
}
})
})//后一
$('#leftimg').click(function () {
num--;
if (num < 0) {
num = array.length - 1;
}
$('#bigimg img').attr('src', 'images/' + array[num]);
$('#smallimg img').css("border", "");
var im = $('#smallimg img');
im.each(function (index) {
if ($(this).attr('src') == $('#bigimg img').attr('src')) { //循-环·遍括历图片的路径(src)，当小图片的src等台于大图片的src时，小图片加边框ò
$(this).css("border", '5px solid red');
}
})
}) //前一张
$('#leftimg').show();
$('#rightimg').show(); //开始时默认图片都显示
$('#bigimg').mousemove(function (e) {
if (e.originalEvent.x < 255) { //e.originalEvent.x:div的横坐标括
$('#leftimg').show();
$('#rightimg').hide();
}
else {
$('#rightimg').show();
$('#leftimg').hide();
}
})//切换箭头图片
})
</script>
</head>
<body>
<form id="form1"runat="server">
<div style="height: 303px">
<div style="float: left">
<img id="leftimg"src="images/left.png"alt="前°一?页?"style=" position:absolute; top:120px; left:20px"/></div>
<div style="float: left"id="bigimg">
<img src="images/0.jpg"/></div>
<div style="float: left">
<img id="rightimg"src="images/right.png"alt="后ó一?页?"style=" position:absolute; top:120px; left:450px"/></div>
</div>
<div id="smallimg">
<a href="#"><img src="images/0.jpg"/></a>
<a href="#"><img src="images/1.jpg"/></a>
<a href="#"><img src="images/2.jpg"/></a>
<a href="#"><img src="images/3.jpg"/></a>
<a href="#"><img src="images/4.jpg"/></a>
</div>
</form>
</body>
</html>。