jquery之点击弹出图标环形菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery之点击弹出图标环形菜单</title>

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/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(images/yuan.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="images/shang.png" alt="" /></a></li>
        <li><a href="http://baidu.com/"><img src="images/dui.png" alt="" /></a></li>
        <li><a href="http://baidu.com/"><img src="images/jia.png" alt="" /></a></li>
        <li><a href="http://baidu.com/"><img src="images/jian.png" alt="" /></a></li>
        <li><a href="http://baidu.com/"><img src="images/chen.png" alt="" /></a></li>
        <li><a href="http://baidu.com/"><img src="images/zuo.png" alt="" /></a></li>
        <li><a href="http://baidu.com/"><img src="images/you.png" alt="" /></a></li>
    </ul>
</div>
</div>
</body>
</html>

run:

时间: 2024-10-14 14:14:18

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

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

基于jQuery鼠标点击弹出登陆框效果.这是一款扁平样式风格的jQuery弹出层登陆框特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <input type="button" class="one" value="点击我查看效果" /> <div class="box"> <div class="box2"> <div class=&quo

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

/** * 点击弹出 PopupWindow 初始化菜单 */ private void initPopupWindow() { PopupWindowAdapter adapter = new PopupWindowAdapter(); mPopDisplay.setAdapter(adapter); //mPopDisplay 是mPopView 中的listview if (mPopupWindow == null) { // mPopView view对象xml文件 mPopupWind

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

效果预览:http://hovertree.com/texiao/html5/19/ 本效果适用于移动设备,可以使用手机等浏览效果. 源码下载:http://hovertree.com/h/bjaf/mwvn0mxi.htm 本实例用到了toggleClass方法,请参考:http://hovertree.com/h/bjaf/attributes_toggleclass.htm 代码如下: 1 <!doctype html> 2 <html lang="zh">

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 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 <!DOCTYPE html>

简单的jquery点击弹出背景变暗遮罩效果

工作中自己写了一个简单的jquery点击弹出背景变暗遮罩效果,非常好用......只把关键代码贴出来.并实现了点击空白处隐藏弹出层效果. js代码如下: <script type="text/javascript">  $(document).ready(function(){   $(".tkyy").click(function(event){      event.stopPropagation(); //停止事件冒泡    $(".ma

用jQuery实现页面遮罩弹出框

页面遮罩弹出框是最常见的一种情况,今天用jQuery实现页面遮罩弹出框,主要用的技术有JQuery,css和html, html代码如下: <div id="main"><a href="javascript:showBg();">点击这里查看效果</a> <div id="fullbg"></div> <div id="dialog"> <p cl

Jquery+div+css实现弹出登录窗口

基本思路先隐藏(dispaly:none)再显示,半透明蒙版层通过 z-index:9998; z-index:9999; 值越大越在前面 index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http:

面遮罩弹出框已经不是一个陌生的话题了,实现的方法大同小异多种多样,今天用jQuery实现页面遮罩弹出

页面遮罩弹出框是最常见的一种情况,今天用jQuery实现页面遮罩弹出框,主要用的技术有JQuery,css和html, html代码如下: 复制代码代码如下: <div id="main"><a href="javascript:showBg();">点击这里查看效果</a> <div id="fullbg"></div> <div id="dialog">

jQuery插件---轻量级的弹出窗口wBox

Box Demo wBox——轻量级的弹出窗口jQuery插件,基于jQuery1.4.2开发,主要实现弹出框的效果,并且加入了很多有趣的功能,比如可img灯箱效果,callback函数,显示隐藏层,Ajax页面,iframe嵌入页面…… 背景透明度可以根据实际情况进行调节,甚至不设置背景 可以根据需要添加wBox标题 支持设置窗口位置,默认为在中心显示 支持callback函数 支持html内容自定义 img灯箱看图功能 支持在wBox显示#ID的内容 支持Ajax页面内容 支持设置背景,不设