鼠标滑过出现预览的大图提示效果


Posted in Javascript onFebruary 26, 2014

当鼠标滑过图片时,图片会出现预览的大图,大图下面还会有介绍文字。

<%@ 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>

鼠标滑过出现预览的大图提示效果
Javascript 相关文章推荐
用javascript实现的仿Flash广告图片轮换效果
Apr 24 Javascript
js hover 定时器(实例代码)
Nov 12 Javascript
获得Javascript对象属性个数的示例代码
Nov 21 Javascript
JQuery控制div外点击隐藏而div内点击不会隐藏的方法
Jan 13 Javascript
Javascript验证Visa和MasterCard信用卡号的方法
Jul 27 Javascript
深入理解JavaScript中的块级作用域、私有变量与模块模式
Oct 31 Javascript
javascript中Number的方法小结
Nov 21 Javascript
通过AngularJS实现图片上传及缩略图展示示例
Jan 03 Javascript
vuex实现登录状态的存储,未登录状态不允许浏览的方法
Mar 09 Javascript
JavaScript实现封闭区域布尔运算的示例代码
Jun 25 Javascript
PWA介绍及快速上手搭建一个PWA应用的方法
Jan 27 Javascript
countUp.js实现数字动态变化效果
Oct 17 Javascript
简单的邮箱登陆的提示效果类似于yahoo邮箱
Feb 26 #Javascript
javascript中的undefined和not defined区别示例介绍
Feb 26 #Javascript
通过隐藏iframe实现文件下载的js方法介绍
Feb 26 #Javascript
JS获取几种URL地址的方法小结
Feb 26 #Javascript
js获取当前地址 JS获取当前URL的示例代码
Feb 26 #Javascript
JS获取select的value和text值的简单实例
Feb 26 #Javascript
JS获取文本框,下拉框,单选框的值的简单实例
Feb 26 #Javascript
You might like
php需登录的文件上传管理系统
2020/03/21 PHP
php封装的数据库函数与用法示例【参考thinkPHP】
2016/11/08 PHP
PHP实现动态添加XML中数据的方法
2018/03/30 PHP
php操作redis数据库常见方法实例总结
2020/02/20 PHP
PHP7 整型处理机制修改
2021/03/09 PHP
Node.js实现的简易网页抓取功能示例
2014/12/05 Javascript
AngularJS基础 ng-dblclick 指令用法
2016/08/01 Javascript
KnockoutJS 3.X API 第四章之click绑定
2016/10/10 Javascript
浅谈通过JS拦截 pushState和replaceState事件
2017/07/21 Javascript
轻松搞定jQuery+JSONP跨域请求的解决方案
2018/03/06 jQuery
Vue+ElementUI 中级联选择器Bug问题的解决
2020/07/31 Javascript
vue-calendar-component 封装多日期选择组件的实例代码
2020/12/04 Vue.js
Python中设置变量作为默认值时容易遇到的错误
2015/04/03 Python
使用Python装饰器在Django框架下去除冗余代码的教程
2015/04/16 Python
详解Django中的form库的使用
2015/07/18 Python
python中星号变量的几种特殊用法
2016/09/07 Python
恢复百度云盘本地误删的文件脚本(简单方法)
2017/10/21 Python
JSON文件及Python对JSON文件的读写操作
2018/10/07 Python
OpenCV python sklearn随机超参数搜索的实现
2020/01/17 Python
Django 解决新建表删除后无法重新创建等问题
2020/05/21 Python
如何用Python绘制3D柱形图
2020/09/16 Python
英国时尚饰品和发饰购物网站:Claire’s
2017/07/04 全球购物
马来西亚网上花店:FlowerAdvisor马来西亚
2020/01/03 全球购物
Tahari ASL官方网站:高级设计师女装
2021/03/15 全球购物
super()与this()的区别
2016/01/17 面试题
外贸业务员的岗位职责
2013/11/23 职场文书
见习期自我鉴定
2014/01/31 职场文书
采购经理岗位职责
2014/02/16 职场文书
文明风采获奖感言
2014/02/18 职场文书
如何写求职信
2014/05/24 职场文书
党建目标管理责任书
2014/07/25 职场文书
群众路线剖析材料(四风)
2014/11/05 职场文书
2015年校务公开工作总结
2015/05/26 职场文书
居住证明范文
2015/06/17 职场文书
《月歌。》宣布制作10周年纪念剧场版《RABBITS KINGDOM THE MOVIE》
2022/04/02 日漫
Nginx开源可视化配置工具NginxConfig使用教程
2022/06/21 Servers