点击小图看大图的js,如何点击大图，能新窗口打开原始大图

2023-04-11 11:27:02JavaScript013

点击小图看大图的js,如何点击大图，能新窗口打开原始大图,第1张

<html>

<head>

<title>JS特效学院|JsWeb8.cn|---简单的图片放大展示效果</title>

.spic a img{-moz-opacity:0.5filter:alpha(opacity=50)border:0px}

.spic a:hover{font-size:9px}

.spic a:hover img{-moz-opacity:0.5filter:alpha(opacity=100)cursor:hand}

</style>

function seeBig(_this) {

OpenWindow = window.open("", "img", "")//打开新窗口

OpenWindow.document.write("<html>")//为新窗口设定html代码

OpenWindow.document.write("<head>")

OpenWindow.document.write("<title>例子</title>")

OpenWindow.document.write("</head>")

OpenWindow.document.write("<body>")

OpenWindow.document.write("<img src='" + _this.parentNode.getElementsByTagName("img")[0].src + "' alt='' /")

OpenWindow.document.write("</body>")

OpenWindow.document.write("</html>")

OpenWindow.document.close()

//注：document.write 一行只能出现一种标签

//需要 OpenWindow.document.close()

}

</script>

</head>

<body>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

第一种方法：将三张大图放在div里面，这三个div大小还有别的属性都一样，但是默认是隐藏的，display：none；隐藏display：block；显示然后点击一张图片，对应的大图div显示出来，点击第二张，第一个大图div隐藏，第二个大图div显示。第二种方法，只有一个大的div，里面放<img>标签，但是src也就是路径是空的，然后当你点击第一个小图的时候，给这个img标签的src赋值，也就是第一个大图的路径，点击第二个，路径变更。第三种，去网上找找这样的源代码，图片轮转。好多源代码各种样式的都有。希望能帮助到你

function showImg(event,imgId){

var x = document.body.scrollLeft+event.clientX

var y = y=document.body.scrollTop+event.clientY

document.getElementById(imgId).style.display="block"

document.getElementById(imgId).style.left=x

document.getElementById(imgId).style.top=y

}

function hiddenImg(imgId){

document.getElementById(imgId).style.display="none"

}

</script>

-----------以上放在HEAD里-----------