<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. win7常用快捷键

    Win+1:打开/显示超级任务栏第一个图标代表的程序Win+2:打开/显示超级任务栏第二个图标代表的程序(3.4.……如此类推)Win+Tab:3D切换窗口,你要是按住不松口,则所有窗口会轮流翻转Wi ...

  2. char数组与char指针

    1.以字符串形式出现的,编译器会在结尾自动添加\0,思考,为什么? 存在的C语言方法,如strlen(s),计算字符串的长度,其中s指针.strlen要计算字符串长度,必须知道哪里是结尾,因此使用\0 ...

  3. MySQL安装详解(V5.5 For Windows)

    前言 这几年一直在用MySQL,并且是Windows+.Net+MySQL的搭配,用MyISAM引擎支持过单表每天千万以上的数据递增,TB级的数据MySQL游刃有余.最近在做一个较大并发的项目,尝试了 ...

  4. Codeforces Round #332 (Div. 2) B. Spongebob and Joke 水题

    B. Spongebob and Joke Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/599 ...

  5. c# winform 把彩色图片转换为灰色的图片,变灰,灰度图片,速度很快,safe,unsafe

    把彩色图片转换为灰色的图片,直接用.net接口遍历每个像素点转换的效率非常低,800K的图片65万像素我的电脑要用5分钟,而用了unsafe,速度提高了几千倍,同样的图片只用了0.几秒 附一个常用的遍 ...

  6. [Ramda] Compose and Curry

    Curry: The idea of Curry is to spreate the data from the function. Using Curry to define the functio ...

  7. iOS开发——UI_swift篇&UITableView实现索引功能

    UITableView实现索引功能     关于UItableView的索引在平时项目中所见不多,最多的就是跟联系人有关的界面,虽然如此,但是作为一个swift开发的程序必须知道的一个技术点,所以今天 ...

  8. S_ISREG等几个常见的宏 struct stat

    S_ISLNK(st_mode):是否是一个连接.S_ISREG(st_mode):是否是一个常规文件.S_ISDIR(st_mode):是否是一个目录S_ISCHR(st_mode):是否是一个字符 ...

  9. Outlook2010 移动数据文件到其它地方

            您可以将数据文件移到计算机的其他文件夹中.移动文件的一个原因在于可使备份更容易并且可以让默认的outlook邮件文件不在存在C盘,导致装系统不见或者文件过大而撑死了C盘.例如,如果数据 ...

  10. extern的困惑

    摘自:http://blog.csdn.net/fxjtoday/article/details/6021845 如果想明白为什么需要extern, 需要从编译和链接讨论起, 现代编译器一般采用按文件 ...