鼠标滑过出现预览的大图提示效果
更新时间：2014年02月26日 15:44:00 作者：
这篇文章主要介绍了如何实现鼠标滑过出现预览的大图提示效果,需要的朋友可以参考下
当鼠标滑过图片时，图片会出现预览的大图，大图下面还会有介绍文字。
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="图片提示效果.aspx.cs" Inherits="图片提示效果" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type ="text/css" >
.aa{
width:88px;
height :100px;
}
</style>
<script type ="text/javascript" src ="Scripts/jquery-1.7.1.js" ></script>
<script type ="text/javascript" >
$(function () {
var x = 10;
var y = 20;
$("a.tooltip").mouseover(function (e) {
this.myTitle = this.title;
this.title = "";
var imgTitle = this.myTitle ? "<br/>" + this.myTitle : "";
var tooltip = "<div id='tooltip'><img src='" + this.href + "' alt='产品预览图'/>" + imgTitle + "</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"
});
});
})
</script>
</head>
<body>
<form id="form1" runat="server">
<div >
<a href ="image/4.jpg" class ="tooltip" title ="鞋子"><img src="image/4.jpg" alt="鞋子" class="aa"/> </a>
<a href ="image/5.jpg" class ="tooltip" title ="手套"><img src="image/5.jpg" alt="手套" class="aa"/> </a>
<a href ="image/6.jpg" class ="tooltip" title ="裙子"><img src="image/6.jpg" alt="裙子" class="aa"/> </a>
<a href ="image/7.jpg" class ="tooltip" title ="包包"><img src="image/7.jpg" alt="包包" class="aa"/> </a>
</div>
</form>
</body>
</html>
复制代码 代码如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="图片提示效果.aspx.cs" Inherits="图片提示效果" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type ="text/css" >
.aa{
width:88px;
height :100px;
}
</style>
<script type ="text/javascript" src ="Scripts/jquery-1.7.1.js" ></script>
<script type ="text/javascript" >
$(function () {
var x = 10;
var y = 20;
$("a.tooltip").mouseover(function (e) {
this.myTitle = this.title;
this.title = "";
var imgTitle = this.myTitle ? "<br/>" + this.myTitle : "";
var tooltip = "<div id='tooltip'><img src='" + this.href + "' alt='产品预览图'/>" + imgTitle + "</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"
});
});
})
</script>
</head>
<body>
<form id="form1" runat="server">
<div >
<a href ="image/4.jpg" class ="tooltip" title ="鞋子"><img src="image/4.jpg" alt="鞋子" class="aa"/> </a>
<a href ="image/5.jpg" class ="tooltip" title ="手套"><img src="image/5.jpg" alt="手套" class="aa"/> </a>
<a href ="image/6.jpg" class ="tooltip" title ="裙子"><img src="image/6.jpg" alt="裙子" class="aa"/> </a>
<a href ="image/7.jpg" class ="tooltip" title ="包包"><img src="image/7.jpg" alt="包包" class="aa"/> </a>
</div>
</form>
</body>
</html>
相关文章
这篇文章详细介绍了GET、POST、PUT和DELETE四种HTTP请求方法的使用方式、优缺点及应用场景,文中通过代码介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下2025-01-01
这篇文章主要为大家详细介绍了原生js实现下拉刷新和上拉加载更多，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-01-01
这篇文章主要为大家详细介绍了JavaScript实现左侧菜单效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-12-12
这篇文章主要为大家详细介绍了JS实现表单验证案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
这篇文章主要介绍了原生JS实现列表内容自动向上滚动效果，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-05-05
forEach是没有返回值并且不直接改变原数组的,今天发现是不能直接改变,下面这篇文章主要给大家介绍了关于Js中forEach修改原数组与sort排序经典场景的相关资料,需要的朋友可以参考下2022-05-05
最近做项目需要这样的需求，当用户点击标签栏按钮，向下弹出菜单，再次点击，收回菜单。接下来通过本文给大家介绍微信小程序实现弹出菜单功能，感兴趣的朋友一起看看吧2018-06-06
这篇文章主要介绍了微信小程序下拉加载和上拉刷新两种实现方法详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-09-09
这篇文章主要为大家详细介绍了微信小程序实现底部弹出模态框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-11-11
Firefox 与 IE 替换节点的方法2010-02-02
最新评论