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


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实例教程(19) 使用HoTMetal(3)
Dec 23 Javascript
js显示时间 js显示最后修改时间
Jan 02 Javascript
Javascript模块化编程(一)AMD规范(规范使用模块)
Jan 17 Javascript
同域jQuery(跨)iframe操作DOM(实例讲解)
Dec 19 Javascript
微信小程序 前端源码逻辑和工作流详解
Oct 08 Javascript
vue 2.0组件与v-model详解
Mar 27 Javascript
jquery与js实现全选功能的区别
Jun 11 jQuery
React组件refs的使用详解
Feb 09 Javascript
Vue.js 动态为img的src赋值方法
Mar 14 Javascript
Vue实现导航栏点击当前标签变色功能
Aug 19 Javascript
JS实现随机抽取三人
Nov 06 Javascript
浅谈TypeScript的类型保护机制
Feb 23 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
全国FM电台频率大全 - 17 湖北省
2020/03/11 无线电
php的array数组和使用实例简明教程(容易理解)
2014/03/20 PHP
使用PHP实现下载CSS文件中的图片
2015/12/06 PHP
用jquery来定位
2007/02/20 Javascript
jquery.AutoComplete.js中文修正版(支持firefox)
2010/04/09 Javascript
juqery 学习之五 文档处理 包裹、替换、删除、复制
2011/02/11 Javascript
javascript中数组的sort()方法的使用介绍
2013/12/18 Javascript
JavaScript 学习笔记之语句
2015/01/14 Javascript
javascript时间差插件分享
2016/07/18 Javascript
原生js实现放大镜
2017/02/20 Javascript
NodeJs模拟登陆正方教务
2017/04/28 NodeJs
Axios学习笔记之使用方法教程
2017/07/21 Javascript
vue watch深度监听对象实现数据联动效果
2018/08/16 Javascript
Python获取DLL和EXE文件版本号的方法
2015/03/10 Python
利用Python实现图书超期提醒
2016/08/02 Python
python操作redis方法总结
2018/06/06 Python
在ubuntu16.04中将python3设置为默认的命令写法
2018/10/31 Python
Python开发网站目录扫描器的实现
2019/02/21 Python
Python 实现自动导入缺失的库
2019/10/29 Python
用OpenCV将视频分解成单帧图片,图片合成视频示例
2019/12/10 Python
pycharm设置当前工作目录的操作(working directory)
2020/02/14 Python
python判断正负数方式
2020/06/03 Python
python PIL模块的基本使用
2020/09/29 Python
美国瑜伽服装和装备购物网站:Mukha Yoga
2019/02/22 全球购物
英国老牌潮鞋店:Offspring
2019/08/19 全球购物
新闻编辑专业自荐信
2014/07/02 职场文书
美术第二课堂活动总结
2014/07/08 职场文书
民警个人对照检查剖析材料
2014/09/17 职场文书
2014年政协委员工作总结
2014/12/01 职场文书
2015年暑期社会实践方案
2015/07/14 职场文书
写给同事的离职感言
2015/08/04 职场文书
超市主管竞聘书
2015/09/15 职场文书
《认识钟表》教学反思
2016/02/16 职场文书
iPhone13再次曝光
2021/04/15 数码科技
Python基础之条件语句详解
2021/06/16 Python
volatile保证可见性及重排序方法
2022/08/05 Java/Android