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


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 相关文章推荐
JavaScript性能优化 创建文档碎片(document.createDocumentFragment)
Jul 13 Javascript
Mac地址验证的javascript代码
Nov 09 Javascript
JS 仿腾讯发表微博的效果代码
Dec 25 Javascript
javascript中闭包(Closure)详解
Jan 06 Javascript
微信小程序 出现47001 data format error原因解决办法
Mar 10 Javascript
node.js程序作为服务并在windows下开机自启动(用forever)
Mar 29 Javascript
微信小程序自定义prompt组件步骤详解
Jun 12 Javascript
解决Vue中引入swiper,在数据渲染的时候,发生不滑动的问题
Sep 27 Javascript
vue-cli3跨域配置的简单方法
Sep 06 Javascript
vue实例的选项总结
Jun 09 Javascript
vue2.0实现列表数据增加和删除
Jun 17 Javascript
ajax请求前端跨域问题原因及解决方案
Oct 16 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
第五节--克隆
2006/11/16 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十三)
2014/06/26 PHP
详解WordPress中添加友情链接的方法
2016/05/21 PHP
微信推送功能实现方式图文详解
2019/07/12 PHP
jquery 多行滚动代码(附详细解释)
2010/06/17 Javascript
JS实现点击图片在当前页面放大并可关闭的漂亮效果
2013/10/18 Javascript
js 动态修改css文件用到了cssRule
2014/08/20 Javascript
AngularJS指令详解及示例代码
2016/08/16 Javascript
JS实现表单验证功能(验证手机号是否存在,验证码倒计时)
2016/10/11 Javascript
Vue.JS入门教程之处理表单
2016/12/01 Javascript
jquery pagination插件动态分页实例(Bootstrap分页)
2016/12/23 Javascript
jQuery实现按比例缩放图片的方法
2017/04/29 jQuery
NodeJs搭建本地服务器之使用手机访问的实例讲解
2018/05/12 NodeJs
vue实现的网易云音乐在线播放和下载功能案例
2019/02/18 Javascript
详解vue项目中调用百度地图API使用方法
2019/04/25 Javascript
详解Vue串联过滤器的使用场景
2020/04/30 Javascript
[36:14]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第二局
2016/02/28 DOTA
Eclipse和PyDev搭建完美Python开发环境教程(Windows篇)
2016/11/16 Python
在PyCharm环境中使用Jupyter Notebook的两种方法总结
2018/05/24 Python
深入浅析Python传值与传址
2018/07/10 Python
Django分页查询并返回jsons数据(中文乱码解决方法)
2018/08/02 Python
python实现图片筛选程序
2018/10/24 Python
Python3标准库总结
2019/02/19 Python
Django框架使用内置方法实现登录功能详解
2019/06/12 Python
css3 border-radius属性详解
2017/07/05 HTML / CSS
Bonami斯洛伐克:购买家具和家居饰品
2019/07/02 全球购物
毕业实习个人鉴定范文
2013/12/10 职场文书
最热门的自我评价
2013/12/30 职场文书
企业员工薪酬方案
2014/06/04 职场文书
党风廉正建设个人工作总结
2015/03/06 职场文书
小学公民道德宣传日活动总结
2015/03/23 职场文书
反腐倡廉主题教育活动总结
2015/05/07 职场文书
2015年幼儿教育工作总结
2015/07/24 职场文书
《比的意义》教学反思
2016/02/18 职场文书
vue实现滑动解锁功能
2022/03/03 Vue.js
PHP 时间处理类Carbon
2022/05/20 PHP