我是JQuery的新手并且遇到了一个简单的问题。 我想采用下面的标记,并创建一个脚本,将鼠标的较大版本放在img(div中的五个之一)到p,“big”。 “big”中的那个将匹配最后一个mouseover目标,并将作为链接 - 与较小版本相同。
<!doctype html> <html> <head> <meta charset = "UTF-8"/> <title>Image Links</title> </head> <body> <p id = "big"> </p> <div id = "links"> <a href = "http://www. .com/"><img id = " " border = "0" alt = " " src=" .png" width = "100" height = "150" onmouseover="enlargeCopy();"> <a href = "https://www. .com "><img id = " " border = "0" alt = " " src=" " width = "200" height = "100"> <a href = "https://www. .com/"><img id = " " border = "0" alt = " " src=" .png" width = "100" height = "100"> <a href = "http://www. .com/"><img id = " " border = "0" alt = " " src=" .png" width = "100" height = "100"> <a href = "https://www. .com/"><img id = " " border = "0" alt = " " src=" .png" width = "100" height = "100"> </div> <script src="jquery-3.1.0.js"></script> <script src = "Test 3.js"></script> </body> </html>这是我尝试使用的js脚本> <。 我最接近成功的是让[object Object]多次出现(而不是预期的更大的图像)。
//intended to increase the size of imgs in div, and place the larger image at the top of the document var enlargeCopy = function () { var x = $(".links").children("img").css("width", "*=2"); var x = $(".links").children("img").css("height", "*=2"); document.getElementById("big").appendChild(document.createTextNode(x)); };我试图做的事情 - 更简洁地解释:
-1。 是将鼠标悬停在五个图像锚点中的任何一个上(在html文档的div中)
-2。 对于正被鼠标悬停的图像在页面顶部显示为副本(在当前空白的p插槽中)
-3。 该副本的宽度是目标的两倍,是目标的两倍
-4。 复制仍然可以作为一个链接
I'm new to JQuery and stuck on a simple problem. I wanted to take the markup below, and create a script that places a larger version of the mouse'd over img (one of the five from div) into p, "big". The one in "big" will match the last mouseover target, and will function as a link- just the same as the smaller version.
<!doctype html> <html> <head> <meta charset = "UTF-8"/> <title>Image Links</title> </head> <body> <p id = "big"> </p> <div id = "links"> <a href = "http://www. .com/"><img id = " " border = "0" alt = " " src=" .png" width = "100" height = "150" onmouseover="enlargeCopy();"> <a href = "https://www. .com "><img id = " " border = "0" alt = " " src=" " width = "200" height = "100"> <a href = "https://www. .com/"><img id = " " border = "0" alt = " " src=" .png" width = "100" height = "100"> <a href = "http://www. .com/"><img id = " " border = "0" alt = " " src=" .png" width = "100" height = "100"> <a href = "https://www. .com/"><img id = " " border = "0" alt = " " src=" .png" width = "100" height = "100"> </div> <script src="jquery-3.1.0.js"></script> <script src = "Test 3.js"></script> </body> </html>This is the js script I've attempted to use ><. The closest I've come to success is getting [object Object] to appear multiple times (instead of the intended larger image).
//intended to increase the size of imgs in div, and place the larger image at the top of the document var enlargeCopy = function () { var x = $(".links").children("img").css("width", "*=2"); var x = $(".links").children("img").css("height", "*=2"); document.getElementById("big").appendChild(document.createTextNode(x)); };What I am attempting to do- explained more concisely:
-1. is to hover over any one of the five image anchors (in div of the html document)
-2. for the image that is being moused over to appear as a copy at the top of the page (in the currently empty p slot)
-3. for that copy to be twice as wide and twice as long as the moused over target
-4. for the copy to still also function as a link
更多推荐
发布评论