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


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 相关文章推荐
jquery 新手学习常见问题解决方法
Apr 18 Javascript
javascript实现div的显示和隐藏的小例子
Jun 25 Javascript
JS常见问题之为什么点击弹出的i总是最后一个
Jan 05 Javascript
Vue.js基础知识小结
Jan 13 Javascript
Extjs gridpanel 中的checkbox(复选框)根据某行的条件不能选中的解决方法
Feb 17 Javascript
jQuery实现文章图片弹出放大效果
Apr 06 jQuery
vue使用Axios做ajax请求详解
Jun 07 Javascript
浅谈Vue下使用百度地图的简易方法
Mar 23 Javascript
vue 使用自定义指令实现表单校验的方法
Aug 28 Javascript
vue-cli中使用高德地图的方法示例
Mar 28 Javascript
40行代码把Vue3的响应式集成进React做状态管理
May 20 Javascript
vue3不同环境下实现配置代理
May 25 Vue.js
原生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/12/28 PHP
Laravel 5框架学习之Eloquent (laravel 的ORM)
2015/04/08 PHP
PHP定义字符串的四种方式详解
2018/02/06 PHP
php json转换相关知识(小结)
2018/12/21 PHP
国外的为初学者写的JavaScript教程
2008/06/09 Javascript
javascript实现的网页局布刷新效果
2008/12/01 Javascript
JavaScript 代码压缩工具小结
2012/02/27 Javascript
Js判断参数(String,Array,Object)是否为undefined或者值为空
2013/11/04 Javascript
javascript删除option选项的多种方法总结
2013/11/22 Javascript
js中arguments的用法(实例讲解)
2013/11/30 Javascript
jquery禁止回车触发表单提交
2014/12/12 Javascript
js动态切换图片的方法
2015/01/20 Javascript
详解JavaScript的while循环的使用
2015/06/03 Javascript
jQuery插件EnPlaceholder实现输入框提示文字
2015/06/05 Javascript
jQuery手机拨号界面特效代码分享
2015/08/27 Javascript
jQuery 判断是否包含在数组中Array[]的方法
2016/08/03 Javascript
AngularJS中的Promise详细介绍及实例代码
2016/12/13 Javascript
react开发中如何使用require.ensure加载es6风格的组件
2017/05/09 Javascript
Bootstrap多级菜单的实现代码
2017/05/23 Javascript
vue bootstrap小例子一枚
2017/06/09 Javascript
JavaScript实现的浏览器下载文件的方法
2017/08/09 Javascript
Express进阶之log4js实用入门指南
2018/02/10 Javascript
Vue.js实现数据响应的方法
2018/08/13 Javascript
详解如何在Javascript中使用Object.freeze()
2020/10/18 Javascript
Python中super()函数简介及用法分享
2016/07/11 Python
Python之time模块的时间戳,时间字符串格式化与转换方法(13位时间戳)
2019/08/12 Python
微软新西兰官方网站:Microsoft New Zealand
2018/08/17 全球购物
Bluebella法国官网:英国性感内衣品牌
2019/05/03 全球购物
绿色家庭事迹材料
2014/05/01 职场文书
电子商务求职信
2014/06/15 职场文书
个人委托书范本
2014/09/13 职场文书
2014年最新离婚协议书范本
2014/10/11 职场文书
傲慢与偏见电影观后感
2015/06/10 职场文书
基于Golang 高并发问题的解决方案
2021/05/08 Golang
安装pytorch时报sslerror错误的解决方案
2021/05/17 Python
MySQL 8.0 之不可见列的基本操作
2021/05/20 MySQL