HTML,当我鼠标移动到小图片上面的时候,鼠标后面就显示大图片?

 我来答
女亅主角丶
推荐于2018-05-07 · TA获得超过255个赞
知道答主
回答量:106
采纳率:0%
帮助的人:47.3万
展开全部
下载一下jquery插件,然后新建一个ToolTip.js文件,在该文件下写入以下代码:
$(function() {
var x = 10;
var y = 10;
$("a.tooltip").mouseover(function(e) {
this.myTitle = this.title;
this.title = "";
var tooltip = "<div id='tooltip'><img src='" + this.href + "' alt='产品预览图' width='250px' height='250px'/><\/div>"; //创建 div 元素
$("body").append(tooltip); //把它追加到文档中
$("#tooltip")
.css({
"top": (e.pageY + y) + "px",
"left": (e.pageX + x) + "px"
}).show("fast"); //设置x坐标和y坐标,并且显示
}).mouseout(function() {
this.title = this.myTitle;
$("#tooltip").remove(); //移除
}).mousemove(function(e) {
$("#tooltip")
.css({
"top": (e.pageY + y) + "px",
"left": (e.pageX + x) + "px"
});
});
})
//]]>

在页面导入两个.js文件,

<script src="../javascripts/jquery-1.3.1.js" type="text/javascript"></script>
<script src="../javascripts/ToolTip.js" type="text/javascript"></script>
最后把图片绑定到a标记就可以了:
<a href="<%#DataBinder.Eval(Container.DataItem,"imageBigUrl") %>" class="tooltip"> //大图片提示
<asp:ImageButton ID="image1" runat="server" ImageUrl='<%#DataBinder.Eval(Container.DataItem,"imageSmallUrl") %>' Width="50px" Height="50px" /></a>
匿名用户
2013-03-29
展开全部
可以实现的,把要显示的大图片放一个隐藏的DIV里面就可以了。当鼠标移动到小图片就触发获得焦点的事件。其实阿,用JQuery实现是最理想的了,JQuery专门实现图片预览,等一些很炫的效果。建议去网上了解一下。
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
匿名用户
2013-03-29
展开全部
简单点先把这个DIV,做好,然后设为隐藏。然后用JSonmousemove就是鼠标移上去显示这个onmouseout就是鼠标移走,再隐藏!!!
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
匿名用户
2013-03-29
展开全部
是啊 , 不知道楼主想问什么
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 1条折叠回答
收起 更多回答(2)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式