在鼠标上方缩放图像 [英] zooming image at mouse over
本文介绍了在鼠标上方缩放图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
当我用户上传图像并在datalist上显示时，我在下面提到了我的代码。
和显示图像之后我希望鼠标悬停在所有图像上。
所以，我该怎么办？
我的代码是：
< asp： DataList ID = DataList1 runat = server BackColor = ＃DEBA84 BorderColor = ＃DEB A84
BorderStyle = 无 BorderWidth = 1px CellPadding = 3 CellSpacing = 2 GridLines = < span class =code-keyword>两者
< span class =code-attribute> RepeatColumns = 3 >
< footer style backcolor = ＃ F7DFB5 forecolor = ＃8C4510 / >
< item style backcolor = ＃FFF7E7 forecolor = ＃8C4510 / >
< SelectedItemStyle BackColor = ＃738A9C Font-Bold = True ForeColor = 白色 / >
< HeaderStyle Ba ckColor = ＃A55129 Font-Bold = True ForeColor = 白色 / >
< SelectedItemTemplate >
< / SelectedItemTemplate >
< itemtemplate >
< table 样式 = width：100％; >
< tr >
< td rowspan = 3 >
< img alt = src =' 管理员/ ProductImages / <％ #Eval（ ImageName）％>' / >
< / td >
< td >
< / td >
< td >
< / td >
< / tr >
< / table >
< / itemtemplate >
解决方案
使用jQuery很容易：
< html >
< head >
< title > ... < / title >
< script 类型 = text / javascript src = scripts /jquery-1.7.1.min.js\"> < / script >
< / head >
< SP class =code-keyword>< body >
< img < span class =code-attribute> alt = 图片 id = image / >
< script type = text / javascript >
（文档 ）.ready（ function （）{
imageElement =
（ ＃image）; // 元素img由其属性id =image找到
imageElement.attr（< span class =code-string> src， small.png）; // 以小图片开头
imageElement.hover（
function （）{ // 鼠标在图像上移动
when i user upload image and display at datalist i have mention my code at below.
and after display image i want mouse over at all images.
so, how can i do ?
my code is:
<asp:DataList ID="DataList1" runat="server" BackColor="#DEBA84" BorderColor="#DEBA84"
BorderStyle="None" BorderWidth="1px" CellPadding="3" CellSpacing="2" GridLines="Both"
RepeatColumns="3">
<footerstyle backcolor="#F7DFB5" forecolor="#8C4510" />
<itemstyle backcolor="#FFF7E7" forecolor="#8C4510" />
<SelectedItemStyle BackColor="#738A9C" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#A55129" Font-Bold="True" ForeColor="White" />
<SelectedItemTemplate>
</SelectedItemTemplate>
<itemtemplate>
<table style="width: 100%;">
<tr>
<td rowspan="3">
<img alt="" src='Admin/ProductImages/<%# Eval("ImageName") %>' />
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
</itemtemplate> 解决方案
It's easy with jQuery:
<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() { imageElement =
("#image"); // element img found by its attribute id="image" imageElement.attr("src", "small.png"); // start with small image imageElement.hover( function() { // mouse moves over the image
这篇关于在鼠标上方缩放图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
