Js弹出框代码,头像选择工具_Android, Python及开发编程讨论区_Weblogic技术|Tuxedo技术|中间件技术|Oracle论坛|JAVA论坛|Linux/Unix技术|hadoop论坛_联动北方技术论坛  
网站首页 | 关于我们 | 服务中心 | 经验交流 | 公司荣誉 | 成功案例 | 合作伙伴 | 联系我们 |
联动北方-国内领先的云技术服务提供商
»  游客             当前位置:  论坛首页 »  自由讨论区 »  Android, Python及开发编程讨论区 »
总帖数
1
每页帖数
101/1页1
返回列表
0
发起投票  发起投票 发新帖子
查看: 3851 | 回复: 0   主题: Js弹出框代码,头像选择工具        下一篇 
jfl
注册用户
等级:少校
经验:1112
发帖:95
精华:0
注册:2012-8-10
状态:离线
发送短消息息给jfl 加好友    发送短消息息给jfl 发消息
发表于: IP:您无权察看 2012-8-24 9:22:38 | [全部帖] [楼主帖] 楼主

效果图:  

北京联动北方科技有限公司

js代码

Javascript代码
北京联动北方科技有限公司北京联动北方科技有限公司北京联动北方科技有限公司

  1. /** 
  2.  * 弹出头像JS 
  3.  */ 
  4. var ICO = new Object(); 
  5. ICO.show = function(){ 
  6.        $(".pop-ico").fadeIn(); 
  7. ICO.hide = function(){ 
  8.        $(".pop-ico").fadeOut(); 
  9. $(function(){ 
  10.        var $box = $(".pop-ico"); 
  11.        var $showbtn =$(".show-ico-btn"); 
  12.        var $headico = $("input[name='headico']"); 
  13.        var $hidebtn =$box.find(".hide-ico-btn"); 
  14.        var $icolist = $box.find(".ico-list"); 
  15.        $showbtn.bind("click",ICO.show); 
  16.        $hidebtn.bind("click",ICO.hide); 
  17.        //点击选择头像 
  18.        $("> a", $icolist).each(function(){ 
  19.              $(this).bind("click",function(){ 
  20.                    $(this).addClass("cur").siblings().removeClass("cur"); 
  21.                    var src =$(this).find("img").attr("src"); 
  22.                    $showbtn.find("img").attr("src",src); 
  23.                    $headico.val($(this).attr("data-src")); 
  24.                    ICO.hide(); 
  25.              }); 
  26.        }); 
  27. }); 


/**
* 弹出头像JS
*/
var ICO = new Object();
ICO.show = function(){
       $(".pop-ico").fadeIn();
}

ICO.hide = function(){
$(".pop-ico").fadeOut();
}

$(function(){
       var $box = $(".pop-ico");
       var $showbtn =$(".show-ico-btn");
       var $headico = $("input[name='headico']");
       var $hidebtn =$box.find(".hide-ico-btn");
       var $icolist = $box.find(".ico-list");
       $showbtn.bind("click",ICO.show);
       $hidebtn.bind("click",ICO.hide);
       //点击选择头像
       $("> a", $icolist).each(function(){
             $(this).bind("click",function(){
                   $(this).addClass("cur").siblings().removeClass("cur");
                   var src =$(this).find("img").attr("src");
                   $showbtn.find("img").attr("src",src);
                   $headico.val($(this).attr("data-src"));
                   ICO.hide();
             });
       });
});

demo.html


Html代码
北京联动北方科技有限公司北京联动北方科技有限公司北京联动北方科技有限公司

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4.  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5.  <title>美女图片 MN606.COM</title> 
  6.  <!-- jQuery --> 
  7.  <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> 
  8.  <script type="text/javascript" src="js/pop-ico.js"></script> 
  9.  <style type="text/css"> 
  10.  body{font-size: 12px;font-family: "宋体";color: #333p;} 
  11.  a{text-decoration: none;} 
  12.  .cmt-ico .head-ico img {border: 1px dashed #F60;padding: 2px;} 
  13.  .pop-ico{position: absolute;width: 250px;min-height: 130px;top: 50px;left: 0px;background: #FFF;border: 1px solid #D7D7D7;z-index: 100} 
  14.  .pop-ico .ico-title{height: 20px;background-color: #F0F0F0;color: #0078B6;padding-top: 5px;padding-left: 5px;padding-right: 5px} 
  15.  .pop-ico .ico-title a{cursor: pointer;display: block; width: 15px ;height: 15px;text-align: center;position: absolute;right: 5px;top: 5px;} 
  16.  .pop-ico .ico-list{padding: 7px} 
  17.  .pop-ico .ico-list a img {border: 1px dashed #DDD;cursor: pointer;} 
  18.  .pop-ico .ico-list a:hover img, .pop-ico .ico-list .cur img {border: 1px dashed #F60;} 
  19.  </style> 
  20. </head> 
  21. <body> 
  22. <div class="main" style="width: 960px;margin: 0 auto;border: 1px solid #BEBEBE;min-height:400px""> 
  23.  <div style="background-color: #E4E4E4;padding: 10px;"> 
  24.  <font size="5">头像选择器:</font> 
  25.  <a href="http://www.mn606.com/message/" target="_blank">演示地址</a> 
  26.  <a href="http://www.mn606.com/" target="_blank">美女图片</a> 
  27.  </div> 
  28.  
  29.  <div style="padding: 10px;"> 
  30.  <!-- 头像选择 start --> 
  31.  <div class="cmt-ico" style="position: relative"> 
  32.  <a class="head-ico show-ico-btn" title="选择头像"><img 
  33.  class="focus-ico" 
  34.  src="images/head/ico1.gif" 
  35.  alt="选择头像" width="40" height="40"> 
  36.  </a> 
  37.  &nbsp;图片路径:<input type="text" name="headico" value=""> 
  38.  <!-- 弹出窗口 start--> 
  39.  <div class="pop-ico" style="display: none"> 
  40.  <div class="ico-title"> 
  41.  <span>选择头像</span> 
  42.  <a title="关闭窗口" class="hide-ico-btn">x</a> 
  43.  </div> 
  44.  <div class="ico-list"> 
  45.  <a data-src="images/head/ico1.gif" class="cur"><img src="images/head/ico1.gif" width="40" height="40"></a> 
  46.  <a data-src="images/head/ico2.gif"><img src="images/head/ico2.gif" width="40" height="40"></a> 
  47.  <a data-src="images/head/ico3.gif"><img src="images/head/ico3.gif" width="40" height="40"></a> 
  48.  <a data-src="images/head/ico4.gif"><img src="images/head/ico4.gif" width="40" height="40"></a> 
  49.  <a data-src="images/head/ico5.gif"><img src="images/head/ico5.gif" width="40" height="40"></a> 
  50.  <a data-src="images/head/ico6.gif"><img src="images/head/ico6.gif" width="40" height="40"></a> 
  51.  <a data-src="images/head/ico7.gif"><img src="images/head/ico7.gif" width="40" height="40"></a> 
  52.  <a data-src="images/head/ico8.gif"><img src="images/head/ico8.gif" width="40" height="40"></a> 
  53.  <a data-src="images/head/ico9.gif"><img src="images/head/ico9.gif" width="40" height="40"></a> 
  54.  <a data-src="images/head/ico10.gif"><img src="images/head/ico10.gif" width="40" height="40"></a> 
  55.  <a data-src="images/head/ico11.gif"><img src="images/head/ico11.gif" width="40" height="40"></a> 
  56.  <a data-src="images/head/ico12.gif"><img src="images/head/ico12.gif" width="40" height="40"></a> 
  57.  <a data-src="images/head/ico13.gif"><img src="images/head/ico13.gif" width="40" height="40"></a> 
  58.  <a data-src="images/head/ico14.gif"><img src="images/head/ico14.gif" width="40" height="40"></a> 
  59.  <a data-src="images/head/ico15.gif"><img src="images/head/ico15.gif" width="40" height="40"></a> 
  60.  <a data-src="images/head/ico16.gif"><img src="images/head/ico16.gif" width="40" height="40"></a> 
  61.  <a data-src="images/head/ico17.gif"><img src="images/head/ico17.gif" width="40" height="40"></a> 
  62.  <a data-src="images/head/ico18.gif"><img src="images/head/ico18.gif" width="40" height="40"></a> 
  63.  <a data-src="images/head/ico18.gif"><img src="images/head/ico19.gif" width="40" height="40"></a> 
  64.  <a data-src="images/head/ico18.gif"><img src="images/head/ico20.gif" " width="40" height="40"></a> 
  65.  </div> 
  66.  </div> 
  67.  <!-- 弹出窗口 end--> 
  68.  </div> 
  69.  <!-- 头像选择 end --> 
  70.  </div> 
  71. </div> 
  72. <div class="corp" style="width: 960;margin: 0 auto;text-align: center;margin-top: 10px"> 
  73.  Dev by Swing ,QQ:35263107 <a href="http://www.mn606.com" target="_blank">www.mn606.com</a> <a href="http://www.yy606.com" target="_blank">www.yy606.com</a> 
  74. </div> 
  75. </body> 
  76. </html> 




赞(0)    操作        顶端 
总帖数
1
每页帖数
101/1页1
返回列表
发新帖子
请输入验证码: 点击刷新验证码
您需要登录后才可以回帖 登录 | 注册
技术讨论