PhoneGap中文网

标题: jqmobi 简单的圆形 按钮实现_源码 [打印本页]

---

作者: 414115496@qq.co    时间: 2015-1-24 02:17
标题: jqmobi 简单的圆形 按钮实现_源码

下图是实现的效果

html代码

1. <div onclick="JavaScript:alert('我是蓝色的');" id="animate" class="icon location radio white" style=" width: 50px; height: 50px; border-radius: 50%;  background: blue"></div>
   
2.                     <div onclick="JavaScript:alert('我是红色的');" id="animate1" class="icon home radio white" style="margin-top:-50px; margin-left:60px; width: 50px; height: 50px; border-radius: 50%;  background: red"></div>
   
3.                     <div onclick="JavaScript:alert('我是绿色的');" id="animate2" class="icon phone radio white" style="margin-top:-50px; margin-left:120px; width: 50px; height: 50px; border-radius: 50%;  background: rgb(149,215,0)"></div>

复制代码

css修改代码

在 /css/icons.css 中 插入如下代码

1. .icon.radio:before {
   
2.         font-size:2em;
   
3.         left:11px; top:10px;
   
4. 
   
5. }
   
6. .icon.white:before {
   
7.         color:white;
   
8. }

复制代码

大家可以举一反三 图标的颜色可以替换 位置我是手动定位的 如果 觉得不对还可以调整

呃..好晚了。。洗洗睡了  以后我也会发一些简单易懂的源码给大家分享 相互交流有助于提高嘛

---

作者: admin    时间: 2015-1-25 17:37
谢谢

---

欢迎光临 PhoneGap中文网 (http://bbs.phonegap100.com/)

Powered by Discuz! X3.2