jquery插件实现鼠标经过图片右侧显示大图的效果(类似淘宝)

这个插件的名字elevatezoom,网址为http://www.elevateweb.co.uk/image-zoom,在github上的项目首页为https://github.com/elevateweb/elevatezoom,建议去github下载,这个网速比较快。

实现这个效果你需要准备两张图片,一张小的,一张大用于鼠标经过时候显示。然后我们只要为img标签添加data-zoom-image属性,其值为大图的地址,最后在javascript中选择该图片调用elevateZoom()就可以了。

下面给出一个例子(在github下载的代码中有这个例子):

复制代码代码如下:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=‘utf-8‘/> 
<title>jQuery elevateZoom Demo</title> 
<script src=‘jquery-1.8.3.min.js‘></script> 
<script src=‘jquery.elevateZoom-2.3.0.min.js‘></script> 
</head> 
<body> 
<h1>Basic Zoom Example</h1> 
<img id="zoom_01" src=‘images/small/image1.png‘ data-zoom-image="images/large/image1.jpg"/>

<br /> 
see more examples online <a href="http://www.elevateweb.co.uk/image-zoom/examples">http://www.elevateweb.co.uk/image-zoom/examples</a> 
<script> 
$(‘#zoom_01‘).elevateZoom(); 
</script> 
</body> 
</html>

实现的效果如下: 

具体代码没有研究,只是知道怎么使用了,特在此分享一下。

时间: 2024-10-06 20:30:29

jquery插件实现鼠标经过图片右侧显示大图的效果(类似淘宝)的相关文章

jQuery鼠标放在图片上显示大图和和图片信息

jQuery代码 <script type="text/javascript"> var date = { "images/003.png": ["images/003.png", "人物1", "185"], "images/004.png": ["images/004.png", "人物2", "165"], &

如何:使用PicturBox实现类似淘宝网站图片的局部放大功能

转载至http://xuzhihong1987.blog.163.com/blog/static/267315872011822113131823/ 概要: 本文将讲述如何使用PictureBox控件实现图片的局部放大浏览功能,效果类似淘宝网站的图片局部放大浏览,通过鼠标悬浮查看局部大图,同时扩展了鼠标滚轮放大缩小功能.本文将详细讲述实现该功能的主要思路,例子虽是在Winform的环境下实现(当时开发的系统用的是winform),但是代码实现思路在其他环境(如WPF)应该是通用的. 解决方案:

鼠标悬停图片上方显示图片文字

//代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>鼠标悬停图片上显示文字 在线演示 www.divcss5.com</title> <style> img{border:0}/* css 注释说明:设置图片边框为0 */ body{behavior:url("csshover.htc");text

CSS3鼠标悬停图片上浮显示描述代码

效果:http://hovertree.com/texiao/css3/20/ 效果图: 代码如下: <!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta

jQuery Mobile学习之grid、等待显示的ajax效果、页面跳转、页面跳转传递参数等(二)

Index.cshtml <!-- Start of second page --> <section data-role="page" id="bar"> <header data-role="header"> <h1>Bar</h1> </header> <!-- /header --> <div role="main" class=

JavaScript网站设计实践(五)编写photos.html页面,实现点击缩略图显示大图的效果

原文:JavaScript网站设计实践(五)编写photos.html页面,实现点击缩略图显示大图的效果 一.photos.html页面,点击每一张缩略图,就在占位符的位置那里,显示对应的大图. 看到的页面效果是这样的: 1.实现思路 这个功能在之前的JavaScript美术馆那里已经实现了. 首先在页面中使用ul列表显示出所有的缩略图,然后使用JavaScript,for循环检查出当前点击的是哪一张图片,最后把这张图片给显示出来. 用到三个函数:显示图片函数.创建占位符预装图片.点击显示图片

jQuery实现TEXT文本框输入时的提示信息(谷歌百度淘宝搜索框提示实现)

在搜索框中,输入之前框内有输入的提示信息,文本框获得焦点后会自动消失的效果,效果图如下: 鼠标放在文本框时的效果: 创建工具类(已经存在就不用创建了)Util.js(DWR的JS) 在里面添加如下方法: Js代码 /** * Input框里的灰色提示,使用前先引入jquery * <br>使用方法:<input type="text" tipMsg="您的用户名"   /> * * @return */ function inputTipTe

jQuery鼠标悬停图片放大显示

jQuery鼠标悬浮放于图片上之后图片放大显示的效果,即鼠标移到图片上图片突出显示,鼠标移开后恢复原来的模样,你可以在图片滚动效果中加上本特效,相信会更炫一些. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http:/

鼠标移入--图片遮罩显示

效果:当鼠标移入图片时,图片被一块半透明黑色块遮住,并显示色块上按钮或文本. 原理:1.将图片位置创建<div>,固定宽高,绝对定位,并添加溢出隐藏. 2.添加两个<div>,第一个<div>用来装图片 3.第二个<div>添加半透明黑色背景,相对定位,并设置宽高.  4.添加js动画控制. 效果图: 代码: 引入jquery. css: ul{list-style: none;} ul>li{width: 100px;height: 120px;te