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 相关文章推荐
PNG背景在不同浏览器下的应用
Jun 22 Javascript
AngularJs根据访问的页面动态加载Controller的解决方案
Feb 04 Javascript
javascript实现简单加载随机色方块
Dec 25 Javascript
学习Angularjs分页指令
Jul 01 Javascript
详解Webstorm 新建.vue文件支持高亮vue语法和es6语法
Oct 26 Javascript
json前后端数据交互相关代码
Sep 19 Javascript
JavaScript设计模式之装饰者模式实例详解
Jan 17 Javascript
vue.js中ref和$refs的使用及示例讲解
Aug 14 Javascript
JavaScript算法学习之冒泡排序和选择排序
Nov 02 Javascript
小程序分享链接onShareAppMessage的具体用法
May 22 Javascript
在Vue 中获取下拉框的文本及选项值操作
Aug 13 Javascript
JS实现4位随机验证码
Oct 19 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
一个高ai的分页函数和一个url函数
2006/10/09 PHP
smarty自定义函数用法示例
2016/05/20 PHP
PHP编写的图片验证码类文件分享
2016/06/06 PHP
php简单计算权重的方法示例【适合抽奖类应用】
2019/06/10 PHP
PHP设计模式之外观模式(Facade)入门与应用详解
2019/12/13 PHP
JavaScript中的style.cssText使用教程
2014/11/06 Javascript
NodeJs中的VM模块详解
2015/05/06 NodeJs
基于jQuey实现鼠标滑过变色(整行变色)
2015/12/07 Javascript
详解Node.js中的事件机制
2016/09/22 Javascript
微信小程序实战篇之购物车的实现代码示例
2017/11/30 Javascript
微信小程序通过保存图片分享到朋友圈功能
2018/05/24 Javascript
微信h5静默和非静默授权获取用户openId的方法和步骤
2020/06/08 Javascript
JS数组及对象遍历方法代码汇总
2020/06/16 Javascript
[02:22]《新闻直播间》2017年08月14日
2017/08/15 DOTA
Python实现自动为照片添加日期并分类的方法
2017/09/30 Python
Python基于OpenCV实现视频的人脸检测
2018/01/23 Python
对TensorFlow中的variables_to_restore函数详解
2018/07/30 Python
对python 调用类属性的方法详解
2019/07/02 Python
python实现飞机大战小游戏
2019/11/08 Python
Python利用逻辑回归模型解决MNIST手写数字识别问题详解
2020/01/14 Python
多个python文件调用logging模块报错误
2020/02/12 Python
Python-for循环的内部机制
2020/06/12 Python
澳大利亚最大的女装零售商:Millers
2017/09/10 全球购物
Farah官方网站:男士服装及配件
2019/11/01 全球购物
英国领先的鞋类零售商和顶级品牌的官方零售商:Wynsors
2020/02/17 全球购物
法国购买二手电子产品网站:Asgoodasnew
2020/03/27 全球购物
用C或者C++语言实现SOCKET通信
2015/02/24 面试题
优秀毕业生事迹材料
2014/02/12 职场文书
温馨提示标语
2014/06/26 职场文书
舞蹈教育学专业求职信
2014/06/29 职场文书
初中优秀教师事迹材料
2014/08/18 职场文书
2015年语言文字工作总结
2015/07/23 职场文书
追悼会答谢词范文
2015/09/29 职场文书
MongoDB数据库常用的10条操作命令
2021/06/18 MongoDB
「偶像大师 MILLION LIVE!」七尾百合子手办开订
2022/03/21 日漫
台式电脑蓝牙适配器怎么安装?台式电脑蓝牙适配器安装教程
2022/04/08 数码科技