鼠标悬停放大图像而不影响其他页面 [英] Zoom image on mouse over without affecting other page
本文介绍了鼠标悬停放大图像而不影响其他页面的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我是html，javascript的新手。 PLz帮帮我。我必须缩放图像鼠标而不影响页面上的其他控件。就像这样，请查看 http://www.gorditosdecorazon.com/grid_productos/productos.htm [ ^ ]
Plz help
hi ,
i new to html, javascript. PLz help me out. i have to zoom image om mouse over without affeccting the other control on pages. just like this, plz check http://www.gorditosdecorazon.com/grid_productos/productos.htm[^]
Plz help
推荐答案
<!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=ISO-8859-1">
<title>Fancy Thumbnail Hover Effect w/ jQuery - by Soh Tanaka</title>
<style type="text/css">
body {
font: Arial, Helvetica, sans-serif normal 10px;
margin: 0; padding: 0;
}
* {margin: 0; padding: 0;}
img {border: none;}
.container {
height: 360px;
width: 910px;
margin: -250px 0 0 -450px;
top: 50%; left: 50%;
position: absolute;
}
ul.thumb {
float: left;
list-style: none;
margin: 0; padding: 10px;
width: 360px;
}
ul.thumb li {
margin: 0; padding: 5px;
float: left;
position: relative;
width: 110px;
height: 110px;
}
ul.thumb li img {
width: 100px; height: 100px;
border: 1px solid #ddd;
padding: 5px;
background: #f0f0f0;
position: absolute;
left: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
ul.thumb li img.hover {
background:url(thumb_bg.png) no-repeat center center;
border: none;
}
#main_view {
float: left;
padding: 9px 0;
margin-left: -10px;
}
</style>
<script type="text/javascript" src="productos_archivos/jquery-latest.js"></script>
<script type="text/javascript">
（document）.ready（function（）{
//更大的缩略图预览
(document).ready(function(){ //Larger thumbnail preview
(\"ul.thumb li）。hover（function（）{
("ul.thumb li").hover(function() {
这篇关于鼠标悬停放大图像而不影响其他页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
