图片放大镜查看

要准备一张小图和一张清晰点的大图,然后在页面中引入JQUERY和这个插件的JS

<html>

<head>

<script src="/js/jquery-1.7.2.min.js"></script>

<script src="/js/jqzoom.pack.1.0.1.js"></script>

<link rel="stylesheet" type="text/css" href="/css/jqzoom.css"/>

</head>

<body>

<a href="/img/big.jpg" class="jqzoom" style="" title="kawasaki">

<img src="/img/small.jpg" border="0" style="border: 1px solid #666;"  title="kawasakigreen">

</a>

</body>

<script type="text/javascript">

$(function() {

var options3 =

{

zoomWidth: 300,

zoomHeight: 300,

xOffset: 20,

title: false,

lens:false

};

$(".jqzoom").jqzoom(options3);

});

</script>

</html>

jqzoom插件下载地址：

http://download.csdn.net/detail/lluohuih/8460393

时间： 2024-07-30 19:02:39

图片放大镜查看的相关文章

jquery图片放大镜效果制作变焦镜头图片放大查看

jquery图片放大镜效果制作变焦镜头图片放大查看 http://www.17sucai.com/pins/demoshow/8511

jQuery基础（常用插件 表单验证，图片放大镜，自定义对象级，jQuery UI，面板折叠）

1.表单验证插件--validate   该插件自带包含必填.数字.URL在内容的验证规则,即时显示异常信息,此外,还允许自定义验证规则,插件调用方法如下: $(form).validate({options}) 其中form参数表示表单元素名称,options参数表示调用方法时的配置对象,所有的验证规则和异常信息显示的位置都在该对象中进行设置.     2.表单插件--form 通过表单form插件,调用ajaxForm()方法,实现ajax方式向服务器提交表单数据,并通过方法中的option

15款商城网站常用的图片放大镜特效

jquery图片放大镜效果制作变焦镜头图片放大查看代码 jQuery图片放大镜插件鼠标悬停图片放大镜头显示代码 jQuery鼠标滑过图片放大镜效果_淘宝图片放大镜代码 jquery jqzoom仿京东商城商品详细页面图片放大镜_选项卡切换效果 原生js MagicZoom.js放大镜插件商城商品多图片放大镜效果展示 jquery.imagezoom图片放大镜插件仿淘宝店铺商品放大镜展示 jquery etalage图片放大镜插件鼠标移到小图片放大预览图片 jQuery图片放大窗口显示和图片组合缩

js图片放大镜

JS图片放大镜效果. 应用场景:各大电商网站. (附件) <!-- Author: XiaoWen Create a file: 2017-01-13 12:28:36 Last modified: 2017-01-13 17:16:46 Start to work: Finish the work: Other information: --> <!DOCTYPE html> <html lang="en"> <head> <me

jQuery补充，模拟图片放大镜

jQuery补充,模拟图片放大镜 html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/fdj.css"> </head> <body&g

Jquery插件——图片放大镜

偶然前端网发现了一个比较好的图片放大镜效果插件,稍作修改完善了一下,下面分享给大家. 效果还不错,如下图: <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>放大镜</title> <style type="text/css"> body { margin:200px; background:#000; } ol,

图片放大镜效果

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title>图片放大镜效果</title> 6 <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" media="all&

商品图片放大镜特效

商品图片放大镜特效 主要是基于鼠标捕获,计算放大镜移动距离原理而制成 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>放大镜</title> 6 <style> 7 * { 8 margin: 0; 9 padding: 0 10 } 11 12 #demo { 13 display: block; 14 wid

[js开源组件开发]图片放大镜

图片放大镜 一般情况下,手机由于屏幕太小,会有图片上看不清的问题,所以我就做了一个放大镜的js效果,支持pc和移动端.它的原理是利用的backgroundsize来实现的,所以你的浏览器首先要支持这个属性. 然后这个组件还是开源的git项目,你可以为它添加不支持backgroundsize时的解决方法.它的git地址是:图片放大镜github地址 https://github.com/tianxiangbing/image-zooming   ,它的在线演示地址是:js图片放大镜演示地址http