1.  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  1.  <html xmlns="http://www.w3.org/1999/xhtml">
  2.  <head>
  3.  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4.  <title>无标题文档</title>
  5.  <script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
  6.  <script language="javascript">
  7.  $(function(){
  8.  var offsetX=20-$("#imgtest").offset().left;
  9.  var offsetY=20-$("#imgtest").offset().top;
  10.  var size=1.2*$('#imgtest ul li img').width();
  11.  alert(size);
  12.  $("#imgtest ul li").mouseover(function(event) { 
  14.  var $target=$(event.target);
  15.  if($target.is('img'))
  16.  {
  17.  $("<img id='tip' src='"+$target.attr("src")+"'>").css({
  18.  "height":size,
  19.  "width":size,
  20.  "top":event.pageX+offsetX,
  21.  "left":event.pageY+offsetY,
  22.  }).appendTo($("#imgtest"));
  23.  }
  24.  }).mouseout(function() {
  25.  $("#tip").remove();
  26.  }).mousemove(function(event) {
  27.  $("#tip").css(
  28.  {
  29.  "left":event.pageX+offsetX,
  30.  "top":event.pageY+offsetY
  31.  });
  32.  });
  33.  })
  34.  </script>
  35.  <style type="text/css">
  36.  img{ height:262px; width:400px; position:absolute; border:5px solid #FFF;}
  37.  #imgtest{ height:auto;width:840px; margin:0 auto; position:absolute; } 
  39.  #imgtest ul li{ position:relative; height:276px; width:410px; list-style:none; float:left; margin:3px; border:1px solid #999;}
  40.  </style>
  41.  </head>
  42.  <body>
  43.  <div id="imgtest">
  44.  <ul>
  45.  <li><img src="img/photo1.jpg" /></li>
  46.  <li><img src="img/photo2.jpg" /></li>
  47.  <li><img src="img/photo3.jpg" /></li>
  48.  <li><img src="img/photo4.jpg" /></li>
  49.  </ul>
  50.  </div>
  51.  </body>
  52.  </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. 老陈 WPF

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.W ...

  2. 读书笔记：<世界是数字的>

    世界是数字的?第一次听到这个名词不由的感到惊讶,我有听过地球是海洋的,那世界不应该是人类共同拥有的吗或者也可以说世界是大自然的?为什么世界偏偏是数字的呢?我带着满心的疑问去看了那本<世界是数字的 ...

  3. 【Python】代码调试（pdb与logging使用）

    一.pdb使用 pdb 是 python 自带的一个包,为 python 程序提供了一种交互的源代码调试功能,主要特性包括设置断点.单步调试.进入函数调试.查看当前代码.查看栈片段.动态改变变量的值等 ...

  4. Leetcode#61 Rotate List

    原题地址 我一直不太理解为什么叫rotate,翻译成"旋转"吧,似乎也不像啊.比如: 1->2->3->4->5->NULL 向右旋转2的距离,变成了 ...

  5. 浅谈c#枚举

    结构中的成员可以赋值,枚举呢....是取值,只读的 以下情况可以考虑将类创建为结构:(1)如果一个类其中的字段非常少,所有字段占用的内存总量不超过8.16字节:(2)如果一个类中的字段都是值类型: 关 ...

  6. 【JQuery NoviceToNinja系列】01 开篇 Html页面设计和布局

    01 开篇 Html页面设计和布局 index.html <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml ...

  7. 数据库表 copy

    db1为原数据库,db2为要导出到的数据库,fromtable 是要导出的表名 1.方法一:登录导出到的数据库,执行create table fromtable select * from db1.f ...

  8. Ogre1.8.1源码编译

    本文的编译环境为Windows7_SP1 + VS2010_SP1 + CMake2.8.11   :) 资源下载 1. 下载Ogre1.8.1的源代码,下载链接地址:http://www.ogre3 ...

  9. Linux下ps -ef和ps aux的区别及格式详解

    Linux下显示系统进程的命令ps,最常用的有ps -ef 和ps aux.这两个到底有什么区别呢?两者没太大差别,讨论这个问题,要追溯到Unix系统中的两种风格, System V风格和BSD 风格 ...

  10. linux系统中如何进入退出vim编辑器，方法及区别

    在linux家族中,vim编辑器是系统自带的文本编辑器,其功能强大自不必说了.偶有小白,刚接触linux,要修改某个文本文件,不可能像WINDOWS那样操作,更有甚者,进入VI编辑器后,无法退出以致强 ...