免费注册 查看新帖 |

Chinaunix

  平台 论坛 博客 文库
最近访问板块 发新帖
查看: 3991 | 回复: 2
打印 上一主题 下一主题

用JQUERY做了个大量图片浏览器,有点问题 [复制链接]

论坛徽章:
0
跳转到指定楼层
1 [收藏(0)] [报告]
发表于 2010-08-11 23:11 |只看该作者 |倒序浏览
本帖最后由 pen10 于 2010-08-12 08:42 编辑

代码如下:
  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="gb2312" />
  5. <title>Untitled Document</title>
  6. <style type="text/css">
  7. <!--
  8. body {
  9.         background-color: #CCCCCC;
  10. }
  11. a {
  12. }
  13. -->
  14. </style>
  15. </head>
  16. <script src="http://www.xsborts.com/hbcms/script/jquery/jquery_1.3.1.js" type="text/javascript"></script>
  17. <body>
  18. <table width="600" border="0" align="center" bgcolor="#FFFFFF">
  19.   
  20.   <tr>
  21.     <th height="100" bgcolor="#000000" scope="row" align="center"><div id="imgSmallDiv" STYLE="position:relative; width:600px;overflow-x:auto; overflow-y:hidden;white-space:nowrap; font-size:0px; background:#000000" ><div id="imgSmallDivInner" style="position:relative;overflow:visible;white-space:nowrap;font-size:0px;background:#FFFFFF"></div>
  22.     </div></th>
  23.   </tr>
  24.   <tr >
  25.     <td align="center" id="imgBigTdDesc"></td>
  26.   </tr>
  27.   <tr > <td align="center" id="imgBigTdX"></td>
  28.   </tr>
  29. </table>
  30. <script language="javascript">
  31. //图片数组
  32. var imgBigDesc=new Array(
  33.    ["甜美台球宝贝秦梦擎台球桌上现迷人笑容","http://www.xsborts.com/hbcms/upload/image/201008/big/49/4977_100811172530.jpg"],
  34.    ["甜美台球宝贝秦梦擎台球桌上现迷人笑容","http://www.xsborts.com/hbcms/upload/image/201008/big/05/0539_100811172530.jpg"],
  35.    ["甜美台球宝贝秦梦擎台球桌上现迷人笑容","http://www.xsborts.com/hbcms/upload/image/201008/big/58/5895_100811172530.jpg"],
  36.    ["甜美台球宝贝秦梦擎台球桌上现迷人笑容","http://www.xsborts.com/hbcms/upload/image/201008/big/57/5723_100811172530.jpg"],
  37.    ["甜美台球宝贝秦梦擎台球桌上现迷人笑容","http://www.xsborts.com/hbcms/upload/image/201008/big/82/8270_100811172531.jpg"],
  38.    ["甜美台球宝贝秦梦擎台球桌上现迷人笑容","http://www.xsborts.com/hbcms/upload/image/201008/big/63/6334_100811172709.jpg"],
  39.    ["甜美台球宝贝秦梦擎台球桌上现迷人笑容","http://www.xsborts.com/hbcms/upload/image/201008/big/01/0168_100811172709.jpg"],
  40.    ["甜美台球宝贝秦梦擎台球桌上现迷人笑容","http://www.xsborts.com/hbcms/upload/image/201008/big/88/8887_100811172709.jpg"],
  41.    ["甜美台球宝贝秦梦擎台球桌上现迷人笑容","http://www.xsborts.com/hbcms/upload/image/201008/big/60/6096_100811172709.jpg"],
  42.    ["甜美台球宝贝秦梦擎台球桌上现迷人笑容","http://www.xsborts.com/hbcms/upload/image/201008/big/19/1961_100811172709.jpg"]
  43.   );
  44. var imgSmallDesc=[];
  45. var currentImgX=0;
  46. var innerDivWidth=0;
  47. //插入小图
  48. function insertTdSmall(){
  49.     for(imgNumX=0;imgNumX<imgBigDesc.length;imgNumX++){
  50.             imgBigStr=imgBigDesc[imgNumX][1];
  51.                 imgSmallStr=imgBigStr.replace(/big/,"small");
  52.                 imgSmallDesc.push([imgBigDesc[imgNumX][0],imgSmallStr]);
  53.                 imgHrefChangeToBig="javascript:imgChangeToBig("+String.fromCharCode(34)+imgBigDesc[imgNumX][1]+String.fromCharCode(34)+","+String.fromCharCode(34)+imgBigDesc[imgNumX][0]+String.fromCharCode(34)+","+imgNumX+");";
  54.                 $("#imgSmallDivInner").append("<a href='"+imgHrefChangeToBig+"' class='mylink'><img boder=0 id='"+ imgNumX+"imgSmallX' src='"+imgSmallDesc[imgNumX][1]+"' align='middle' alt='"+imgSmallDesc[imgNumX][0]+"' title='"+ imgSmallDesc[imgNumX][0]+"'></a>");
  55.                 strImgSmallID="#"+imgNumX+"imgSmallX";
  56.                 if (imgNumX==0) $(strImgSmallID).css('opacity', '0.4');
  57.                 else $(strImgSmallID).css('opacity', '1');
  58.                 innerDivWidth+=$(strImgSmallID).width()+4;
  59.     }

  60. }
  61. //切换图片函数
  62. function imgChangeToBig(imgUrlX,imgDescX,imgNumDisplay){
  63.   document.getElementById('imgBigTdX').innerHTML="<img id='imgBigX' src='"+imgUrlX+"' alt='"+imgDescX+"'"+"title='"+ imgDescX+"' >";
  64.    if($("#imgBigX").width()>600)  {
  65.                     $("#imgBigX").height(600*$("#imgBigX").height()/$("#imgBigX").width());
  66.                         $("#imgBigX").width(600);
  67. }
  68.    $("#imgBigTdDesc").html("<span style='font-size: medium'>"+imgDescX+String.fromCharCode(40)+(imgNumDisplay+1)+"/"+imgSmallDesc.length+String.fromCharCode(41)+"</span>");
  69.    strImgSmallID="#"+imgNumDisplay+"imgSmallX";
  70.    strCurrentImgSmallID="#"+currentImgX+"imgSmallX";
  71.    $(strCurrentImgSmallID).css('opacity', '1');
  72.    $(strImgSmallID).animate({opacity:0.4});
  73.    currentImgX=imgNumDisplay;
  74. }
  75. //初始化
  76. $("#imgSmallDivInner").append("<style type='text/css'>a.mylink:link {color:#000000;} a.mylink:visited {color:#000000;} a.mylink:hover {color:#0000FF;}  a.mylink:active {color:#0000FF;} </style>");
  77. insertTdSmall();
  78. imgChangeToBig(imgBigDesc[0][1],imgBigDesc[0][0],0);
  79. $("#imgBigTdDesc").html("<span style='font-size: medium'>"+imgBigDesc[0][0]+String.fromCharCode(40)+"1/"+imgSmallDesc.length+String.fromCharCode(41)+"</span>");
  80. </script>
  81. </body>
  82. </html>
复制代码
 

直接复制到记事本,改成HTML即可用了。
单独这样是没有问题的,但是把这段代码body之内的复制到我的站点的文章系统后生成文章就有问题了
效果见http://www.xsborts.com/article/7f/2064.html
Firefox3.6我试过是没有问题的,但是在IE里总是有那讨厌的蓝框,我想肯定是a标记的CSS问题。
但不知道是怎么回事,为什么FF可以,IE就不行,真是怪异。
最初是把那段CSS写到一个文件叫main_css.js里,用document.write写的。
看看有什么解决办法?
对代码有问题的请直接说

论坛徽章:
0
2 [报告]
发表于 2010-08-12 08:42 |只看该作者
有人吗,CU感觉有点冷

论坛徽章:
0
3 [报告]
发表于 2010-08-12 16:29 |只看该作者
还是csdn
您需要登录后才可以回帖 登录 | 注册

本版积分规则 发表回复

  

北京盛拓优讯信息技术有限公司. 版权所有 京ICP备16024965号-6 北京市公安局海淀分局网监中心备案编号:11010802020122 niuxiaotong@pcpop.com 17352615567
未成年举报专区
中国互联网协会会员  联系我们:huangweiwei@itpub.net
感谢所有关心和支持过ChinaUnix的朋友们 转载本站内容请注明原作者名及出处

清除 Cookies - ChinaUnix - Archiver - WAP - TOP