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 相关文章推荐
jquery的ajax请求全面了解
Mar 20 Javascript
javascript闭包传参和事件的循环绑定示例探讨
Apr 17 Javascript
javascript判断css3动画结束 css3动画结束的回调函数
Mar 10 Javascript
浅谈JavaScript中的this指针和引用知识
Aug 05 Javascript
Jquery组件easyUi实现选项卡切换示例
Aug 23 Javascript
基于jQuery实现咖啡订单管理简单应用
Feb 10 Javascript
使用JavaScript实现链表的数据结构的代码
Aug 02 Javascript
使用vue-resource进行数据交互的实例
Sep 02 Javascript
webpack+vuex+axios 跨域请求数据的示例代码
Mar 06 Javascript
在vue-cli的组件模板里使用font-awesome的两种方法
Sep 28 Javascript
layui将table转化表单显示的方法(即table.render转为表单展示)
Sep 24 Javascript
微信小程序 wx.getUserInfo引导用户授权问题实例分析
Mar 09 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开发过程中关于继承的使用方法分享
2011/06/17 PHP
PHP图片处理之使用imagecopy函数添加图片水印实例
2014/11/19 PHP
PHP 设计模式系列之 specification规格模式
2016/01/10 PHP
PHP与SQL语句常用大全
2016/12/10 PHP
PHP创建单例后台进程的方法示例
2017/05/23 PHP
我的Node.js学习之路(三)--node.js作用、回调、同步和异步代码 以及事件循环
2014/07/06 Javascript
浅谈javascript对象模型和function对象
2014/12/26 Javascript
几种经典排序算法的JS实现方法
2016/03/25 Javascript
jquery 遍历数组 each 方法详解
2016/05/25 Javascript
很棒的js Tab选项卡切换效果
2016/08/30 Javascript
React props和state属性的具体使用方法
2018/04/12 Javascript
Bootstrap Fileinput 4.4.7文件上传实例详解
2018/07/25 Javascript
微信小程序中this.data与this.setData的区别详解
2018/09/17 Javascript
vue 对axios get pust put delete封装的实例代码
2020/01/05 Javascript
vue video和vue-video-player实现视频铺满教程
2020/10/30 Javascript
js实现扫雷源代码
2020/11/27 Javascript
原生js实现放大镜组件
2021/01/22 Javascript
Python二分法搜索算法实例分析
2015/05/11 Python
Python简单生成8位随机密码的方法
2017/05/24 Python
Python中join函数简单代码示例
2018/01/09 Python
自定义Django默认的sitemap站点地图样式
2020/03/04 Python
机电一体化专业推荐信
2013/12/03 职场文书
自我评价是什么
2014/01/04 职场文书
理工类毕业自我鉴定
2014/02/20 职场文书
八项规定整改方案
2014/02/21 职场文书
班级德育工作实施方案
2014/02/21 职场文书
售后服务经理岗位职责
2014/02/25 职场文书
食品安全宣传标语
2014/06/07 职场文书
校本研修个人总结
2015/02/28 职场文书
小学班主任自我评价
2015/03/11 职场文书
新员工入职感想
2015/08/07 职场文书
Django实现在线无水印抖音视频下载(附源码及地址)
2021/05/06 Python
Python异常类型以及处理方法汇总
2021/06/05 Python
MongoDB使用场景总结
2022/02/24 MongoDB
详解使用内网穿透工具Ngrok代理本地服务
2022/03/31 Servers
springboot 全局异常处理和统一响应对象的处理方式
2022/06/28 Java/Android