html+css拼接不规则图片

jsbuzhidao 2015-12-23 10:30:21

请问像这样的效果图片,要切成图片做到页面上,应该怎么操作呢
例如：向下方向的,鼠标移到向下的半弧时,有效果变化,可以是另外一张只颜色不同的相同图片
不用热点和HTML技术
只用html+css可以实现吗。

...全文

905 11 打赏收藏转发到动态举报

写回复

用AI写文章

11 条回复

切换为时间正序

请发表友善的回复…

发表回复

仅小鱼 2015-12-26

打赏
举报

切图不用切用雪碧图就行不过构造圆盘得多个快嵌套这个比较麻烦些

jsbuzhidao 2015-12-25

打赏
举报

引用 6 楼 zpjshiwo77 的回复:

[quote=引用 5 楼 jsbuzhidao 的回复:] [quote=引用 3 楼 zpjshiwo77 的回复:] 可以啊，用绝对定位或者相对定位拼接起来。换图片，就hover效果换一下图片的url就行了。

请问这个切图怎么切呢，因为鼠标放上去或者点击的时候，都是显示类似半圆弧的形状，不是像正常的方块的[/quote] 用PS切，可以叫UI做，或者网上找人切。其实这图结构还挺简单的，除了中间返回图标外，其他的用canvas画一下还是比较简单的。[/quote] 我看切图也只能切成你下面的那种效果，所以还是方形的感觉,用canvas做也麻烦，还是兼容IE7这样的低版本浏览器呢,所以比较郁闷的现在就是一个切图，我的感觉总是方开的存在的，然后在贴到页面里，就卡在这边了

wuheng_1 2015-12-25

打赏
举报

还有SVG

zpjshiwo77 2015-12-25

打赏
举报

写了canvas的一个简单demo。但总的来说还是用图片好，简单方便，而且兼容性好。


<!DOCTYPE html>
<html>
<head>
    <title>TEST2</title>
    <script type="text/javascript" src="jquery-2.1.4.js"></script>
    <style type="text/css">
    </style>
</head>
<body>
   <canvas style="background:#FFC" height="400" width="400" id="y"></canvas>
</body>
<script type="text/javascript">
function stroke (color){
    var demo=document.getElementById("y");//获取canvas对象
    var CircleX=demo.getContext("2d");//创建2D画板对象
    CircleX.clearRect(0, 0, 400, 400);//清除画布
    var Max={//创建圆点做坐标200,200，半径为100的圆对象
        x:200,
        y:200,
        r:100    
    }
    var Min={
        x:200,
        y:200,
        r:40    
    }
    CircleX.fillStyle = color;//填充颜色
    CircleX.lineWidth="5";//线粗细
    CircleX.beginPath();//开始制图
    CircleX.strokeStyle="black";//颜色为黑色
    //先画线
    CircleX.moveTo(173,170);//开始坐标
    CircleX.lineTo(133,129);//结束坐标
    CircleX.lineTo(267,129);//开始坐标
    CircleX.lineTo(225,170);//结束坐标
    CircleX.stroke();
    CircleX.fill();//填充颜色
    //再画两个圆弧
    CircleX.beginPath();
    CircleX.arc(Max.x,Max.y,Max.r,Math.PI*-0.75, Math.PI*-0.25, false);
    CircleX.stroke();
    CircleX.fill();
    CircleX.beginPath();
    CircleX.arc(Min.x,Min.y,Min.r,Math.PI*-0.75, Math.PI*-0.25, false);//其中math.pi为角度，*0代表从90度开始
    CircleX.stroke();//画图
    CircleX.fillStyle = "#ffc";
    CircleX.fill();
}
stroke("#fff");
$("#y").mouseenter(function(){
    stroke("#f00");
});
$("#y").mouseleave(function(){
    stroke("#fff");
});
</script>
</html>

zpjshiwo77 2015-12-25