鼠标悬停缩放效果 [英] Mouse over zoom effect
本文介绍了鼠标悬停缩放效果的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在开发在线购物车，我的要求是我想将鼠标放在缩放图像上，如下面链接
Amazon.com项目
I am working on online shopping cart,My requirement is i want to display mouse over zoom image like below link
Amazon.com item
<a href="big.jpg" class="zoom"><img src="small.png"/></a>
但是我想在弹出窗口中显示鼠标悬停图像。我的问题是我的大图像（big.jpg）显示在我的页脚部分。
我只想在鼠标悬停时显示我的大图像（big.jpg）小图像，我不想在我的页面中显示那个大图像。
请给我任何建议，并豪宅进行任何修改。
But i want to display mouse over image zoom in popup.My problem is my big image (big.jpg) is display in my page footer part.
"I want to display my big image (big.jpg) only when mouse over on small image and i don't want to display that big image in my page. "
please give me any suggestions,and mansion any modification.
推荐答案
如果你使用jQuery，这是一个非常简单的事情。
假设你有两个版本的同一个图像：原始版本，大.png，并重新采样到较小的尺寸，small.png。这个完整的示例将起到作用：
This is a really simple thing if you use jQuery.
Let's assume you have two versions of the same image: original one, "big.png", and the one resampled to smaller size, "small.png". The this complete sample will do the trick:
<html>
<head>
<title></title>
<script type="text/javascript" src="scripts/jquery-1.7.1.min.js"></script>
</head>
<body>
<img alt="Image" id="image" />
<script type="text/javascript">
（document）.ready （function（）{//请参阅
下面的文章jQuery如何工作imageElement =
(document).ready(function() { // please see the article "How jQuery works" below imageElement =
（＃image）; //使用id选择器获取包装器
imageElement.attr（src，small.png）; //初始状态
imageElement.hover（//接受两个处理函数：
function（）{//第一个，当鼠标进入时调用
("#image"); // get wrapper using id selector imageElement.attr("src", "small.png"); // initial state imageElement.hover( // accepts two handler functions: function() { // first one, called when mouse goes in
这篇关于鼠标悬停缩放效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
