当鼠标移动到图片上时跟随鼠标显示放大的图片效果


Posted in Javascript onJune 06, 2013

原始状态:
当鼠标移动到图片上时跟随鼠标显示放大的图片效果 
鼠标经过:
当鼠标移动到图片上时跟随鼠标显示放大的图片效果 

<!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> 
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> 
<script language="javascript"> 
$(function(){ 
var offsetX=20-$("#imgtest").offset().left; 
var offsetY=20-$("#imgtest").offset().top; 
var size=1.2*$('#imgtest ul li img').width(); 
$("#imgtest ul li").mouseover(function(event) { 
var $target=$(event.target); 
if($target.is('img')) 
{ 
$("<img id='tip' src='"+$target.attr("src")+"'>").css({ 
"height":size, 
"width":size, 
"top":event.pageX+offsetX, 
"left":event.pageY+offsetY, 
}).appendTo($("#imgtest")); 
} 
}).mouseout(function() { 
$("#tip").remove(); 
}).mousemove(function(event) { 
$("#tip").css( 
{ 
"left":event.pageX+offsetX, 
"top":event.pageY+offsetY 
}); 
}); 
}) 
</script> 
<style type="text/css"> 
img{ height:262px; width:400px; position:absolute; border:5px solid #FFF;} 
#imgtest{ height:auto;width:840px; margin:0 auto; position:absolute; } 
#imgtest ul{ position:relative;width:840px; height:auto; background:#00F;} 
#imgtest ul li{ position:relative; height:276px; width:410px; list-style:none; float:left; margin:3px; border:1px solid #999;} 
</style> 
</head> 
<body> 
<div id="imgtest"> 
<ul> 
<li><img src="img/photo1.jpg" /></li> 
<li><img src="img/photo2.jpg" /></li> 
<li><img src="img/photo3.jpg" /></li> 
<li><img src="img/photo4.jpg" /></li> 
</ul> 
</div> 
</body> 
</html>
Javascript 相关文章推荐
JS打开图片另存为对话框实现代码
Dec 26 Javascript
PHP abstract与interface之间的区别
Nov 11 Javascript
基于豆瓣API+Angular开发的web App
Jan 02 Javascript
JSON格式的时间/Date(2367828670431)/格式转为正常的年-月-日 格式的代码
Jul 27 Javascript
AngularJS打开页面隐藏显示表达式用法示例
Dec 25 Javascript
JSON与JS对象的区别与对比
Mar 01 Javascript
vue单页应用加百度统计代码(亲测有效)
Jan 31 Javascript
关于vue中的ajax请求和axios包问题
Apr 19 Javascript
新手入门带你学习JavaScript引擎运行原理
Jun 24 Javascript
JS实现简单日历特效
Jan 03 Javascript
Node登录权限验证token验证实现的方法示例
May 25 Javascript
vue深度监听(监听对象和数组的改变)与立即执行监听实例
Sep 04 Javascript
原生js实现半透明遮罩层效果具体代码
Jun 06 #Javascript
jquery js 获取时间差、时间格式具体代码
Jun 05 #Javascript
JavaScript设置IFrame高度自适应(兼容各主流浏览器)
Jun 05 #Javascript
JavaScript的漂亮的代码片段
Jun 05 #Javascript
Javascript中的for in循环和hasOwnProperty结合使用
Jun 05 #Javascript
理解JAVASCRIPT中hasOwnProperty()的作用
Jun 05 #Javascript
jquery 面包屑导航 具体实现
Jun 05 #Javascript
You might like
PHP 向右侧拉菜单实现代码,测试使用中
2009/11/03 PHP
php之curl设置超时实例
2014/11/03 PHP
CI框架中site_url()和base_url()的区别
2015/01/07 PHP
详解如何在云服务器上部署Laravel
2017/06/30 PHP
php实现支持中文的文件下载功能示例
2017/08/30 PHP
基于jQuery实现表单提交验证
2014/11/24 Javascript
简单谈谈JavaScript的同步与异步
2015/12/31 Javascript
jQuery判断浏览器并动态调整select宽度的方法
2016/03/02 Javascript
js简单实现图片延迟加载的方法
2016/07/19 Javascript
jQuery+CSS3实现四种应用广泛的导航条制作实例详解
2016/09/17 Javascript
详解如何将angular-ui的图片轮播组件封装成一个指令
2017/05/09 Javascript
Angularjs 与 bower安装和使用详解
2017/05/11 Javascript
JS检测是否可以访问公网服务器功能代码
2017/06/19 Javascript
React事件处理的机制及原理
2018/12/03 Javascript
利用Python的装饰器解决Bottle框架中用户验证问题
2015/04/24 Python
python使用wxpython开发简单记事本的方法
2015/05/20 Python
详解python的几种标准输出重定向方式
2016/08/15 Python
使用python 爬虫抓站的一些技巧总结
2018/01/10 Python
python 实现倒排索引的方法
2018/12/25 Python
django搭建项目配置环境和创建表过程详解
2019/07/22 Python
Contém1g官网:巴西彩妆品牌
2020/01/17 全球购物
下列程序在32位linux或unix中的结果是什么
2014/03/25 面试题
药物学专业学生的自我评价
2013/10/27 职场文书
机关工会开展学习雷锋活动总结
2014/03/01 职场文书
领导班子四风问题个人对照检查材料
2014/10/04 职场文书
单位推荐信范文
2015/03/27 职场文书
2015初一年级组工作总结
2015/07/24 职场文书
部门主管竞聘书
2015/09/15 职场文书
《角的度量》教学反思
2016/02/18 职场文书
爱岗敬业事迹材料
2019/06/20 职场文书
redis连接被拒绝的解决方案
2021/04/12 Redis
浅谈Python 中的复数问题
2021/05/19 Python
springcloud之Feign超时问题的解决
2021/06/24 Java/Android
redis不能访问本机真实ip地址的解决方案
2021/07/07 Redis
如何解决php-fpm启动不了问题
2021/11/17 PHP
MyBatis核心源码深度剖析SQL语句执行过程
2022/05/20 Java/Android