<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. JAVA事务的概念

    From:http://www.cnblogs.com/kristain/articles/2038397.html 一.什么是事务 事务是访问数据库的一个操作序列,数据库应用系统通过事务集来完成对数 ...

  2. ldap

    年1月份最新的包.       安装前的准备工作 # mkdir ?p /data/packages//习惯性的把一些包放在一个位置 # yum install openldap-devel zlib ...

  3. 如何同时启动多个Tomcat服务

    在项目开发中,有时会需要同时启动多个Tomcat服务,如果直接启动多个的话,会报以下错误: Port busy xxxx java.net.SocketException: Unrecognized ...

  4. webservice 缓存机制

    本文转载:http://blog.csdn.net/zhdd1234/article/details/4555472 WebService的缓存分为两种,一种是简单的输出缓存,一种是强大的数据缓存 一 ...

  5. java虚拟机JVM学习笔记-基础知识

    最近使用开发的过程中出现了一个小问题,顺便记录一下原因和方法--java虚拟机 媒介:JVM是每一位从事Java开发工程师必须翻越的一座大山! JVM(Java Virtual Machine)JRE ...

  6. C语言用static限制函数以及全局变量的作用域

    今天才发现这个东西! C语言中没有public private之类的东西. 如果一个函数或者一个全局变量只想在一个.c文件中使用,可以在前面加上static! 以前我还傻傻的每个.c文件中的函数都加一 ...

  7. Educational Codeforces Round 2 E. Lomsat gelral 启发式合并map

    E. Lomsat gelral Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/600/prob ...

  8. androidstudio can't run git.exe

    今天用android studio从git下载项目的时候遇到一个问题,提示说can't run git.exe 问了下度娘以及谷歌.但是无果,后面捣鼓了一阵,下了一个git windows版本后,在a ...

  9. Select模型原理

    Select模型原理 利用select函数,推断套接字上是否存在数据,或者是否能向一个套接字写入数据.目的是防止应用程序在套接字处于锁定模式时,调用recv(或send)从没有数据的套接字上接收数据, ...

  10. 个人对maven pom.xml文件的理解

    如:一个项目可能需要引用另外两个项目的类.. 如 项目cswebbefore  需要引用cswebservice 和reports 这三个项目都有各自的pom.xml文件 cswebservice 项 ...