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


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 相关文章推荐
JS中style属性
Oct 11 Javascript
Javascript Object.extend
May 18 Javascript
JavaScript使用forEach()与jQuery使用each遍历数组时return false 的区别
Aug 26 Javascript
JS 拼凑字符串的简单实例
Sep 02 Javascript
js 数据存储和DOM编程
Feb 09 Javascript
jQuery实现搜索页面关键字的功能
Feb 16 Javascript
Angular5给组件本身的标签添加样式class的方法
Apr 07 Javascript
对类Vue的MVVM前端库的实现代码
Sep 07 Javascript
Vue使用vue-draggable 插件在不同列表之间拖拽功能
Mar 12 Javascript
通过滑动翻页效果实现和移动端click事件问题
Jan 26 Javascript
javascript中layim之查找好友查找群组
Feb 06 Javascript
javascript实现用户必须勾选协议实例讲解
Mar 24 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
咖啡知识 咖啡养豆要养多久 排气又是什么
2021/03/06 新手入门
php下载远程文件类(支持断点续传)
2008/11/14 PHP
PHP语法自动检查的Vim插件
2014/08/11 PHP
thinkphp 手机号和用户名同时登录
2017/01/20 PHP
Laravel 自定命令以及生成文件的例子
2019/10/23 PHP
PHP保存Base64图片base64_decode的问题整理
2019/11/04 PHP
jQuery each()小议
2010/03/18 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件
2011/12/21 Javascript
鼠标拖动实现DIV排序示例代码
2013/10/14 Javascript
jquery中ajax跨域方法实例分析
2015/12/18 Javascript
node.js微信公众平台开发教程
2016/03/04 Javascript
利用Angularjs和Bootstrap前端开发案例实战
2016/08/27 Javascript
JavaScript正则表达式实例详解
2016/10/16 Javascript
Bootstrap轮播图的使用和理解4
2016/12/14 Javascript
Vue.JS项目中5个经典Vuex插件
2017/11/28 Javascript
vue中echarts3.0自适应的方法
2018/02/26 Javascript
JS高级技巧(简洁版)
2018/07/29 Javascript
微信JSSDK实现打开摄像头拍照再将相片保存到服务器
2019/11/15 Javascript
100行代码实现vue表单校验功能(小白自编)
2019/11/19 Javascript
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
2020/04/11 Javascript
[26:52]LGD vs EG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
用Python解析XML的几种常见方法的介绍
2015/04/09 Python
python使用psutil模块获取系统状态
2016/08/27 Python
浅析Python数据处理
2018/05/02 Python
Python数据结构之图的应用示例
2018/05/11 Python
pyqt实现.ui文件批量转换为对应.py文件脚本
2019/06/19 Python
浅谈Python里面None True False之间的区别
2020/07/09 Python
filter使用python3代码进行迭代元素的实例详解
2020/12/03 Python
秋季运动会表扬稿
2014/01/16 职场文书
父亲的菜园教学反思
2014/02/13 职场文书
超市开业庆典活动策划方案
2014/09/15 职场文书
2015年学生会干事工作总结
2015/04/09 职场文书
学校党支部承诺书
2015/04/30 职场文书
代理词怎么写
2015/05/25 职场文书
读书笔记格式
2015/07/02 职场文书
2022年显卡天梯图(6月更新)
2022/06/17 数码科技