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


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 相关文章推荐
传智播客学习之java 反射
Nov 22 Javascript
让人期待的2011年度最佳 jQuery 插件分享
Mar 16 Javascript
全面兼容的javascript时间格式化函数(比较实用)
May 14 Javascript
jQuery实现手机号码输入提示功能实例
Apr 30 Javascript
js仿淘宝和百度文库的评分功能
May 15 Javascript
使用jquery实现的循环连续可停顿滚动实例
Nov 23 Javascript
利用jquery实现验证输入的是否是数字、小数,包含保留几位小数
Dec 07 Javascript
javascript自执行函数
Feb 10 Javascript
Vue中控制v-for循环次数的实现方法
Sep 26 Javascript
vue根据值给予不同class的实例
Sep 29 Javascript
Vue.js实现的购物车功能详解
Jan 27 Javascript
swiper Scrollbar滚动条组件详解
Sep 08 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
微信支付开发教程(一)微信支付URL配置
2014/05/28 PHP
php使用gettimeofday函数返回当前时间并存放在关联数组里
2015/03/19 PHP
CentOS下与Apache连接的PHP多版本共存方案实现详解
2015/12/19 PHP
PHP+Ajax验证码验证用户登录
2016/07/20 PHP
php.ini中date.timezone设置详解
2016/11/20 PHP
CakePHP框架Model关联对象用法分析
2017/08/04 PHP
用JavaScript实现单继承和多继承的简单方法
2009/03/29 Javascript
JavaScript CSS修改学习第二章 样式
2010/02/19 Javascript
一个JavaScript的求爱小特效
2014/05/09 Javascript
自定义jquery模态窗口插件无法在顶层窗口显示问题
2014/05/29 Javascript
javascript中typeof操作符和constucor属性检测
2015/02/26 Javascript
Javascript实现商品秒杀倒计时(时间与服务器时间同步)
2015/09/16 Javascript
详解javascript实现瀑布流列式布局
2016/01/29 Javascript
jquery easyUI中ajax异步校验用户名
2016/08/19 Javascript
Javascript中document.referrer隐藏来源的方法
2017/01/16 Javascript
vue中v-for加载本地静态图片方法
2018/03/03 Javascript
vue微信分享出来的链接点开是首页问题的解决方法
2018/11/28 Javascript
javascript对HTML字符转义与反转义
2018/12/13 Javascript
详解javascript 变量提升(Hoisting)
2019/03/12 Javascript
JS前端知识点 运算符优先级,URL编码与解码,String,Math,arguments操作整理总结
2019/06/27 Javascript
五句话帮你轻松搞定js原型链
2020/12/09 Javascript
[03:02]辉夜杯主赛事第二日 每日之星
2015/12/27 DOTA
在arcgis使用python脚本进行字段计算时是如何解决中文问题的
2015/10/18 Python
Python编程之微信推送模板消息功能示例
2017/08/21 Python
基于python中staticmethod和classmethod的区别(详解)
2017/10/24 Python
Python 实现淘宝秒杀的示例代码
2018/01/02 Python
tensorflow实现加载mnist数据集
2018/09/08 Python
使用python根据端口号关闭进程的方法
2018/11/06 Python
python 对多个csv文件分别进行处理的方法
2019/01/07 Python
个人校本研修方案
2014/05/26 职场文书
暑期社会实践心得体会
2014/09/02 职场文书
房屋租赁协议书(标准版)
2014/10/02 职场文书
财产分割协议书
2016/03/22 职场文书
求职自荐信该如何书写?
2019/06/24 职场文书
SpringBoot实现quartz定时任务可视化管理功能
2021/08/30 Java/Android
Python获取指定日期是"星期几"的6种方法
2022/03/13 Python