<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. MFC拆分窗口及它们之间的数据交换(转)

    转自:http://blog.csdn.net/nuptboyzhb/article/details/7455471 源代码:http://download.csdn.net/detail/nuptb ...

  2. android 多线程数据库读写分析与优化

    最新需要给软件做数据库读写方面的优化,之前无论读写,都是用一个 SQLiteOpenHelper.getWriteableDataBase() 来操作数据库,现在需要多线程并发读写,项目用的是2.2的 ...

  3. 为laravel分页样式制定class

    做的项目有一个上翻页和下翻页,使用了框架提供的

  4. HttpServer的使用

    http://docs.oracle.com/javase/8/docs/jre/api/net/httpserver/spec/overview-summary.html 1.Package com ...

  5. Linux内核--网络栈实现分析（一）--网络栈初始化--转

    转载地址 http://blog.csdn.net/yming0221/article/details/7488828 作者:闫明 本文分析基于内核Linux Kernel 1.2.13 以后的系列博 ...

  6. HBase Error: connection object not serializable

    HBase Error: connection object not serializable 想在spark driver程序中连接HBase数据库,并将数据插入到HBase,但是在spark集群提 ...

  7. Linux shell 脚本攻略之生成任意大小的文件

    摘自:<Linux shell 脚本攻略>

  8. iCloud之旅

    1.创建BIDTinyPixDocument类 #import <UIKit/UIKit.h> //创建文档类 @interface TinyPixDocument : UIDocumen ...

  9. javascript 十六进制与RGB颜色值的相互转换

    http://www.zhangxinxu.com/wordpress/?p=646 http://www.zhangxinxu.com/wordpress/?p=646 -------------- ...

  10. 通过java实现对数据库的增删改查

    package cn.hncu; import java.sql.Connection;import java.sql.DriverManager;import java.sql.ResultSet; ...