缩略图，大图，同页显示

最新推荐文章于 2021-06-03 00:06:10 发布
最新推荐文章于 2021-06-03 00:06:10 发布
阅读量145 收藏
点赞数
文章标签： JavaScript PHP ViewUI


<SCRIPT language=JavaScript type=text/javascript>

function GetObj(objName){
if(document.getElementById){
return eval('document.getElementById("' + objName + '")');
}else{
return eval('document.all.' + objName);
}
}

function sltMenu(menuNo){
//alert(menuNo);
for(var i=1;i<=6;i++){
eval("document.images['menu"+i+"'].src=img"+i+".src");
}
eval("document.images['menu"+menuNo+"'].src=img"+menuNo+"_1.src");
GetObj("curCon").innerHTML=GetObj("con"+menuNo).innerHTML;

//document.frames['fav'].location.href='price'+menuNo+'.html';
}

function chgPic(picNo){
for(var i=1;i<=6;i++){
eval("document.images['cur"+i+"'].src='http://image2.sina.com.cn/ty/newnike/shoe/gw_nk_086.gif'");
//GetObj('a'+i).className='opa';
}
eval("document.images['cur"+picNo+"'].src='http://image2.sina.com.cn/qc/chm0104img/img_triangle1.gif'");
document.images['lgPic'].src = picArr[parseInt(picNo)-1][0];
document.images['lgPic'].alt = picArr[parseInt(picNo)-1][3];
document.all.lgLink.href = 'http://milfans.news.sina.com.cn/user/show_pic_single.php?url='+picArr[parseInt(picNo)-1][0]+'&url_c='+picArr[parseInt(picNo)-1][3];
if(document.images['lgPic'].width<450){
}else{
document.images['lgPic'].width=450;
}
}

function resizePic(obj)
{
var picWidth = obj.width;
var picHeight = obj.height;
if (picWidth > picHeight)
{
if(picWidth > 450)
{
obj.width = 450;
}
}
else
{
if(picWidth > 450)
{
obj.width = 450;
}
}
}
function resizePic2(obj)
{
var picWidth = obj.width;
var picHeight = obj.height;
if (3*picWidth > 4*picHeight)
{
if(picWidth > 80)
{
obj.width = 80;
obj.height = 80*(picHeight/picWidth);
}
}
else
{
if(picHeight > 60)
{
obj.height = 60;
obj.width = 80*(picWidth/picHeight);
}
}
}
</SCRIPT>

<!-- iask begin -->


<TABLE cellSpacing=0 cellPadding=0 width=750 border=0>

<TR>
<TD colSpan=3 height=9></TD></TR>
<TR>
<TD vAlign=top width=564>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0><!-- BEGIN Grid pic_path_picture_info -->

<TBODY>
<TR>
<TD class=title02
style="PADDING-LEFT: 18px; FONT-SIZE: 14px; PADDING-TOP: 6px"
background=缩略图部分，大图.files/model_title_bg.gif height=39
value="我国最新P-12地对地战术导弹与它的俄国表哥伊斯坎德尔"
name="pname"><B>我国最新P-12地对地战术导弹与它的俄国表哥伊斯坎德尔</B></TD></TR>
<TR>
<TD align=middle bgColor=#e3e7eb>
<TABLE cellSpacing=12 cellPadding=0 border=0>
<TBODY>
<TR>
<TD class=title02 noWrap value="中国龙腾飞吧" name="username">作者：<A
href="http://milfans.news.sina.com.cn/user/collections.php?playerid=1195842643"
target=_blank>中国龙腾飞吧</A></TD>
<TD class=title02 noWrap value="2006-10-31 19:51:45"
name="pcreatetime">时间：2006-10-31 19:51:45</TD>
<TD class=title02 noWrap value="30649"
name="clicknum">点击：30649</TD>
<TD class=title02 noWrap value="2" name="collection">收藏：2</TD>
<TD class=title02 noWrap>收藏价格：1</TD></TR>
<TR>
<TD noWrap align=right colSpan=2><A
οnclick=javascript:collect()
href="http://jczsfans.news.sina.com.cn/user/showpicture.php?id=6079#"><IMG
height=22 src="缩略图部分，大图.files/model_button_collection.gif"
width=83 border=0></A>　 <A href="javascript:feedback();"><IMG
height=22 src="缩略图部分，大图.files/model_button_tel.gif" width=58
border=0></A> </TD>
<TD class=title02 noWrap align=right colSpan=2>点击星进行投票</TD>
<TD class=title02 noWrap><A href="javascript:evaluate(0+1)"
;><IMG height=12 src="缩略图部分，大图.files/model_start_2.gif"
width=12 border=0></A><A href="javascript:evaluate(1+1)"
;><IMG height=12 src="缩略图部分，大图.files/model_start_2.gif"
width=12 border=0></A><A href="javascript:evaluate(2+1)"
;><IMG height=12 src="缩略图部分，大图.files/model_start_2.gif"
width=12 border=0></A><A href="javascript:evaluate(3+1)"
;><IMG height=12 src="缩略图部分，大图.files/model_start_2.gif"
width=12 border=0></A><A href="javascript:evaluate(4+1)"
;><IMG height=12 src="缩略图部分，大图.files/model_start_2.gif"
width=12 border=0></A>[票数：0票]
</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD height=4></TD></TR>
<TR>
<TD
style="PADDING-RIGHT: 6px; PADDING-LEFT: 6px; PADDING-BOTTOM: 6px; PADDING-TOP: 6px"
bgColor=#c1ccd2>
<SCRIPT>
//换图的数组;
var picArr = new Array(
new Array(
'http://253/128/1195842643/6079.jpg',//大图路径;
'http://253/128/1195842643/6079_small.jpg',//小图路径;
'#',//图片点击后页面链接;
'我国最新P-12地对地战术导弹与它的俄国表哥伊斯坎德尔'//图片说明;
)
,
new Array(
'http://253/128/1195842643/6078.jpg',//大图路径;
'http://253/128/1195842643/6078.jpg',//小图路径;
'#',//图片点击后页面链接;
'我国最新P-12地对地战术导弹与它的俄国表哥伊斯坎德尔'//图片说明;
)
,
new Array(
'http://253/128/1195842643/6077.jpg',//大图路径;
'http://253/128/1195842643/6077.jpg',//小图路径;
'#',//图片点击后页面链接;
'我国最新P-12地对地战术导弹与它的俄国表哥伊斯坎德尔'//图片说明;
)
,
new Array(
'http://253/128/1195842643/6076.jpg',//大图路径;
'http://253/128/1195842643/6076.jpg',//小图路径;
'#',//图片点击后页面链接;
'我国最新P-12地对地战术导弹与它的俄国表哥伊斯坎德尔'//图片说明;
)
,
new Array(
'http://253/128/1195842643/6075.jpg',//大图路径;
'http://253/128/1195842643/6075.jpg',//小图路径;
'#',//图片点击后页面链接;
'我国最新P-12地对地战术导弹与它的俄国表哥伊斯坎德尔'//图片说明;
)
)
</SCRIPT>

<TABLE cellSpacing=0 cellPadding=0 width="100%" bgColor=#ffffff
border=0>
<TBODY>
<TR>
<SCRIPT language=JavaScript type=text/javascript>
document.writeln("<td align=center valign=bottom style=padding:15px;><a id=lgLink href=\"http://?url="+picArr[0][0]+"&url_c="+picArr[0][3]+"\" target=_blank><img id=lgPic src="+picArr[0][0]+" width=450 class=img01 alt="+picArr[0][3]+" οnlοad='javascript:resizePic(this);'></a></td>");
</SCRIPT>
</TR>
<TR>
<TD bgColor=#c7d1d9 height=1></TD></TR>
<TR>
<TD vAlign=top align=right height=81>
<TABLE cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR align=middle height=14>
<TD width=11></TD>
<TD width=78><IMG id=cur1 height=8
src="缩略图部分，大图.files/img_triangle1.gif" width=16
name=cur1></TD>
<TD width=11></TD>
<TD width=78><IMG id=cur2 height=8
src="缩略图部分，大图.files/gw_nk_086.gif" width=16
name=cur2></TD>
<TD width=11></TD>
<TD width=78><IMG id=cur3 height=8
src="缩略图部分，大图.files/gw_nk_086.gif" width=16
name=cur3></TD>
<TD width=11></TD>
<TD width=78><IMG id=cur4 height=8
src="缩略图部分，大图.files/gw_nk_086.gif" width=16
name=cur4></TD>
<TD width=11></TD>
<TD width=78><IMG id=cur5 height=8
src="缩略图部分，大图.files/gw_nk_086.gif" width=16
name=cur5></TD>
<TD width=11></TD>
<TD width=78><IMG id=cur6 height=8
src="缩略图部分，大图.files/gw_nk_086.gif" width=16
name=cur6></TD>
<TD width=11></TD></TR>
<TR vAlign=top align=middle height=67>
<TD></TD>
<TD><A id=a1 href="javascript:chgPic(1)"><IMG
class=img01 id=lowPic1
src="缩略图部分，大图.files/6079_small.jpg" width=80
border=0></A></TD>
<TD></TD>
<TD><A id=a1 href="javascript:chgPic(2)"><IMG
class=img01 id=lowPic2 height=60
src="缩略图部分，大图.files/6078.jpg" width=80 border=0></A></TD>
<TD></TD>
<TD><A id=a1 href="javascript:chgPic(3)"><IMG
class=img01 id=lowPic3 height=60
src="缩略图部分，大图.files/6077.jpg" width=80 border=0></A></TD>
<TD></TD>
<TD><A id=a1 href="javascript:chgPic(4)"><IMG
class=img01 id=lowPic4 height=60
src="缩略图部分，大图.files/6076.jpg" width=80 border=0></A></TD>
<TD></TD>
<TD><A id=a1 href="javascript:chgPic(5)"><IMG
class=img01 id=lowPic5 height=60
src="缩略图部分，大图.files/6075.jpg" width=80 border=0></A></TD>
<TD></TD></TR></TBODY></TABLE></TD></TR>
<TR>
<TD bgColor=#c7d1d9 height=5></TD></TR>
<TR>
<TD align=middle>
<TABLE cellSpacing=22 cellPadding=0 border=0>
<TBODY>
<TR>
<TD
class="title02 l15">444444444
<BR></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE><!-- 首页大图 end --></TD></TR></TBODY></TABLE>
</TD>
<TD width=5></TD>
<TD style="PADDING-BOTTOM: 9px" vAlign=top align=middle width=181
bgColor=#003060>&nbsp;</TD>
</TR></TABLE><!-- 尾部 begin -->

iteye_6481
关注
上下带缩略图左右滚动
10-19
上下带缩略图左右滚动
【jQuery】点击缩略图查看大图-imgbox
热门推荐
lyloou的专栏(lyloou.com)
09-10 2万+
问题点击缩略图，在当前页或在新标签中打开大图，这种体验不好。能不能达到这样的效果：点击缩略图，在当前页弹出一个弹框，显示大图。效果图解决方案通过使用jQuery插件imgbox来实现。学习资源(jQuery Plugin - imgBox lightbox image)http://www.htmldrive.net/items/show/390/jQuery-Plugin-imgBox-ligh...
点击缩略图，放大图片，大图以轮播的形式展现
01-16
点击缩略图，放大图片，大图以轮播的形式展现，轮播图中默认展现当前点击的图片
JQuery实现点击缩略图查看大图效果
tangtang5963的博客
05-18 2万+
function imgshow(){ var winW = $(window).width(); var winH = $(window).height(); var imgW = $('.imgclass').width(); var imgH = $('.imgclass').height(); console.log(winW,winH,imgW,imgH); va
js实现大图显示
sdaddasd的博客
04-15 2130
[code="java"] New Document $(function(){ $(".pimg").click(function(){ var _this = $(this);//将当前的pimg元素作为_this传入函数 imgShow("#outerdiv", "#inn...
使用ThinkPHP生成缩略图及显示
01-20
使用ThinkPHP生成缩略图及显示，具有一定的参考价值，感兴趣的小伙伴们可以参考一下 首先了解父类Image.class.php（ThinkPHP/Library/Think/Image.class.php）中的一些函数 1:open() 打开被处理的图片 2:thumb() ...
jQuery点缩略图弹出层显示大图片
10-24
知识点一：jQuery点缩略图弹出层显示大图片的方法 在文章中，作者主要介绍了如何使用jQuery来实现一个点缩略图弹出层显示大图片的功能。这个方法的主要思路是用户点击图片后，图片会放大显示在弹出层中。这是一个...
图片上传即时显示缩略图的js代码
10-29
为了提升用户体验，通常会在图片上传过程中即时显示缩略图，让用户能预览并确认上传的图片是否正确。本文将介绍如何使用JavaScript实现这一功能，主要关注代码解析和关键知识点。 首先，我们需要一个HTML结构来承载...
Android 点击缩略图显示大图 Demo
08-15
在Android开发中，有时我们需要实现一个功能：当用户点击一个小的缩略图时，能够弹出一个全屏的大图查看器来展示详细内容。这个"Android 点击缩略图显示大图 Demo"就是用来演示如何实现这一功能的。下面我们将深入...
QListWidget显示图片缩略图
10-21
- 如果原始图片过大，为了节省资源并适应`QListWidget`的大小，我们需要创建缩略图。这可以通过`QPixmap`的`scaled()`方法实现，它可以按照指定的比例或尺寸缩放图像。 ```python thumbnail_size = QtCore.QSize...
react-这是一个用于做图片预览或者图片查看得react插件
08-15
这是一个用于做图片预览或者图片查看得react插件
通过ImageIO创建任意大小图片缩略图(image thumbnail)
weixin_34345753的博客
03-08 249
创建图片缩略图有可以通过QuartzCore的UIGraphicsGetImageFromCurrentImageContext获取，这种方法需要提前计算好图片的长宽比。其实，ImageIO库提供了一个更为方便的方法，Apple的Documentation里甚至写好了一个方法：CGImageRef MyCreateThumbnailImageFromData (NSData * data, int...
点击缩略图模态框显示大图
nic's blog
12-29 1248
原文地址：https://www.jb51.net/article/112764.htm &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;close&amp;
html2canvas截屏文字重叠,html2canvas同域下截取其他网页截图，并在当前页面显示缩略图...
weixin_39736150的博客
06-03 481
html2canvas.js的官网提供的示例可以在当前页面截图。同事采用了window.open方式，新打开页面截图，然后关闭的方式实现。不满意实现效果(多次重复的时候会打开关闭打开关闭这样重复跳页面焦点，看起来很烦)寻找解决办法，尝试window.open打开新页面的时候通过设置属性，不变更焦点，然后发现chrome没有这个参数(ie低版本好像可以？)开发环境是纯前端环境，使用node.js的h...
CSS实现缩略图鼠标移上去显示大图
笑笑
08-19 6678
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 完全css实现缩略图鼠标移上去显示大图 .list{position:relative;} .list span img{ /*CSS for enlarged image*/ border-wi
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值