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 相关文章推荐
javascript replace()正则替换实现代码
Feb 26 Javascript
jQuery中nextUntil()方法用法实例
Jan 07 Javascript
jQuery中的siblings用法实例分析
Dec 24 Javascript
javascript解决小数的加减乘除精度丢失的方案
May 31 Javascript
JavaScript中的Array 对象(数组对象)
Jun 02 Javascript
关于 jQuery Easyui异步加载tree的问题解析
Dec 06 Javascript
详解Vue 事件驱动和依赖追踪
Apr 22 Javascript
vue.js内部自定义指令与全局自定义指令的实现详解(利用directive)
Jul 11 Javascript
详解微信小程序调起键盘性能优化
Jul 24 Javascript
JavaScript引用类型Date常见用法实例分析
Aug 08 Javascript
jQuery实现简易聊天框
Feb 08 jQuery
Selenium执行Javascript脚本参数及返回值过程详解
Apr 01 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
PHP使用递归方式列出当前目录下所有文件的方法
2015/06/02 PHP
PHP实现链式操作的核心思想
2015/06/23 PHP
mysql desc(DESCRIBE)命令实例讲解
2016/09/24 PHP
PHP实现的简单异常处理类示例
2017/05/04 PHP
escape、encodeURI、encodeURIComponent等方法的区别比较
2006/12/27 Javascript
30个最好的jQuery 灯箱插件分享
2011/04/25 Javascript
利用JS自动打开页面上链接的实现代码
2011/09/25 Javascript
JavaScript 函数惰性载入的实现及其优点介绍
2013/08/12 Javascript
JavaScript中window、doucment、body的解释
2013/08/14 Javascript
jQuery子窗体取得父窗体元素的方法
2015/05/11 Javascript
JS实现超精简的链接列表在固定区域内滚动效果代码
2015/11/04 Javascript
基于JQuery的$.ajax方法进行异步请求导致页面闪烁的解决办法
2016/05/10 Javascript
jQueryUI中的datepicker使用方法详解
2016/05/25 Javascript
AngularJS入门之动画
2016/07/27 Javascript
JavaScript实现网页头部进度条刷新
2017/04/16 Javascript
vue.js实现价格格式化的方法
2017/05/23 Javascript
JS仿淘宝搜索框用户输入事件的实现
2017/06/19 Javascript
Vue中之nextTick函数源码分析详解
2017/10/17 Javascript
vue v-for循环重复数据无法添加问题解决方法【加track-by='索引'】
2019/03/15 Javascript
vue如何获取自定义元素属性参数值的方法
2019/05/14 Javascript
Django模板继承 extend标签实例代码详解
2019/05/16 Javascript
分享一个vue项目“脚手架”项目的实现步骤
2019/05/26 Javascript
Vue表单控件数据绑定方法详解
2020/02/05 Javascript
JS实现前端动态分页码代码实例
2020/06/02 Javascript
Python中的yield浅析
2014/06/16 Python
keras的siamese(孪生网络)实现案例
2020/06/12 Python
Django修改app名称和数据表迁移方案实现
2020/09/17 Python
requests在python中发送请求的实例讲解
2021/02/17 Python
python如何实现递归转非递归
2021/02/25 Python
加入学生会演讲稿
2014/04/24 职场文书
一帮一活动总结
2014/05/08 职场文书
交通局领导班子群众路线教育实践活动对照检查材料思想汇报
2014/10/09 职场文书
实习推荐信格式模板
2015/03/27 职场文书
2016读书月活动心得体会
2016/01/14 职场文书
慰问信(范文3篇)
2019/10/23 职场文书
公文写作:工伤事故分析报告怎么写?
2019/11/05 职场文书