今日头条 焦点资讯 营销之道 企业报道 淘宝运营 网站建设 软件开发 400电话
  当前位置: 首页 » 资讯 » 网站建设 » 正文

帮助你生成放大镜效果的jQuery插件 - Melens

放大字体  缩小字体 发布日期:2018-02-18  来源:新格网  作者:新格网  浏览次数:182  【去百度看看】
核心提示:大家肯定在以前gbin1发布的文章中看到过帮助你生成图片“放大镜”效果的插件,今天这里我们再介绍一款jQuery插件 - Melens。如果大家需要让有兴趣的用户查看更清晰的图片,放大镜效果往往是不错的选择。

帮助你生成放大镜效果的jQuery插件 - Melens

在线演示  本地下载

大家肯定在以前gbin1发布的文章中看到过帮助你生成图片“放大镜”效果的插件,今天这里我们再介绍一款jQuery插件 - Melens。如果大家需要让有兴趣的用户查看更清晰的图片,放大镜效果往往是不错的选择。

主要特性

•支持同一页面多个实例

•支持放大镜的边框类型(圆形或者矩形)

•支持修改边框颜色

•支持修改边框大小(矩形可支持圆角)

如何使用

倒入类库代码:

<script type=“text/javascript” src="http://www.qiye800.com/skin/default/image/lazy.gif" class="lazy" original="http://www.qiye800.com/skin/default/image/nopic.gif">

<script type=“text/javascript” src="http://www.qiye800.com/skin/default/image/lazy.gif" class="lazy" original="http://www.qiye800.com/skin/default/image/nopic.gif">

生成放大镜效果代码:

$(“#green_monster”).mlens( {

imgSrc: $(“#green_monster”).attr(“data-big”),

lensShape: “circle”,

lensSize: 180,

borderSize: 4,

borderColor: “#fff”

});

HTML代码:

<div id=“green_wrapper”>

<img id=“green_monster” src="http://www.qiye800.com/skin/default/image/lazy.gif" class="lazy" original="http://www.qiye800.com/skin/default/image/nopic.gif" alt=“green monster graffiti by Kotzian” data-big=“images/GreenMonster_1280px.jpg” />

div>

以上代码中,当用户将鼠标移动到图片后,会加载data-big定义的大图片,生成放大镜效果。

是不是非常不错,希望大家喜欢这个插件!

来源:帮助你生成放大镜效果的jQuery插件 - Melens

 
 
[ 资讯搜索 ]  [ 加入收藏 ]  [ 告诉好友 ]  [ 打印本文 ]  [ 违规举报 ]  [ 关闭窗口 ]

 
0条 [查看全部]  相关评论

 
网站首页 | 关于我们 | 联系方式 | 使用协议 | 版权隐私 | 网站地图 | 排名推广 | 广告服务 | 积分换礼 | 网站留言 | RSS订阅 | 吉ICP备11001726号-6
企业800网 · 提供技术支持