jQuery生成各种桌面和移动设备模型插件devicemock

所属分类:媒体,其他-图片展示,杂项

 20751  299  查看评论 (0)
分享到微信朋友圈
X
jQuery生成各种桌面和移动设备模型插件devicemock ie兼容9

devicemock

devicemock是一款可以生成各种桌面设备和移动设备模型的jQuery插件。你可以使用该插件来模拟各种显示设备,还可以设置它们的尺寸大小和颜色模式。

使用方法

使用该图片轮播插件需要引入jQuery和jquery.vitrine.js和jquery.devicemock.css文件。

<link rel="stylesheet" type="text/css" href="path/to/jquery.devicemock.css">              
<script src="jquery.min.js"></script>
<script src="jquery.devicemock.js"></script>

HTML结构

该设备模型插件的基本HTML结构如下:

<div class="selector">
   <!-- 内容可以是  (div , img , iframe ...) -->
</div>

初始化插件

在页面DOM元素加载完毕之后,可以通过下面的方法来初始化该插件。

$('.selector').deviceMock({
   type        : 'browser',   // browser , phone , tablet , desktop , laptop
   size        : '1x',        // null(1x) , 2x , 3x , 4x , 5x
   theme       : 'black' ,    // black , white (if phone or tablet)
   orientation : 'portrait' , // landscape , portrait (if phone or tablet)
   address     : 'http://example123.com' // show on URL BAR
});

你还可以设置模型图片(SVG文件)所在的文件夹路径和CSS前缀名称:

$('.selector').deviceMock({
   //????
   imgPath     : './jquery.devicemock/img/', // path of asset img dir
   cssPrefix   : 'df-'                       // css namespace
});

你还可以通过data-*属性来应用多个实例。

<!-- 浏览器 -->
<div style="width:300px;" data-devicemock-type="browser" data-devicemock-size="2x" data-devicemock-theme="" data-devicemock-orientation="" data-devicemock-address="http://jq22.com">
   <img src="path/to/img.jpg">
</div>
 
<!-- 平板 -->
<div data-devicemock-type="tablet" data-devicemock-size="4x" data-devicemock-theme="black" data-devicemock-orientation="landscape" data-devicemock-address="">
   <div>
      <!-- some inner contents (div , img , iframe ...) -->
   </div>
</div>                
$('[data-devicemock-type]').each(function(i){
   var that = this;
   var opt  = {};
   var object = [
               'type',
               'size',
               'theme',
               'orientation',
               'address'
            ];
   for (prop in object) {
      var data = $(that).data('dm-'+object[prop]);
      if (object.hasOwnProperty(prop)) {
         opt[object[prop]] = data;
      }
   }
   $(that).deviceMock(opt);
});

配置参数

参数默认值类型描述
typestringbrowser设备的类型,可以是:browser, phone, tablet, desktop 或 laptop
sizestring3x设备的大小,可选值有:1x, 2x, 3x, ? 9x
themestringblack设备的主题(只有phone或tablet可使用该参数),可选值有:black 或 white
orientationstringportrait只有phone或tablet可使用该参数。可选值有:landscape 或 portrait
addressstringnone只有browser可以使用该参数。地址栏显示的URL地址
imgPathstring./jquery.devicemock/img/模型图片的存放路径
cssPrefixstringdf-CSS前缀。如果修改需要参考scss文件->-> $prefix : '.df-';
相关插件-图片展示,杂项

jQuery支持图片放大缩小查看效果

e-smart-zoom-jquery.js插件页面上提供了两个按钮,可以让你的图片点击放大或者缩小当然,对于懒人来说,真是懒得点击那么你可以将鼠标悬停在图片上,滚动鼠标滚轮即可实现图片的放大或者缩小效果
  图片展示
 181888  563

纯js写的祝愿墙

这是一款纯js编写的祝愿墙,墙上的祝福标签的位置随机出现,每次刷新,出现的位置各不相同。
  图片展示
 29762  354

图片点击放大并居中显示

纯js实现的一个图片点击放大并居中显示的插件,支持自定义图片详情,可作为图片浏览插件,也可自行改写
  图片展示
 54076  356

移动端图片缩放插件Pinchzoom.js

此插件功能包括手机轮播,图片点击放大再次点击缩小功能
  图片展示
 101698  398

讨论这个项目(0)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复