ie上画圆饼图 迷南。 2022-05-31 08:47 141阅读 0赞 # 概述 # 主要运用到CSS3的transform、js、jq实现饼状图效果 # 详细 # #### 代码下载:[http://www.demodashi.com/demo/10579.html][http_www.demodashi.com_demo_10579.html] #### #### 一、准备工作 #### 1、主要运用到CSS3的3D transform等变换 * transform:向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜 <table style="border-spacing:0px; border-collapse:collapse; background-color:transparent"> <tbody style="margin:0px; padding:0px; border:0px currentcolor"> <tr style="margin:0px; padding:0px; border:0px currentcolor; background-color:rgb(245,245,245)"> <th style="padding:0px 15px 0px 6px; text-align:left; border-color:rgb(63,63,63); margin:0px; width:294px; color:rgb(255,255,255); vertical-align:baseline; background-color:rgb(63,63,63)"> 值</th> <th style="padding:0px 15px 0px 6px; text-align:left; border-color:rgb(63,63,63); margin:0px; color:rgb(255,255,255); vertical-align:baseline; background-color:rgb(63,63,63)"> 描述</th> <th style="padding:0px 15px 0px 6px; text-align:left; border-color:rgb(63,63,63); margin:0px; width:42px; color:rgb(255,255,255); vertical-align:baseline; background-color:rgb(63,63,63)"> 测试</th> </tr> <tr style="margin:0px; padding:0px; border:0px currentcolor"> <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> none</td> <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> 定义不进行转换。</td> <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> <a href="http://www.w3school.com.cn/tiy/c.asp?f=css_transform_rotate&p=22" style="background:none; color:rgb(144,11,9); border-width:0px 0px 1px; margin:0px; padding:0px; border-bottom-color:rgb(144,11,9); border-bottom-style:solid" rel="nofollow">测试</a></td> </tr> <tr style="margin:0px; padding:0px; border:0px currentcolor; background-color:rgb(245,245,245)"> <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> matrix(<span style="margin:0px; padding:0px; border:0px currentcolor">n</span>,<span style="margin:0px; padding:0px; border:0px currentcolor">n</span>,<span style="margin:0px; padding:0px; border:0px currentcolor">n</span>,<span style="margin:0px; padding:0px; border:0px currentcolor">n</span>,<span style="margin:0px; padding:0px; border:0px currentcolor">n</span>,<span style="margin:0px; padding:0px; border:0px currentcolor">n</span>)</td> <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> 定义 2D 转换,使用六个值的矩阵。</td> <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> <a href="http://www.w3school.com.cn/tiy/c.asp?f=css_transform_matrix" style="background:none; color:rgb(144,11,9); border-width:0px 0px 1px; margin:0px; padding:0px; border-bottom-color:rgb(144,11,9); border-bottom-style:solid" rel="nofollow">测试</a></td> </tr> <tr style="margin:0px; padding:0px; border:0px currentcolor"> <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> matrix3d(<span style="margin:0px; padding:0px; border:0px currentcolor">n</span>,<span style="margin:0px; padding:0px; border:0px currentcolor">n</span>,<span style="margin:0px; padding:0px; border:0px currentcolor">n</span>,<span style="margin:0px; padding:0px; border:0px currentcolor">n</span>,<span style="margin:0px; padding:0px; border:0px currentcolor">n</span>,<span style="margin:0px; padding:0px; border:0px currentcolor">n</span>,<span style="margin:0px; padding:0px; border:0px currentcolor">n</span>,<span style="margin:0px; padding:0px; border:0px currentcolor">n</span>,<span style="margin:0px; padding:0px; border:0px currentcolor">n</span>,<span style="margin:0px; padding:0px; border:0px currentcolor">n</span>,<span style="margin:0px; padding:0px; border:0px currentcolor">n</span>,<span style="margin:0px; padding:0px; border:0px currentcolor">n</span>,<span style="margin:0px; padding:0px; border:0px currentcolor">n</span>,<span style="margin:0px; padding:0px; border:0px currentcolor">n</span>,<span style="margin:0px; padding:0px; border:0px currentcolor">n</span>,<span style="margin:0px; padding:0px; border:0px currentcolor">n</span>)</td> <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> 定义 3D 转换,使用 16 个值的 4x4 矩阵。</td> <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> <br style=""> </td> </tr> <tr style="margin:0px; padding:0px; border:0px currentcolor; background-color:rgb(245,245,245)"> <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> translate(<span style="margin:0px; padding:0px; border:0px currentcolor">x</span>,<span style="margin:0px; padding:0px; border:0px currentcolor">y</span>)</td> <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> 定义 2D 转换。</td> <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> <a href="http://www.w3school.com.cn/tiy/c.asp?f=css_transform_translate" style="background:none; color:rgb(144,11,9); border-width:0px 0px 1px; margin:0px; padding:0px; border-bottom-color:rgb(144,11,9); border-bottom-style:solid" rel="nofollow">测试</a></td> </tr> <tr style="margin:0px; padding:0px; border:0px currentcolor"> <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> translate3d(<span style="margin:0px; padding:0px; border:0px currentcolor">x</span>,<span style="margin:0px; padding:0px; border:0px currentcolor">y</span>,<span style="margin:0px; padding:0px; border:0px currentcolor">z</span>)</td> <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> 定义 3D 转换。</td> <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> <br style=""> </td> </tr> <tr style="margin:0px; padding:0px; border:0px currentcolor; background-color:rgb(245,245,245)"> <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> translateX(<span style="margin:0px; padding:0px; border:0px currentcolor">x</span>)</td> <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> 定义转换,只是用 X 轴的值。</td> <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> <a href="http://www.w3school.com.cn/tiy/c.asp?f=css_transform_translatex" style="background:none; color:rgb(144,11,9); border-width:0px 0px 1px; margin:0px; padding:0px; border-bottom-color:rgb(144,11,9); border-bottom-style:solid" rel="nofollow">测试</a></td> </tr> <tr style="margin:0px; padding:0px; border:0px currentcolor"> <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> translateY(<span style="margin:0px; padding:0px; border:0px currentcolor">y</span>)</td> <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> 定义转换,只是用 Y 轴的值。</td> <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> <a href="http://www.w3school.com.cn/tiy/c.asp?f=css_transform_translatey" style="background:none; color:rgb(144,11,9); border-width:0px 0px 1px; margin:0px; padding:0px; border-bottom-color:rgb(144,11,9); border-bottom-style:solid" rel="nofollow">测试</a></td> </tr> <tr style="margin:0px; padding:0px; border:0px currentcolor; background-color:rgb(245,245,245)"> <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> translateZ(<span style="margin:0px; padding:0px; border:0px currentcolor">z</span>)</td> <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> 定义 3D 转换,只是用 Z 轴的值。</td> <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> <br style=""> </td> </tr> <tr style="margin:0px; padding:0px; border:0px currentcolor"> <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> scale(<span style="margin:0px; padding:0px; border:0px currentcolor">x</span>,<span style="margin:0px; padding:0px; border:0px currentcolor">y</span>)</td> <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> 定义 2D 缩放转换。</td> <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> <a href="http://www.w3school.com.cn/tiy/c.asp?f=css_transform_scale" style="background:none; color:rgb(144,11,9); border-width:0px 0px 1px; margin:0px; padding:0px; border-bottom-color:rgb(144,11,9); border-bottom-style:solid" rel="nofollow">测试</a></td> </tr> <tr style="margin:0px; padding:0px; border:0px currentcolor; background-color:rgb(245,245,245)"> <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> scale3d(<span style="margin:0px; padding:0px; border:0px currentcolor">x</span>,<span style="margin:0px; padding:0px; border:0px currentcolor">y</span>,<span style="margin:0px; padding:0px; border:0px currentcolor">z</span>)</td> <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> 定义 3D 缩放转换。</td> <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> <br style=""> </td> </tr> <tr style="margin:0px; padding:0px; border:0px currentcolor"> <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> scaleX(<span style="margin:0px; padding:0px; border:0px currentcolor">x</span>)</td> <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> 通过设置 X 轴的值来定义缩放转换。</td> <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> <a href="http://www.w3school.com.cn/tiy/c.asp?f=css_transform_scalex" style="background:none; color:rgb(144,11,9); border-width:0px 0px 1px; margin:0px; padding:0px; border-bottom-color:rgb(144,11,9); border-bottom-style:solid" rel="nofollow">测试</a></td> </tr> <tr style="margin:0px; padding:0px; border:0px currentcolor; background-color:rgb(245,245,245)"> <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> scaleY(<span style="margin:0px; padding:0px; border:0px currentcolor">y</span>)</td> <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> 通过设置 Y 轴的值来定义缩放转换。</td> <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> <a href="http://www.w3school.com.cn/tiy/c.asp?f=css_transform_scaley" style="background:none; color:rgb(144,11,9); border-width:0px 0px 1px; margin:0px; padding:0px; border-bottom-color:rgb(144,11,9); border-bottom-style:solid" rel="nofollow">测试</a></td> </tr> <tr style="margin:0px; padding:0px; border:0px currentcolor"> <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> scaleZ(<span style="margin:0px; padding:0px; border:0px currentcolor">z</span>)</td> <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> 通过设置 Z 轴的值来定义 3D 缩放转换。</td> <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> <br style=""> </td> </tr> <tr style="margin:0px; padding:0px; border:0px currentcolor; background-color:rgb(245,245,245)"> <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> rotate(<span style="margin:0px; padding:0px; border:0px currentcolor">angle</span>)</td> <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> 定义 2D 旋转,在参数中规定角度。</td> <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> <a href="http://www.w3school.com.cn/tiy/c.asp?f=css_transform_rotate" style="background:none; color:rgb(144,11,9); border-width:0px 0px 1px; margin:0px; padding:0px; border-bottom-color:rgb(144,11,9); border-bottom-style:solid" rel="nofollow">测试</a></td> </tr> <tr style="margin:0px; padding:0px; border:0px currentcolor"> <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> rotate3d(<span style="margin:0px; padding:0px; border:0px currentcolor">x</span>,<span style="margin:0px; padding:0px; border:0px currentcolor">y</span>,<span style="margin:0px; padding:0px; border:0px currentcolor">z</span>,<span style="margin:0px; padding:0px; border:0px currentcolor">angle</span>)</td> <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> 定义 3D 旋转。</td> <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> <br style=""> </td> </tr> <tr style="margin:0px; padding:0px; border:0px currentcolor; background-color:rgb(245,245,245)"> <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> rotateX(<span style="margin:0px; padding:0px; border:0px currentcolor">angle</span>)</td> <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> 定义沿着 X 轴的 3D 旋转。</td> <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> <a href="http://www.w3school.com.cn/tiy/c.asp?f=css_transform_rotatex" style="background:none; color:rgb(144,11,9); border-width:0px 0px 1px; margin:0px; padding:0px; border-bottom-color:rgb(144,11,9); border-bottom-style:solid" rel="nofollow">测试</a></td> </tr> <tr style="margin:0px; padding:0px; border:0px currentcolor"> <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> rotateY(<span style="margin:0px; padding:0px; border:0px currentcolor">angle</span>)</td> <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> 定义沿着 Y 轴的 3D 旋转。</td> <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> <a href="http://www.w3school.com.cn/tiy/c.asp?f=css_transform_rotatey" style="background:none; color:rgb(144,11,9); border-width:0px 0px 1px; margin:0px; padding:0px; border-bottom-color:rgb(144,11,9); border-bottom-style:solid" rel="nofollow">测试</a></td> </tr> <tr style="margin:0px; padding:0px; border:0px currentcolor; background-color:rgb(245,245,245)"> <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> rotateZ(<span style="margin:0px; padding:0px; border:0px currentcolor">angle</span>)</td> <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> 定义沿着 Z 轴的 3D 旋转。</td> <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> <a href="http://www.w3school.com.cn/tiy/c.asp?f=css_transform_rotatez" style="background:none; color:rgb(144,11,9); border-width:0px 0px 1px; margin:0px; padding:0px; border-bottom-color:rgb(144,11,9); border-bottom-style:solid" rel="nofollow">测试</a></td> </tr> <tr style="margin:0px; padding:0px; border:0px currentcolor"> <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> skew(<span style="margin:0px; padding:0px; border:0px currentcolor">x-angle</span>,<span style="margin:0px; padding:0px; border:0px currentcolor">y-angle</span>)</td> <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> 定义沿着 X 和 Y 轴的 2D 倾斜转换。</td> <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> <a href="http://www.w3school.com.cn/tiy/c.asp?f=css_transform_skew" style="background:none; color:rgb(144,11,9); border-width:0px 0px 1px; margin:0px; padding:0px; border-bottom-color:rgb(144,11,9); border-bottom-style:solid" rel="nofollow">测试</a></td> </tr> <tr style="margin:0px; padding:0px; border:0px currentcolor; background-color:rgb(245,245,245)"> <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> skewX(<span style="margin:0px; padding:0px; border:0px currentcolor">angle</span>)</td> <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> 定义沿着 X 轴的 2D 倾斜转换。</td> <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> <a href="http://www.w3school.com.cn/tiy/c.asp?f=css_transform_skewx" style="background:none; color:rgb(144,11,9); border-width:0px 0px 1px; margin:0px; padding:0px; border-bottom-color:rgb(144,11,9); border-bottom-style:solid" rel="nofollow">测试</a></td> </tr> <tr style="margin:0px; padding:0px; border:0px currentcolor"> <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> skewY(<span style="margin:0px; padding:0px; border:0px currentcolor">angle</span>)</td> <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> 定义沿着 Y 轴的 2D 倾斜转换。</td> <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> <a href="http://www.w3school.com.cn/tiy/c.asp?f=css_transform_skewy" style="background:none; color:rgb(144,11,9); border-width:0px 0px 1px; margin:0px; padding:0px; border-bottom-color:rgb(144,11,9); border-bottom-style:solid" rel="nofollow">测试</a></td> </tr> <tr style="margin:0px; padding:0px; border:0px currentcolor; background-color:rgb(245,245,245)"> <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> perspective(<span style="margin:0px; padding:0px; border:0px currentcolor">n</span>)</td> <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> 为 3D 转换元素定义透视视图。</td> <td style="padding:6px 15px 6px 6px; vertical-align:text-top; border-color:rgb(170,170,170); margin:0px"> 测试</td> </tr> </tbody> </table> 2、对于圆角问题,兼容ie8,需要用到ie-css.htc这个文件。对于圆饼的实现需要运用overflow:hidden属性根据li的高度限制span标签内容的显示。 #### 二、程序实现 #### 原先我在ul标签上画一个圆并设置超出隐藏,然后在li就给饼状图所占比例的高度。但实际上是不行的,因为ul虽然在ie上显示为圆角,但是它本身还是矩形,所以超出隐藏也是按照矩形来超出隐藏,li也所会显示为一个矩形,并不能像我想象那样li变成圆饼状。 后面我想到用li来做超出隐藏,如果是百分80%的饼状图,li的高度是ul的80%而宽度不变,在li里面加个span画一个跟ul一模一样的圆形。由于li做了超出隐藏,所以span的圆也只会跟li的高度一样,这样圆饼图就画出来了。 ![4161419839-5922905335a38\_articlex.png][4161419839-5922905335a38_articlex.png] html代码如下: <div class="percentage-img"> <ul> <li><span></span></li> </ul> <span data-percentage="80"></span> </div> js部分代码如下: var explorer = navigator.userAgent; var per1 , span1 = $(".percentage-img>span").data("percentage"); $(".percentage-img>span").html(span1 + "%"); per1 = parseInt(span1 * 3.6); if (explorer.indexOf("MSIE") >= 0) { $(".percentage-img>ul>li").css("height", span1); } else { pertenage(per1, ".percentage-img"); $(".percentage-img>ul>li").css({ 'position': 'absolute', 'top': '50px', 'left': '50px', 'width': '50px', 'height': '1px', 'background-color': '#269dda', '-webkit-transform-origin': '0% 0%', '-ms-transform-origin': '0% 0%', 'transform-origin': '0% 0%', 'z-index': '2' }) } css样式如下: .percentage-img{ position: relative; margin: 20px 0; border-right: solid 1px #f9f9f9; text-align: center; } .percentage-img>ul{ position: relative; display: inline-block; width: 100px; height: 100px; border-radius: 100px; background-color: #ccc; } .percentage-img>span{ display: inline-block; position: absolute; top: 0; left: 0%; width: 100%; line-height: 100px; text-align: center; font-size: 16px; color: #fff; z-index: 10; } #### 三、文件、运行截图 #### 1、文件截图: ![未标题-1.jpg][-1.jpg] 双击index.html即可看到效果 2、运行效果图: ![未标题-2.jpg][-2.jpg] #### 注:本文著作权归作者,由demo大师([http://www.demodashi.com][http_www.demodashi.com])宣传,拒绝转载,转载需要作者授权 #### [http_www.demodashi.com_demo_10579.html]: http://www.demodashi.com/demo/10579.html [4161419839-5922905335a38_articlex.png]: /images/20220531/98a4922ae8554d4a9f1d96eeb9f44c64.png [-1.jpg]: /images/20220531/a5590d23f4ba493e914e4ccbc477460e.png [-2.jpg]: /images/20220531/e9b7019f55934be28dab72539831a117.png [http_www.demodashi.com]: http://www.demodashi.com/
还没有评论,来说两句吧...