<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. C++的辅助工具介绍

    1 文档类  (1) Doxygen  参考站点:http://www.doxygen.org  Doxygen是一种适合C风格语言(如C++.C.IDL.Java甚至包括C#和PHP)的.开放源码的 ...

  2. stl lower_bound upper_bound binary_search equal_range

    自己按照stl实现了一个:   http://www.cplusplus.com/reference/algorithm/binary_search/ 这里有个注释,如何判断两个元素相同: Two e ...

  3. 《C语言编写 学生成绩管理系统》

    /* (程序头部凝视開始) * 程序的版权和版本号声明部分 * Copyright (c) 2011, 烟台大学计算机学院学生 * All rights reserved. * 文件名: 学生成绩管理 ...

  4. Codeforces Round #313 (Div. 2) B. Gerald is into Art 水题

    B. Gerald is into Art Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/560 ...

  5. 为joomla加入下拉菜单的方法

    用 Joomla! 建站的大多数站长都须要在站点前台使用下拉菜单(dropdown menu),或者叫弹出菜单(slide menu),由于这样能够在有限的页面空间上公布很多其它的导航菜单,而且能够进 ...

  6. 框架使用的技术主要是SpringMVC 在此基础上进行扩展

    框架使用的技术主要是SpringMVC 在此基础上进行扩展 1 Web前端使用 2 前段控制器采用SpringMVC零配置 3 IOC容器Spring 4 ORM使用 Mybites或者hiberna ...

  7. EasyBCD 2.2中文版安装变色龙wowpc.iso详细教程（适用各个版本）

    第一章 安装变色龙引导本章节提供3种安装方案,请自行选择 1.使用 Windows 版变色龙安装器安装适用引导方案:BIOS+MBR第1步:下载 Chameleon Install 2.2svn228 ...

  8. CDHtmlDialog加壳HTML5页面跳转错误解决（原）

    HTML5+Native方式开发应用程序,遇到的一个问题:HTML5实现的阅读器在打开文档时,CDHtmldialog类的跳转函数报错,忽略错误程序可以正确执行. 错误代码:OnNavigateCom ...

  9. 申请TexturePacker 或 PhysicsEditor free licenses

    有一个跟开发有关的blog,就可以去 http://www.codeandweb.com/request-free-license 申请一个free licenses. 可以申请TexturePack ...

  10. Asp.net生成随机不重复的函数(方法)

    // 生成三位毫秒字串         public static string Get_mSec()         {             string mSec = System.DateT ...