- 浏览: 486959 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
caipeiming:
可以使用array的indexOf方法,参考JavaScrip ...
js-判断元素是否存在于array数组中 -
zhangyaochun:
这个不错,新属性哦~
html5新特性-- <a>标签新属性download -
housheng33:
空间和时间星型-雪花-ER一范式-二范式-三范式
浅谈多维模型 -
housheng33:
对不起,我已经24岁了。我已经没有能力和你谈那一场天真而不计得 ...
对不起,我已经24岁了。我已经没有能力和你谈那一场天真而不计得失的恋爱了。 -
zhangyaochun:
这篇整理的不错
js-清空array数组
(一)mlens图片放大镜
尊重原创:http://www.jq22.com/jquery-info25
1、引入以下的js和css文件
2.在head标签中引入以下js代码
<script type="text/javascript">
3.在body标签中加入以下格式的html代码
(二)淘宝类似图片放大镜
尊重原创:http://www.17sucai.com/pins/demoshow/358
1、引入以下的js和css文件
2、在body标签中加入以下格式的html代码
下载源码:http://pan.baidu.com/s/1mgn82jm
尊重原创:http://www.jq22.com/jquery-info25
1、引入以下的js和css文件
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script> <script type="text/javascript" src="js/jquery.mlens-1.0.min.js"></script> <style type="text/css"> #green_wrapper { position: relative; width: 640px; height: auto; margin: 0 auto; border: 12px solid #fff; border-radius: 10px; box-shadow: 1px 1px 5px rgba(50,50,50 0.5); float: left; } </style>
2.在head标签中引入以下js代码
<script type="text/javascript">
$(document).ready(function() { $("#green_monster").mlens( { imgSrc: $("#green_monster").attr("data-big"),// path of the hi-res version of the image lensShape: "circle", // shape of the lens (circle or square) lensSize: 180, // size of the lens (in px) borderSize: 4, // size of the lens border (in px) borderColor: "#fff", // color of the lens border (#hex) borderRadius: 0 // border radius (optional, only if the shape is square) }); }); </script>
3.在body标签中加入以下格式的html代码
<img id="green_monster" src="images/GreenMonster_640px.jpg" alt="green monster graffiti by Kotzian" data-big="images/GreenMonster_1280px.jpg">
(二)淘宝类似图片放大镜
尊重原创:http://www.17sucai.com/pins/demoshow/358
1、引入以下的js和css文件
<script type="text/javascript" src="jquery-1.8.2.min.js"></script> <script type="text/javascript" src="cloud-zoom.1.0.2.min.js"></script> <style type="text/css"> *{margin:0px;padding:0;list-style-type:none;} body{background:#E9F0F5;font-family:Arial, Helvetica, sans-serif;font-size:13px;margin:0px;padding:0px;} html{background-color:#E9F0F5;} img{border:none;} h3{font-family:Tahoma, Geneva, sans-serif;font-size:14px;color:#333;letter-spacing:1px;margin-top:10px;margin-bottom:10px;} p{margin-bottom:10px;margin-top:10px;line-height:22px;} .demo{margin:0 auto;width:600px;} .tickul li{line-height:24px;} /* zoom-section */ .zoom-section{clear:both;margin-top:20px;} *html .zoom-section{display:inline;clear:both;} .zoom-desc{float:left;margin-left:10px;width:310px;margin-bottom:20px;} .zoom-small-image{border:4px solid #CCC;float:left;margin-bottom:20px;} .zoom-tiny-image{border:1px solid #CCC;margin:0px;} .zoom-tiny-image:hover{border:1px solid #C00;} </style>
2、在body标签中加入以下格式的html代码
<div class="zoom-section"> <div class="zoom-small-image"> <a href='images/zoomengine/bigimage00.jpg' class = 'cloud-zoom' id='zoom1' rel="adjustX:10, adjustY:-4"><img src="images/zoomengine/smallimage.jpg" alt='' title="Optional title display" /></a></div> <div class="zoom-desc"> <h3>标准设置与画廊</h3> <p><a href='images/zoomengine/bigimage00.jpg' class='cloud-zoom-gallery' title='Red' rel="useZoom: 'zoom1', smallImage: 'images/zoomengine/smallimage.jpg' "><img class="zoom-tiny-image" src="images/zoomengine/tinyimage.jpg" alt = "Thumbnail 1"/></a> <a href='images/zoomengine/bigimage01.jpg' class='cloud-zoom-gallery' title='Blue' rel="useZoom: 'zoom1', smallImage: ' images/zoomengine/smallimage-1.jpg'"><img class="zoom-tiny-image" src="images/zoomengine/tinyimage-1.jpg" alt = "Thumbnail 2"/></a> <a href='images/zoomengine/bigimage02.jpg' class='cloud-zoom-gallery' title='Blue' rel="useZoom: 'zoom1', smallImage: 'images/zoomengine/smallimage-2.jpg' "><img class="zoom-tiny-image" src="images/zoomengine/tinyimage-2.jpg" alt = "Thumbnail 3"/></a></p> <p>悬停在大型图像变焦工作。</p> <p>这是设置“框出”大的形象出现的小图像的效果。</p> <p>可以改变较小的图像,镜头和缩放窗口的外观与普通的CSS。</p> </div> </div>
下载源码:http://pan.baidu.com/s/1mgn82jm
发表评论
-
jquery插件之--TableDnD plugin
2015-05-07 18:41 0http://www.jqueryscript.net/dem ... -
jquery插件之--autocomplete
2015-05-07 18:40 603jQuery.Autocomplete 能够很好的实现输入框的 ... -
jquery选择器匹配方式
2015-04-07 19:49 590一直了解jQuery的优势之一是支持强大的 ... -
清空dom源码解析
2015-04-04 17:06 549jquery中empty()是采用逐个移除子元素实现的 zep ... -
Jquery方法-is()检测匹配元素集合
2015-04-01 16:08 675.is( selector ) 判断当前匹配的元素 ... -
类数组转换为数组makeArray()
2015-04-01 11:01 1162面试的时候遇到这个问题,在jquery中如何实现的将 ... -
jQuery.data()和html5 dataset
2015-03-26 16:33 1184我们先来看下HTML 5 增加的一项新功能是自定义数据 ... -
利用unique()去重和merge()合并数组
2015-03-24 14:28 4348$.unique() jQuery.unique(array ... -
jQuery.ajax 执行异步请求
2015-03-23 15:34 997jQuery.ajax( url [, settings ] ... -
jQuery插件开发入门
2015-03-19 16:09 806是什么? 所谓“插件”,就是用户自己新增的jQuery ... -
Jquery.extend()
2015-03-19 15:12 622var object = $.extend({}, objec ... -
jQuery插件之-右下角弹出提示窗体popMessage
2015-03-20 10:57 1394优点:右下角弹出同时 ... -
jquery匹配元素替换目标元素
2015-03-04 10:47 614DOM树结构如下: <div class="c ... -
jquery-元素属性操作
2015-03-03 17:33 578attr(attributeName) 或者attr(attr ... -
jquery-one()
2015-02-13 16:06 712one() 为被选元素附加一个或多个事件处理程序,并规定当事件 ... -
jquery-map()遍历
2015-02-12 15:52 5661map() 把每个元素通过函数传递到当前匹配集合中,生成包含返 ... -
parseJSON()方法
2015-02-10 16:14 682jQuery.parseJSON(json) 将要解析的 J ... -
jquery-ajax get()和post()
2015-02-06 16:21 814get( url [,data][,success(data, ... -
jquery-ajaxStart()和ajaxStop()
2015-02-06 11:41 733ajaxStart()和ajaxStop()方法是绑定Ajax ... -
jquery ajax $.param()方法序列化字符串
2015-02-05 16:45 965jQuery.param( obj )将表单元素的值转换为序列 ...
相关推荐
jquery插件库-jquery放大镜效果.zip
jQuery插件 - 图片放大镜,支持IE6
jquery插件库-zoomy图片放大镜.zip
优化过的基于jquery 的 图片放大镜插件jquery-photo-gallery
类似淘宝店图片放大镜的例子,通过jquery编写,值得学习。
jquery.ez-plus.js是一款jQuery图片放大镜插件。该jQuery图片放大镜插件支持图片内部放大,外部放大,支持轮播图片,可以和ColorBox或Fancy Box 结合使用。
代码简介:jQuery支持局部缩放图片放大镜插件是一款提供2种图片缩放模式,图片内部缩放和图片外部缩放,并且可以在图片上使用鼠标滚轮来对图片进行局部缩放。
bzoom是一款非常实用的jQuery产品图片放大镜插件。该放大镜插件类似于淘宝等商城网站的产品页图片放大镜。可以实现淡入淡出显示图片及图片自动轮播等功能。
jquery插件实现图片放大镜
jquery jqzoom插件制作图片放大镜图片窗口放大显示 jquery jqzoom插件制作图片放大镜图片窗口放大显示
非常好用的图片放大预览插件 jquery图片放大镜特效插件图片放大预览插件 jquery图片放大镜特效插件,解压密码:www.mobanji.com
jquery图片放大镜插件制作多种图片放大镜效果.rar
jQuery图片放大镜插件鼠标悬停图片放大镜头显示代码
Jquery插件 Jquery放大镜效果 Jquery插件之图片放大镜效果 http://blog.csdn.net/a7353101/article/details/7732744
jQuery CSS3图片放大镜插件是一款jQuery基于css3属性制作鼠标悬停图片放大镜预览查看效果代码。
jquery图片放大镜插件是一款简单实用的jQuery图片放大镜效果,点击缩略图可以切换大图,鼠标划过大图出现放大镜图片,可拖动放大镜区域查看图片细节,类似淘宝放大镜代码,适用于电子商务网站使用。
滚动图片,类似天猫淘宝的商品图片详情,鼠标滑过会显示放大的效果,用法简单,可以直接复制使用,二次开发也有参考价值
jqzoom-maste(基于jquery的图片放大镜插件 -- 6种不同的放大方式 -- 适用于目前主流的购物网站的图片放大特效)