实现效果：当鼠标指向商品图片时，图片会自动放大。

　　　　　　

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="UTF-8">

 <title>文字放大</title>

 <script type="text/javascript" src="../../scripts/jquery-1.7.2.js"></script>

 <style type="text/css">

     body{

     margin:0;

     padding:40px;

     background:#fff;

     font:80% Arial, Helvetica, sans-serif;

     color:#555;

     line-height:180%;

 }

 img{border:none;}

 ul,li{

     margin:0;

     padding:0;

 }

 li{

     list-style:none;

     float:left;

     display:inline;

     margin-right:10px;

     border:1px solid #AAAAAA;

 }

 /* tooltip */

 #tooltip{

     position:absolute;

     border:1px solid #ccc;

     background:#333;

     padding:2px;

     display:none;

     color:#fff;

 }

 </style>

 <script type="text/javascript">

     $(document).ready(function(){

         var x =10;

         var y =20;

         $("a.tooltip").mouseover(function(e){

               this.myTitle = this.title;

               this.title="";

               var imgTitle=this.myTitle?"<br/>"+this.myTitle:"";

             var tooltip = "<div id='tooltip'><img src=' "+this.href+"' alt='产品预览图'/>"+imgTitle+"</div>";

             $("body").append(tooltip);

             $("#tooltip").css({

                             "top":(e.pageY+y)+"px",

                             "left":(e.pageX+x)+"px"

                             })

                         .show("fast");

         }).mouseout(function(){

             this.title=this.myTitle;

             $("#tooltip").remove();

         }).mousemove(function(e){

             $("#tooltip")

                 .css({

                     "top": (e.pageY+y) + "px",

                     "left": (e.pageX+x)  + "px"

                 });

         });

     });

 </script>

 </head>

 <body>

     <h2>图片放大</h2>

     <ul>

         <li>

             <p><a href="images/apple_1_bigger.jpg" class="tooltip" title="苹果iPod"><img src="data:images/apple_1.jpg" alt="苹果iPod"></a></p>

         </li>

         <li>

             <p><a href="images/apple_2_bigger.jpg" class="tooltip" title="苹果iPod nano"><img src="data:images/apple_2.jpg" alt="苹果iPod nano"></a></p>

         </li>

         <li>

             <p><a href="images/apple_3_bigger.jpg" class="tooltip" title="苹果iPhone"><img src="data:images/apple_3.jpg" alt="苹果iPhone"></a></p>

         </li>

         <li>

             <p><a href="images/apple_4_bigger.jpg" class="tooltip" title="苹果 Mac"><img src="data:images/apple_4.jpg" alt="苹果 Mac"></a></p>

         </li>

     </ul>

 </body>

 </html>

jQuery实现网站图片放大效果的更多相关文章

  1. magento中如何实现产品图片放大效果

    Magento列表页用jQuery实现产品图片放大效果今天看到个网站,鼠标移到列表页的产品图片上,旁边会弹出一个大图,感觉不错,就自己在Magento里写了个.先看看效果 这个效果比较好实现,打开li ...

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

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

  3. 为BlueLake主题增加图片放大效果

    fancyBox 是一个流行的媒体展示增强组件,可以方便为网站添加图片放大.相册浏览.视频弹出层播放等效果.优点有使用简单,支持高度自定义,兼顾触屏.响应式移动端特性,总之使用体验相当好. 现在,我们 ...

  4. js图片放大效果

    实现购物网站里的图片放大效果,jqzoom很好用.今天才接触它,很快就上手了.看了一个示例,在放大图像上方貌似有水印,后经排查,原来是图片的标题,然后设置title为false,搞定.

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

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

  6. ASP.NET中使用jQuery插件实现图片幻灯效果

    参照网上的资料及提供的jQuery插件实现图片幻灯效果. 1.页面前台代码: //头部引用 <head runat="server"><title>< ...

  7. 一款基于jquery的手风琴图片展示效果

    今天要给大家分享一款基于jquery的手风琴图片展示效果.这款图片的展示效果鼠标经过前是灰色的,当鼠标经过时图片变大且变为彩色.效果图如下: 在线预览   源码下载 实现的代码. html代码: &l ...

  8. jQuery仿迅雷图片轮换效果

    jQuery仿迅雷图片轮换效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...

  9. jQuery点击图片放大拖动查看效果

    效果如图: 放大前: 放大后(可拖动图片浏览): 源码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head& ...

随机推荐

  1. 在双系统( Win7 + Ubuntu )环境下正常删除Ubuntu

    前言 首先切记一点:如果你和我一样使用ubuntu的目的是学习操作系统和Unix网络编程等,那么学习环境搭建好了以后切不要随意更新软件.否则系统崩溃,你又得重新配置各种环境,有多麻烦你懂的. 万一你像 ...

  2. 工作中遇到的问题--缓存配置（使用@Configuration装配 @Bean的方式注入）

    @EnableCaching@Configurationpublic class MFGCachingConfiguration { @Autowired private MFGSettings mf ...

  3. 使用密钥验证方式登录linux系统

    1.使用PuTTY工具PuTTYgen生成密钥对,打开PuTTYgen,点击Generate生成公钥(生成过程动动鼠标会提升进度哦). 2.将公钥(蓝色的是私钥)放到服务器上去: -在/root目录下 ...

  4. Codeforces Round #111 (Div. 2)

    Codeforces Round #111 (Div. 2) C. Find Pair 题意 给\(N(N \le 10^5)\)个数,在所有\(N^2\)对数中求第\(K(K \le N^2)\)对 ...

  5. HDU 1061 Rightmost Digit --- 快速幂取模

    HDU 1061 题目大意:给定数字n(1<=n<=1,000,000,000),求n^n%10的结果 解题思路:首先n可以很大,直接累积n^n再求模肯定是不可取的, 因为会超出数据范围, ...

  6. Vue.js相关知识1

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  7. [BZOJ 3622]已经没有什么好害怕的了

    世萌萌王都拿到了,已经没有什么好害怕的了——    (作死) 笑看哪里都有学姐,真是不知说什么好喵~ 话说此题是不是输 0 能骗不少分啊,不然若学姐赢了,那么有头的学姐还能叫学姐吗?  (作大死) 这 ...

  8. 如何在python3.3用 map filter reduce

    在3.3里,如果直接使用map(), filter(), reduce(), 会出现 >>> def f(x): return x % 2 != 0 and x % 3 != 0  ...

  9. GitHub windows客户端拉代码和提交代码

    1,拉别人的代码, 比如https://github.com/greenrobot/EventBus 这个库,先用浏览器访问,然后git账号登陆,点击fock到自己的库里 点击Fork 然后打开Git ...

  10. 科普：浅谈 Hellinger Distance

    浅谈 Hellinger Distance 2016.05.24 最近在看 Hellinger Distance(海林格距离), 平时看多了欧式距离,马氏距离等等,貌似介绍这个的材料不是很多,例如:维 ...