使用了JQUERY自己做的一个大量图片查看器

长长的路常常走走 2010-08-12 09:14:30 
<!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="gb2312" /> 

<title>Untitled Document</title> <style type="text/css"> 

<!-- body {  background-color: #CCCCCC; } a { } --> </style> 

</head> 

<script src="http://www.xsborts.com/hbcms/script/jquery/jquery_1.3.1.js" type="text/javascript"></script> 

<body> 

<table width="600" border="0" align="center" bgcolor="#FFFFFF"> 

  <tr> 

    <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> 

    </div></th>   </tr>   <tr > 

    <td align="center" id="imgBigTdDesc"></td>   </tr> 

  <tr > <td align="center" id="imgBigTdX"></td>   </tr> 

</table> <script language="javascript"> //图片数组 

 var imgBigDesc=new Array( 

   ["甜美台球宝贝秦梦擎台球桌上现迷人笑容","http://www.xsborts.com/hbcms/upload/image/201008/big/49/4977_100811172530.jpg"], 

   ["甜美台球宝贝秦梦擎台球桌上现迷人笑容","http://www.xsborts.com/hbcms/upload/image/201008/big/05/0539_100811172530.jpg"], 

   ["甜美台球宝贝秦梦擎台球桌上现迷人笑容","http://www.xsborts.com/hbcms/upload/image/201008/big/58/5895_100811172530.jpg"], 

   ["甜美台球宝贝秦梦擎台球桌上现迷人笑容","http://www.xsborts.com/hbcms/upload/image/201008/big/57/5723_100811172530.jpg"], 

   ["甜美台球宝贝秦梦擎台球桌上现迷人笑容","http://www.xsborts.com/hbcms/upload/image/201008/big/82/8270_100811172531.jpg"], 

   ["甜美台球宝贝秦梦擎台球桌上现迷人笑容","http://www.xsborts.com/hbcms/upload/image/201008/big/63/6334_100811172709.jpg"], 

   ["甜美台球宝贝秦梦擎台球桌上现迷人笑容","http://www.xsborts.com/hbcms/upload/image/201008/big/01/0168_100811172709.jpg"], 

   ["甜美台球宝贝秦梦擎台球桌上现迷人笑容","http://www.xsborts.com/hbcms/upload/image/201008/big/88/8887_100811172709.jpg"], 

   ["甜美台球宝贝秦梦擎台球桌上现迷人笑容","http://www.xsborts.com/hbcms/upload/image/201008/big/60/6096_100811172709.jpg"], 

   ["甜美台球宝贝秦梦擎台球桌上现迷人笑容","http://www.xsborts.com/hbcms/upload/image/201008/big/19/1961_100811172709.jpg"] 

  );  var imgSmallDesc=[];  var currentImgX=0;  var innerDivWidth=0;  //插入小图 

 function insertTdSmall(){ 

    for(imgNumX=0;imgNumX<imgBigDesc.length;imgNumX++){ 

     imgBigStr=imgBigDesc[imgNumX][1]; 

  imgSmallStr=imgBigStr.replace(/big/,"small"); 

  imgSmallDesc.push([imgBigDesc[imgNumX][0],imgSmallStr]); 

  imgHrefChangeToBig="javascript:imgChangeToBig("+String.fromCharCode(34)+imgBigDesc[imgNumX][1]+String.fromCharCode(34)+","+String.fromCharCode(34)+imgBigDesc[imgNumX][0]+String.fromCharCode(34)+","+imgNumX+");"; 

  $("#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>"); 

  strImgSmallID="#"+imgNumX+"imgSmallX"; 

  if (imgNumX==0) $(strImgSmallID).css('opacity', '0.4'); 

  else $(strImgSmallID).css('opacity', '1'); 

  innerDivWidth+=$(strImgSmallID).width()+4;     }  }  //切换图片函数 

 function imgChangeToBig(imgUrlX,imgDescX,imgNumDisplay){ 

  document.getElementById('imgBigTdX').innerHTML="<img id='imgBigX' src='"+imgUrlX+"' alt='"+imgDescX+"'"+"title='"+ imgDescX+"' >"; 

   if($("#imgBigX").width()>600)  { 

      $("#imgBigX").height(600*$("#imgBigX").height()/$("#imgBigX").width()); 

   $("#imgBigX").width(600);  } 

   $("#imgBigTdDesc").html("<span style='font-size: medium'>"+imgDescX+String.fromCharCode(40)+(imgNumDisplay+1)+"/"+imgSmallDesc.length+String.fromCharCode(41)+"</span>"); 

   strImgSmallID="#"+imgNumDisplay+"imgSmallX"; 

   strCurrentImgSmallID="#"+currentImgX+"imgSmallX"; 

   $(strCurrentImgSmallID).css('opacity', '1'); 

   $(strImgSmallID).animate({opacity:0.4});    currentImgX=imgNumDisplay;  } 

 //初始化 

 $("#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>"); 

 insertTdSmall();  imgChangeToBig(imgBigDesc[0][1],imgBigDesc[0][0],0); 

 $("#imgBigTdDesc").html("<span style='font-size: medium'>"+imgBigDesc[0][0]+String.fromCharCode(40)+"1/"+imgSmallDesc.length+String.fromCharCode(41)+"</span>"); 

</script> </body> </html>
...全文
354 15 打赏 收藏 转发到动态 举报
写回复
用AI写文章
15 条回复
切换为时间正序
请发表友善的回复…
发表回复
daocha 2010-08-12
  • 打赏
  • 举报
 回复
樓主做黃網的 鑑定完畢
ronniegxq 2010-08-12
  • 打赏
  • 举报
 回复
甜美台球宝贝秦梦擎台球桌上现迷人笑容
长长的路常常走走 2010-08-12
  • 打赏
  • 举报
 回复
[Quote=引用 4 楼 net_lover 的回复:]
<style type="text/css">
a{display:inline-block;}
img {border:0}
a.mylink:hover {border:2px solid blue}
</style>
[/Quote]

我写了，改不了，好像被系统里ｃｓｓ给覆盖了
vip__888 2010-08-12
  • 打赏
  • 举报
 回复
[Quote=引用 4 楼 net_lover 的回复:]
<style type="text/css">
a{display:inline-block;}
img {border:0}
a.mylink:hover {border:2px solid blue}
</style>
[/Quote]
膜拜
长长的路常常走走 2010-08-12
  • 打赏
  • 举报
 回复
[Quote=引用 3 楼 winter_sco 的回复:]
<img boder=0 这里面的boder拼写错了，应该是 border=0
[/Quote]
嗯，的确写错了，还真没注意到
孟子E章 2010-08-12
  • 打赏
  • 举报
 回复
<style type="text/css">
a{display:inline-block;}
img {border:0}
a.mylink:hover {border:2px solid blue}
</style>
Winter_Sco 2010-08-12
  • 打赏
  • 举报
 回复
<img boder=0 这里面的boder拼写错了，应该是 border=0
长长的路常常走走 2010-08-12
  • 打赏
  • 举报
 回复
我不想要那蓝框，太难看。
我想要黑的，鼠标放上去显示蓝框或红框
FIREFOX现在的代码是可以的，但IE不行。
你们的IE也是蓝框吗？

问题到底在哪里？
长长的路常常走走 2010-08-12
  • 打赏
  • 举报
 回复
直接复制生成html文件即可看到效果
单独这个文件是没有问题的
但当我把这段代码复制到我的网站里的文章创建系统里，然后生成HTML文章后就出问题了。
总是出现讨厌的蓝框，搞了很久都没搞定。（见：http://www.xsborts.com/article/7f/2064.html）
怎么回事？最初是把链接的CSS写到一个文件里就是main_css.js里，这个文件是用document.write写出来的。
这里有高手么？帮我看看了。
长长的路常常走走 2010-08-12
  • 打赏
  • 举报
 回复
[Quote=引用 13 楼 kongwei521 的回复:]
把$("#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>");

……
[/Quote]
不对的，hover是悬停，悬停无所谓什么颜色，我只要没颜色框就可以了，那就设置border=0.
现在鼠标上去后是有边框的，移走就没了
长长的路常常走走 2010-08-12
  • 打赏
  • 举报
 回复
已经搞定了
最终代码
<!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="gb2312" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
background-color: #CCCCCC;
}

-->
</style>
</head>
<script src="http://www.xsborts.com/hbcms/script/jquery/jquery_1.3.1.js" type="text/javascript"></script>
<body>
<table width="600" border="0" align="center" bgcolor="#999999">

<tr>
<th height="110" align="center" bgcolor="#000000" scope="row"><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:#BBBBBB"></div>
</div></th>
</tr>
<tr >
<td align="center" id="imgBigTdDesc"></td>
</tr>
<tr > <td align="center" id="imgBigTdX"></td>
</tr>
</table>
<script language="javascript">
//图片数组
imgBigDesc=new Array(
["甜美台球宝贝秦梦擎台球桌上现迷人笑容","http://www.xsborts.com/hbcms/upload/image/201008/big/49/4977_100811172530.jpg"],
["甜美台球宝贝秦梦擎台球桌上现迷人笑容","http://www.xsborts.com/hbcms/upload/image/201008/big/05/0539_100811172530.jpg"],
["甜美台球宝贝秦梦擎台球桌上现迷人笑容","http://www.xsborts.com/hbcms/upload/image/201008/big/58/5895_100811172530.jpg"],
["甜美台球宝贝秦梦擎台球桌上现迷人笑容","http://www.xsborts.com/hbcms/upload/image/201008/big/57/5723_100811172530.jpg"],
["甜美台球宝贝秦梦擎台球桌上现迷人笑容","http://www.xsborts.com/hbcms/upload/image/201008/big/82/8270_100811172531.jpg"],
["甜美台球宝贝秦梦擎台球桌上现迷人笑容","http://www.xsborts.com/hbcms/upload/image/201008/big/63/6334_100811172709.jpg"],
["甜美台球宝贝秦梦擎台球桌上现迷人笑容","http://www.xsborts.com/hbcms/upload/image/201008/big/01/0168_100811172709.jpg"],
["甜美台球宝贝秦梦擎台球桌上现迷人笑容","http://www.xsborts.com/hbcms/upload/image/201008/big/88/8887_100811172709.jpg"],
["甜美台球宝贝秦梦擎台球桌上现迷人笑容","http://www.xsborts.com/hbcms/upload/image/201008/big/60/6096_100811172709.jpg"],
["甜美台球宝贝秦梦擎台球桌上现迷人笑容","http://www.xsborts.com/hbcms/upload/image/201008/big/19/1961_100811172709.jpg"]
);
imgSmallDesc=[];
currentImgX=3;
innerDivWidth=0;
//插入小图
function insertTdSmall(){
for(imgNumX=0;imgNumX<imgBigDesc.length;imgNumX++){
imgBigStr=imgBigDesc[imgNumX][1];
imgSmallStr=imgBigStr.replace(/big/,"small");
imgSmallDesc.push([imgBigDesc[imgNumX][0],imgSmallStr]);
imgHrefChangeToBig="javascript:imgChangeToBig("+String.fromCharCode(34)+imgBigDesc[imgNumX][1]+String.fromCharCode(34)+","+String.fromCharCode(34)+imgBigDesc[imgNumX][0]+String.fromCharCode(34)+","+imgNumX+");";
$("#imgSmallDivInner").append("<a href='"+imgHrefChangeToBig+"' class='mylink'><img border=0 id='"+ imgNumX+"imgSmallX' src='"+imgSmallDesc[imgNumX][1]+"' align='middle' alt='"+imgSmallDesc[imgNumX][0]+"' title='"+ imgSmallDesc[imgNumX][0]+"'></a>");
strImgSmallID="#"+imgNumX+"imgSmallX";
if (imgNumX==0) $(strImgSmallID).css('opacity', '1');
else $(strImgSmallID).css('opacity', '0.4');
//innerDivWidth+=$(strImgSmallID).width()+4;


}

}

//切换图片函数
function imgChangeToBig(imgUrlX,imgDescX,imgNumDisplay){
document.getElementById('imgBigTdX').innerHTML="<img id='imgBigX' src='"+imgUrlX+"' alt='"+imgDescX+"'"+"title='"+ imgDescX+"' >";
if($("#imgBigX").width()>600) {
$("#imgBigX").height(600*$("#imgBigX").height()/$("#imgBigX").width());
$("#imgBigX").width(600);
}
$("#imgBigTdDesc").html("<span style='font-size: medium'>"+imgDescX+String.fromCharCode(40)+(imgNumDisplay+1)+"/"+imgSmallDesc.length+String.fromCharCode(41)+"</span>");
strImgSmallID="#"+imgNumDisplay+"imgSmallX";
strCurrentImgSmallID="#"+currentImgX+"imgSmallX";
$(strCurrentImgSmallID).css('opacity', '0.4');
$(strImgSmallID).animate({opacity:1});
currentImgX=imgNumDisplay;
// alert(currentImgX);
}
//初始化
insertTdSmall();
imgChangeToBig(imgBigDesc[0][1],imgBigDesc[0][0],0);
$("#imgBigTdDesc").html("<span style='font-size: medium;color:#000000'>"+imgBigDesc[0][0]+String.fromCharCode(40)+"1/"+imgSmallDesc.length+String.fromCharCode(41)+"</span>");

//为每个缩略图添加hover事件
var txtImgSmallHover="";
txtImgSmallHover+=String.fromCharCode(60)+"script language='javascript'"+String.fromCharCode(62)+" " ;
txtImgSmallHover+="$(function(){ ";
for(imgNumX=0;imgNumX<imgBigDesc.length;imgNumX++){
strImgSmallID=String.fromCharCode(34)+"#"+imgNumX+"imgSmallX"+String.fromCharCode(34);
txtImgSmallHover+="$("+strImgSmallID+").hover( ";
txtImgSmallHover+="function () { ";

txtImgSmallHover+="$("+strImgSmallID+").attr('border',1); ";
txtImgSmallHover+="$("+strImgSmallID+").css('opacity',1); ";

txtImgSmallHover+=" }, ";
txtImgSmallHover+="function () { ";

txtImgSmallHover+="$("+strImgSmallID+").attr('border',0); ";
txtImgSmallHover+="if("+strImgSmallID+".substr(1,1)!=currentImgX) ";
txtImgSmallHover+="{$("+strImgSmallID+").css('opacity',0.4);} ";


txtImgSmallHover+=" } ";
txtImgSmallHover+=" ); ";
}
txtImgSmallHover+="}); ";
txtImgSmallHover+=String.fromCharCode(60)+"/script"+String.fromCharCode(62)+" ";
//把这些hover事件追加到imgBigTdX
$("#imgBigTdX").append(txtImgSmallHover);
</script>
</body>
</html>
长长的路常常走走 2010-08-12
  • 打赏
  • 举报
 回复
[Quote=引用 12 楼 lein_design 的回复:]
汗！就在头部的css里面加个img{border:none;}就可以了
也就是说把头部的
<style type="text/css">
body {background-color:#CCCCCC;}
a { }
</style>
改为
<style type="text/css">
body {background-color:#CCCCCC;}
a { }
img{bor……
[/Quote]
文章系统里不能在头部加，另外不希望改变原有CSS
蝶恋花雨 2010-08-12
  • 打赏
  • 举报
 回复
把$("#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>");

里面的a.mylink:hover {color:#0000FF;}的color改成别的颜色就可以了
lein_design 2010-08-12
  • 打赏
  • 举报
 回复
汗！就在头部的css里面加个img{border:none;}就可以了
也就是说把头部的
<style type="text/css">
body {background-color:#CCCCCC;}
a { }
</style>
改为
<style type="text/css">
body {background-color:#CCCCCC;}
a { }
img{border:none;}
</style>
superdcj 2010-08-12
  • 打赏
  • 举报
 回复
buzhidao
viewer:jQuery图片查看器，采用分页查看PDF文件的样式
jQuery图片查看器，采用分页查看PDF文件的样式。 ，然后单击链接“显示1” 特征： 查看其他文件夹 撤出大量页面（图像） 图片与宽度对齐 在任何页面上打开视图 翻转箭头 在字段中输入所需的页面 竖起隐藏单元
史上最好传智播客就业班.net培训教程60G 不下会后悔
这是一个典型的B2C网上商城，使用经典的复杂三层架构（工厂模式）进行开发。涉及图书管理、搜索、订单管理、导航管理等核心模块。在讲解ASP.Net基础后安排这样一个B2C网上商城系统，让学员在实际项目中将学到的知识...
JQuery插件使用技巧(抽奖,百叶窗,幻灯片,图片查看器,图片筛选)
讲解JQuery一些常用实用的插件，包含(抽奖,百叶窗,幻灯片,图片查看器,图片筛选)
JAVA上百实例源码以及开源项目
在有状态SessionBean中，用累加器，以对话状态存储起来，创建EJB对象，并将当前的计数器初始化，调用每一个EJB对象的count()方法，保证Bean正常被激活和钝化，EJB对象是用完毕，从内存中清除…… Java Socket 聊天...
JAVA上百实例源码以及开源项目源代码
图片到图片装载器、绘制火焰效果的X坐标,Y坐标、得到X坐标,Y坐标值、绘制火焰效果Image…… Java加密解密工具集 JCT v1.0源码包 5个目标文件 内容索引:JAVA源码,综合应用,JCT,加密解密 WDSsoft的一款免费源代码 JCT ...
Web 开发

81,091

社区成员

341,718

社区内容

发帖
与我相关
我的任务
社区描述
Java Web 开发
社区管理员
  • Web 开发社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章