编程 Javascript

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()实现图片变大效果的示例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

- Author -

AJin0802

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

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