<!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();

 alert(size);

 $("#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 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>
function()之前得先加载完图片，不然没效果，用setInterval(函数名,500)方法调用function内的方法可实现，坐标参数可自调。

js 鼠标上移 图片放大的更多相关文章

  1. jQuery鼠标悬停图片放大显示

    jQuery鼠标悬浮放于图片上之后图片放大显示的效果,即鼠标移到图片上图片突出显示,鼠标移开后恢复原来的模样,你可以在图片滚动效果中加上本特效,相信会更炫一些. <!DOCTYPE html P ...

  2. 浅谈CSS和JQuery实现鼠标悬浮图片放大效果

    对于刚刚学习网页前台设计的同学一定对图片的处理非常苦恼,那么这里简单的讲解一下几个图片处理的实例. 以.net为平台,微软的Visual Studio 2013为开发工具,当然前台技术还是采用CSS3 ...

  3. 常用css样式（文字超出部分用省略号显示、鼠标经过图片放大、出现阴影）

    文字超出部分用省略号显示: white-space: nowrap; /* 不换行 */ overflow: hidden; /* 超出部分不显示 */ text-overflow: ellipsis ...

  4. 鼠标滚轮图片放大缩小功能，使用layer弹框后不起作用

    今天在项目中遇到的一个问题:点击按钮使用layer弹框弹出一张图片,需要加一个鼠标滚轮放大缩小,图片也跟着放大缩小的功能.于是在网上找了一个demo. DEMO: <!DOCTYPE html ...

  5. jquery图片放大插件鼠标悬停图片放大效果

    都知道jquery都插件是非常强大的,最近分享点jquery插件效果,方便效果开发使用. 一.HTML代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...

  6. (JS+CSS)实现图片放大效果

    代码很简单,在这里就不过多阐述,先上示例图: 实现过程: html部分代码很简单 <div id="outer"> <p>点击图片</p> &l ...

  7. 基于js鼠标拖动图片排序

    分享一款基于js的图片排序效果.鼠标拖动图片,重新排列图片的排列顺序.该插件适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线 ...

  8. js 鼠标放到图片上放大某一部分效果

    动图效果: 代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  9. js鼠标滑动图片显示隐藏效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. Redis Master/Slave 实践

    本次我们将模拟 Master(1) + Slave(4) 的场景,并通过ASP.NET WEB API进行数据的提交及查询,监控 Redis Master/Slave 数据分发情况,只大致概述,不会按 ...

  2. C#简单windows服务

    因为做后台比较多,所以经常需要写一些后台服务.一般的流程是先创建一个服务项目,加入代码.然后打包一个安装程序或者直接用dos命令安装服务.下面是详细内容:    1. 创建windows服务项目.  ...

  3. C编译错误解决方法

    1.expected identifier before numeric constant 一般情况下是枚举类型中的某个变量已经被#define定义过一次了,在项目空间中搜索你枚举类型中的所有变量类型 ...

  4. DSP5509的时钟发生器(翻译总结自TI官方文档)

    一.C5509时钟发生器的两个功能 1.将从CLKIN引脚输入的时钟信号变换为适当频率的CPU时钟,提供给CPU.外设和其他模块使用: 2.将CPU时钟通过可编程分频器输出到CLKOUT引脚. 时钟发 ...

  5. Nginx使用webbench进行压力测试（转载）

    在运维工作中,压力测试是一项非常重要的工作.比如在一个网站上线之前,能承受多大访问量.在大访问量情况下性能怎样,这些数据指标好坏将会直接影响用户体验. 但是,在压力测试中存在一个共性,那就是压力测试的 ...

  6. UICollectionViewLayout

    http://blog.csdn.net/majiakun1/article/details/17204921

  7. Keil RTX systick 初始化

    在STM32F215上移植Keil的RTX操作系统,随便设置下就能好使,但是当我想知道systick到底是怎么设置的时候,就得翻翻代码了,原来在 rt_HAL_CM.h中以一个内联函数的形式定义的 _ ...

  8. PHP合并数组array_merge函数运算符加号与的区别

    两个的区别是:1.数组键名为数字键名时,要合并的两个数组中有同名数字KEY的时候,使用array_merge()不会覆盖掉原来的值,而使用“+”合并数组则会把最先出现的值作为最终结果返回,而把后面的数 ...

  9. POC

    大概就是原型验证的意思 验证概念 编辑 概念验证(Proof of concept,简称POC)是对某些想法的一个不完整的实现,以证明其可行性,示范其原理,其目的是为了验证一些概念或理论.在计算机安全 ...

  10. Javascript里的那些距离们

    1.有滚动条的控件的距离: scrollTop和scrollLeft:分别指有滚动条的容器控件的滚动条的top和left:页面滚动条的通用取法:document.body.scrollTop(FF\C ...