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


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 相关文章推荐
一个刚完成的layout(拖动流畅,不受iframe影响)
Aug 17 Javascript
对字符串进行HTML编码和解码的JavaScript函数
Feb 01 Javascript
javascript 三种编解码方式
Feb 01 Javascript
基于jquery的横向滚动条(滑动条)
Feb 24 Javascript
jQuery源码分析-03构造jQuery对象-工具函数
Nov 14 Javascript
wap浏览自动跳转到wap页面的js代码
May 17 Javascript
jquery中each方法示例和常用选择器
Jul 08 Javascript
使用Bootstrap框架制作查询页面的界面实例代码
May 27 Javascript
javascript设计模式Constructor(构造器)模式
Aug 19 Javascript
jquery实现一个全局计时器(商城可用)
Jun 30 jQuery
详解升级react-router 4 踩坑指南
Aug 14 Javascript
Echarts地图添加引导线效果(labelLine)
Sep 30 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的类树(支持无限分类)
2006/10/09 PHP
巧用php中的array_filter()函数去掉多维空值的代码分享
2012/09/07 PHP
php中使用exec,system等函数调用系统命令的方法(不建议使用,可导致安全问题)
2012/09/07 PHP
PHP三元运算的2种写法代码实例
2014/05/12 PHP
php使用cookie保存用户登录的用户名实例
2015/01/26 PHP
各种效果的jquery ui(接口)介绍
2008/09/17 Javascript
自己的js工具 Cookie 封装
2009/08/21 Javascript
关于JavaScript定义类和对象的几种方式
2010/11/09 Javascript
jQuery EasyUI API 中文文档 - Panel面板
2011/09/30 Javascript
js格式化货币数据实现代码
2013/09/04 Javascript
使用时间戳解决ie缓存的问题
2014/08/20 Javascript
一个JavaScript获取元素当前高度的实例
2014/10/29 Javascript
JavaScript数据推送Comet技术详解
2016/04/07 Javascript
实例讲解JavaScript的Backbone.js框架中的View视图
2016/05/05 Javascript
微信小程序 简单DEMO布局,逻辑,样式的练习
2016/11/30 Javascript
简单三步实现报表页面集成天气
2016/12/15 Javascript
js实现手机发送验证码功能
2017/03/13 Javascript
Windows安装Node.js报错:2503、2502的解决方法
2017/10/25 Javascript
利用vue+elementUI实现部分引入组件的方法详解
2017/11/22 Javascript
微信小程序实现分享到朋友圈功能
2018/07/19 Javascript
小程序实现人脸识别功能(百度ai)
2018/12/23 Javascript
基于javascript实现碰撞检测
2020/03/12 Javascript
vue-cli或vue项目利用HBuilder打包成移动端app操作
2020/07/29 Javascript
以911新闻为例演示Python实现数据可视化的教程
2015/04/23 Python
python的Crypto模块实现AES加密实例代码
2018/01/22 Python
Python中的xlrd模块使用原理解析
2020/05/21 Python
Canvas环形饼图与手势控制的实现代码
2019/11/08 HTML / CSS
Chain Reaction Cycles芬兰:世界上最大的在线自行车商店
2017/12/06 全球购物
英国时尚运动品牌的合集:The Sports Edit
2017/12/20 全球购物
卡西欧B级产品官方网站:Casio Outlet
2018/05/22 全球购物
电工技术比武方案
2014/05/11 职场文书
学校门卫岗位职责范本
2014/06/30 职场文书
大学生国庆节65周年演讲稿范文
2014/09/25 职场文书
世界遗产的导游词
2015/02/13 职场文书
2015年新教师工作总结
2015/04/28 职场文书
详解Redis瘦身指南
2021/05/26 Redis