JavaScript通过mouseover()实现图片变大效果的示例


Posted in Javascript onDecember 20, 2017

实例如下所示:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>图片提示</title> 
<!--jQuery --> 
<script src="../jquery.min.js"type="text/javascript"></script> 
<style type="text/css"> 
body{ 
margin:0; 
padding:40px; 
background:#fff; 
font:80% Arial, Helvetica, sans-serif; 
color:#555; 
line-height:180%; 
} 
img{border:none;} 
ul,li{ 
margin:0; 
padding:0; 
} 
li{ 
list-style:none; 
float:left; 
display:inline; 
margin-right:10px; 
border:1px solid #AAAAAA; 
} 
/* tooltip */ 
#tooltip{ 
position:absolute; 
border:1px solid #ccc; 
background:#333; 
padding:2px; 
display:none; 
color:#fff; 
} 
</style> 
<script type="text/javascript"> 
$(document).ready(function(){ 
var x=1,y=1; 
var myHref; 
$("a[class=tooltip]").mouseover(function(e){//鼠标悬停的时候 
myHref=this.href;//获取大图片 
var $div=$("<div id='tooltip'><img src='"+myHref+"'></img></div>");//创建一个div 
$("body").append($div);//把div添加到body中 
$("#tooltip").css({ 
top:e.pageY+y+"px", 
left:e.pageX+x+"px" 
}).show("slow"); 
}).mouseout(function(e){//鼠标移开的时候 
$("#tooltip").remove(); 
}).mousemove(function(e){//鼠标移动的时候 
$("#tooltip").css({ 
top:e.pageY+y+"px", 
left:e.pageX+x+"px" 
}).show("slow"); 
}) 
}); 
</script> 
</head> 
<body> 
<ul> 
<li><a href="02121.png" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="tooltip" ><img src="02121.png" /></a></li> 
<li><a href="02121.png" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="tooltip" ><img src="02121.png" /></a></li> 
<li><a href="02121.png" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="tooltip" ><img src="02121.png" /></a></li> 
<li><a href="02121.png" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="tooltip" ><img src="02121.png" /></a></li> 
</ul> 
<br/><br/><br/><br/> 
<br/><br/><br/><br/>
</body> 
</html>

以上这篇JavaScript通过mouseover()实现图片变大效果的示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
关于Jqzoom的使用心得 jquery放大镜效果插件
Apr 12 Javascript
JavaScript 面向对象的之私有成员和公开成员
May 04 Javascript
js如何获取file控件的完整路径具体实现代码
May 15 Javascript
jquery自定义滚动条插件示例分享
Feb 21 Javascript
JS实现的不规则TAB选项卡效果代码
Sep 18 Javascript
js剪切板应用clipboardData实例解析
May 29 Javascript
利用Angularjs和Bootstrap前端开发案例实战
Aug 27 Javascript
浅谈js函数的多种定义方法与区别
Nov 29 Javascript
JavaScript制作简易计算器(不用eval)
Feb 05 Javascript
JS对象的深度克隆方法示例
Mar 16 Javascript
vue中 数字相加为字串转化为数值的例子
Nov 07 Javascript
vue-cli —— 如何局部修改Element样式
Oct 22 Javascript
详解JS模块导入导出
Dec 20 #Javascript
vue实现样式之间的切换及vue动态样式的实现方法
Dec 19 #Javascript
vue+vuex+axios+echarts画一个动态更新的中国地图的方法
Dec 19 #Javascript
常用的9个JavaScript图表库详解
Dec 19 #Javascript
完美解决手机网页中输入框被输入法遮挡的问题
Dec 19 #Javascript
js解决软键盘遮挡输入框的问题分享
Dec 19 #Javascript
Angular2实现组件交互的方法分析
Dec 19 #Javascript
You might like
全国FM电台频率大全 - 19 广东省
2020/03/11 无线电
javascript some()函数用法详解
2014/11/13 PHP
PHP合并数组+号和array_merge的区别
2015/06/25 PHP
php制作的简单验证码识别代码
2016/01/26 PHP
PHP+Ajax实现上传文件进度条动态显示进度功能
2018/06/04 PHP
JavaScript 异步调用框架 (Part 3 - 代码实现)
2009/08/04 Javascript
php的文件上传入门教程(实例讲解)
2014/04/10 Javascript
微信小程序登录态控制深入分析
2017/04/12 Javascript
微信小程序 上传头像的实例详解
2017/10/27 Javascript
JS实现点击拉拽轮播图pc端移动端适配
2018/09/05 Javascript
react native 原生模块桥接的简单说明小结
2019/02/26 Javascript
小白教程|一小时上手最流行的前端框架vue(推荐)
2019/04/10 Javascript
js实现轮播图效果 z-index实现轮播图
2020/01/17 Javascript
功能完善的小程序日历组件的实现
2020/03/31 Javascript
JavaScript ES6 Class类实现原理详解
2020/05/08 Javascript
[50:45]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第一场
2018/04/10 DOTA
Python中atexit模块的基本使用示例
2015/07/08 Python
Python实现按照指定要求逆序输出一个数字的方法
2018/04/19 Python
pandas数据处理基础之筛选指定行或者指定列的数据
2018/05/03 Python
python最长回文串算法
2018/06/04 Python
Python计算开方、立方、圆周率,精确到小数点后任意位的方法
2018/07/17 Python
Python猜数字算法题详解
2020/03/01 Python
matplotlib jupyter notebook 图像可视化 plt show操作
2020/04/24 Python
Keras SGD 随机梯度下降优化器参数设置方式
2020/06/19 Python
html5 音乐播放器 audio 标签使用概述
2013/07/15 HTML / CSS
HTML5跳转小程序wx-open-launch-weapp的示例代码
2020/07/16 HTML / CSS
描述RIP和OSPF区别以及特点
2015/01/17 面试题
营销主管自我评价怎么写
2013/09/19 职场文书
写好自荐信的技巧
2013/11/08 职场文书
婚礼司仪主持词
2014/03/14 职场文书
学生会副主席竞聘书
2014/03/31 职场文书
经典导游欢迎词
2015/01/26 职场文书
党员发展大会主持词
2015/07/03 职场文书
pytorch通过训练结果的复现设置随机种子
2021/06/01 Python
详细介绍MySQL中limit和offset的用法
2022/05/06 MySQL
javascript中Set、Map、WeakSet、WeakMap区别
2022/12/24 Javascript