<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery之点击弹出图标环形菜单</title>

<script type="text/javascript" src="http://files.cnblogs.com/files/caidupingblogs/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://files.cnblogs.com/files/caidupingblogs/mobilyblocks.js"></script>

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
a{color:#fff;}
body{font-family:Arial, Helvetica, sans-serif;background:#F1F1F1;}
/* comp */
div.comp{background:url(http://images.cnblogs.com/cnblogs_com/caidupingblogs/773011/t_jia.png) no-repeat center center;width:200px;height:200px;display:block;cursor:pointer;position:relative;margin:230px auto 0 auto;}
div.comp ul.reset li{position:absolute;}
</style>

<script type="text/javascript">
$(function(){
$('.comp').mobilyblocks({
trigger:'click',
direction:'counter',
duration:500,
zIndex:50,
widthMultiplier:1.1
});
});
</script>

</head>

<body>

<div class="comp" title="点我试试看">
<ul class="reset" style="display: block; z-index: 50; opacity:0;">
<li><a href="http://baidu.com/"><img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/773011/o_dui.png" alt="" /></a></li>
<li><a href="http://baidu.com/"><img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/773011/t_dui.png" alt="" /></a></li>
<li><a href="http://baidu.com/"><img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/773011/t_jian.png" alt="" /></a></li>
<li><a href="http://baidu.com/"><img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/773011/t_jian.png" alt="" /></a></li>
<li><a href="http://baidu.com/"><img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/773011/t_shang.png" alt="" /></a></li>
<li><a href="http://baidu.com/"><img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/773011/t_xia.png" alt="" /></a></li>
<li><a href="http://baidu.com/"><img src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/773011/t_you.png" alt="" /></a></li>
</ul>
</div>
</div>
</body>

jQuery之点击弹出图标环形菜单的更多相关文章

  1. 基于jQuery鼠标点击弹出登陆框效果

    基于jQuery鼠标点击弹出登陆框效果.这是一款扁平样式风格的jQuery弹出层登陆框特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <input type=" ...

  2. PopupWindow-----点击弹出 PopupWindow 初始化菜单

    /** * 点击弹出 PopupWindow 初始化菜单 */ private void initPopupWindow() { PopupWindowAdapter adapter = new Po ...

  3. html5手机端的点击弹出侧边滑动菜单代码

    效果预览:http://hovertree.com/texiao/html5/19/ 本效果适用于移动设备,可以使用手机等浏览效果. 源码下载:http://hovertree.com/h/bjaf/ ...

  4. jQuery手机端点击弹出分享按钮代码

    一.HTML代码如下: <span onClick="toshare()" style="border:dotted 1px #ddd;display:block; ...

  5. 点击弹出 +1放大效果 -- jQuery插件

    20140110更新: <!doctype html> <html> <head> <meta charset="UTF-8"> & ...

  6. jQuery点击弹出层，弹出模态框，点击模态框消失

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 3 ...

  7. jQuery第二课 点击弹出一个提示框

    选择器允许您对元素组或单个元素进行操作. jQuery 选择器 在前面的章节中,我们展示了一些有关如何选取 HTML 元素的实例. 关键点是学习 jQuery 选择器是如何准确地选取您希望应用效果的元 ...

  8. JQuery实现复制数据到剪贴板之各种麻花与右键点击弹出选择菜单

    1.如果小伙伴们只是想实现点击某个按钮(通过click事件)实现复制功能. 那小哥哥我在这里推荐大家使用2个非常好用的插件 (1)clipboard.js:纯js插件,无需flash,相对来说更轻量级 ...

  9. jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例

    本文实例讲述了jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能.分享给大家供大家参考,具体如下: 弹出层:两种方式 一是打开网页就自动弹出层二是点击弹出 <!DOCTYPE html ...

随机推荐

  1. 【MyLocations】标记位置App开发体会

    实现功能: 1.能通过Cora Location获取地址信息 2.用户获取地址信息后能编辑相关信息 3.使用Core Data保存数据 4.使用MapKit,在Map上显示标记的位置,并可以编辑位置信 ...

  2. 数据库MySQL常用命令复习

    -- 查看数据库 show databases; -- 创建数据库 create database '数据库名'; -- 删除数据库 drop database '数据库名'; -- 选库 use ' ...

  3. Cocos2d-x——Cocos2d-x 屏幕适配新解 – 兼容与扩展【转载】

    Cocos2d-x 屏幕适配新解 – 兼容与扩展 本文出自[无间落叶](转载请保留出处):http://blog.leafsoar.com/archives/2013/05-13-08.html 在读 ...

  4. delphi 保存网页MHT

    delphi 保存网页MHT   uses ADODB_TLB, CDO_TLB, ComObj,MSHTML;{$R *.dfm}{能把网页如 WWW.QQ.COM保存为一个单文件 .MHT但不能把 ...

  5. RapeLay（电车之狼R）的结局介绍 (隐藏结局攻略)

    RapeLay(电车之狼R)的结局介绍 (隐藏结局) 必备知识要让MM怀孕非常easy.起初刚进入调教模式后.仅仅要H一次 MM就開始有时期状态. 生理(连上有红晕) ->不详状态(闭目第一次) ...

  6. tomcat配置虚拟主机

    在眼下,非常多server都是一台server对外能够訪问非常多个javaEE的项目,这样的实现方式就须要在tomcat里面配置虚拟主机了!以下就说说怎样配置虚拟主机: 找到tomcat的安装文件夹, ...

  7. Android游戏开发之主角的移动与地图的平滑滚动

    人物移动地图的平滑滚动处理 玩过rpg游戏的朋友应该都知道RPG的游戏地图一般都比较大 今天我和大家分享一下在RPG游戏中如何来处理超出手机屏幕大小的游戏地图. 如图所示为程序效果动画图 地图滚动的原 ...

  8. Proteus仿真_01、 8086 IO译码仿真

    最近在学习一些微机原理与接口技术方面的知识. 参考书籍<微机原理与接口技术---基于8086Proteus仿真> 顾晖 梁惺彦 编著 实验一.利用8086 芯片来实现对I/O设备的读取和控 ...

  9. [RxJS] Introduction to RxJS Marble Testing

    Marble testing is an expressive way to test observables by utilizing marble diagrams. This lesson wi ...

  10. [Javascript] Function scope

    We have code like: var numbers = [1,2,3]; for(var i in numbers){ setTimeout(function(){console.log(n ...