html中点击缩略图显示不同的图片有没有demo代码量越少越好?

html中点击缩略图显示不同的图片有没有demo代码量越少越好?,第1张

请把下面段代码保存为test.html,跟s1.jpg, s2.jpg, s3.jpg和b1.jpg, b2.jpg, b3.jpg六张图片放在一起,应该就可以实现点击小图片,显示大图片。希望对你有用。

<html>

<body>

<img id=showbig /><hr>

<script>

var Simgs = ["s1.jpg", "s2.jpg", "s3.jpg"]

var Bimgs = ['b1.jpg', 'b2.jpg', 'b3.jpg']

for(x in Simgs)

{document.write("<img id="+Bimgs[x]+" src="+Simgs[x]+" onclick=showbig(this.id) />")}

function showbig(sid){ document.getElementById("showbig").src=sid}

</script>

</body>

</html>

//此行不要复制下一行为开始

'RepairImage.vbs

'Start of Image Preview Repair

'This section repairs the associations for Image Preview

Option Explicit

'Declare variables

Dim WSHShell, p1, p2, p3

Set WSHShell = WScript.CreateObject("WScript.Shell")

p2 = "\ShellEx\{BB2E617C-0920-11d1-9A0B-00C04FC2D6C1}\"

p3 = "{7376D660-C583-11d0-A3A5-00C04FD706EC}"

For Each p1 in Array(".art",".bmp",".dib",".gif",".jfif",".jpe",".jpeg",".jpg",".png",".wmf")

WSHShell.RegWrite "HKCR\" &p1 &p2, p3

Next

p1 = ".tif"

p3 = "{1AEB1360-5AFC-11d0-B806-00C04FD706EC}"

WSHShell.RegWrite "HKCR\" &p1 &p2, p3

p1 = ".tiff"

WSHShell.RegWrite "HKCR\" &p1 &p2, p3

p1 = ".htm"

p3 = "{EAB841A0-9550-11cf-8C16-00805F1408F3}"

WSHShell.RegWrite "HKCR\" &p1 &p2, p3

p1 = ".html"

WSHShell.RegWrite "HKCR\" &p1 &p2, p3

'Start of Thumbnail Repair

'This section repairs the view in Thumbnail mode of Explorer.

p2 = "\CLSID\"

p3 = "{25336920-03F9-11cf-8FD0-00AA00686F13}"

For Each p1 in Array(".art",".bmp",".dib",".gif",".jfif",".jpe",".jpeg",".jpg",".png",".tif",".tiff",".wmf")

WSHShell.RegWrite "HKCR\" &p1 &p2, p3

Next

MsgBox "Image Preview and Thumbnail View File" &vbCR &"Associations have been restored.", 4096, "Confirmation"

Set WSHShell = Nothing

//此行不要复制上一行未结束

将代码粘贴到记事本上然后保存并将名称.txt改为.vbs格式的,然后点击打开d出对话框点击“确定即可”,然后到html页面文件夹下点击查看方式为缩略图查看即可查看到html为缩略图显示方式

<?php // File and new size $filename = 'test.jpg'$percent = 0.5// Content type header('Content-type: image/jpeg')// Get new sizes list($width, $height) = getimagesize($filename)$newwidth = $width * $percent$newheight = $height * $percent// Load $thumb = imagecreatetruecolor($newwidth, $newheight)$source = imagecreatefromjpeg($filename)// Resize imagecopyresized($thumb, $source, 0, 0, 0, 0, $newwidth, $newheight, $width, $height)// Output imagejpeg($thumb)?> 不清楚再问我。 本程序是将 test这张图片显示为原来的一半大小。不清楚再问我


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/zaji/6173548.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-17
下一篇 2023-03-17

发表评论

登录后才能评论

评论列表(0条)

保存