dawn888 - 博客园

解决click与hover(mouseover)的冲突问题

摘要：主要应用到一个知识点：$(selector).data('name','value'); <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> 阅读全文

posted @ 2020-04-01 17:51 dawn888 阅读(1860) 评论(0) 推荐(0)

svg 画地图

摘要：下载一个svgDeveloper软件，破解版下载 1、首先找一张地图作为绘制模板;（当然你也可以自己画，不准确怪我咯！） 2、新建svg文件：File --> New --> svg 点击ok; 3、修改svg画布大小,和使用的地图模板一致; 4、点击图片按钮,然后将鼠标移到画布左上角,一直拉到右下阅读全文

posted @ 2020-03-31 13:13 dawn888 阅读(1163) 评论(0) 推荐(0)

使用SVGDeveloper画svg地图详细过程

摘要：使用步骤 1. 安装svg 2. 具体操作 1. 打开svg，点击file ，new，默认svg，点击ok 显示界面如下：然后点击image 把鼠标放到代码下面的的桌面上，鼠标箭头会变成一个十字，然后点击桌布，弹出窗口，让选择一个图片：刚出来的时候，桌布上只能看到一个框框：然后，右键桌布，在菜阅读全文

posted @ 2020-03-31 13:05 dawn888 阅读(2570) 评论(0) 推荐(1)

用SVGDeveloper制作svg地图

摘要：项目中需要实现巴蜀地区图,并且将其分为川东、川西、川南、川北四个区域，鼠标悬浮对应区域的区块改变颜色。经过网上查询资料，并未找到现成的区域图，于是就利用SVGDeveloper工具绘制。一、绘制地图 1、首先找一张地图作为绘制模板; 2、新建svg文件：File --> New --> svg 点阅读全文

posted @ 2020-03-31 12:59 dawn888 阅读(799) 评论(0) 推荐(0)

使用snapjs实现svg路径描边动画

摘要：一，snap.svg插件在近几天，突然接到一个需求，内容是要在网页上写一个路径的动画，还需要可以随意控制动画的速度，开始于结束，本来是一个图片可以解决的问题，结果就这样变难了呀，在网上查一会之后，突然就发现了svg，他有两个神奇属性stroke-dasharray(控制虚线和空白大小)和stroke 阅读全文

posted @ 2020-03-31 11:25 dawn888 阅读(988) 评论(0) 推荐(0)

d3操作svg路径动画，及dom移动

摘要：图片跟随路径循环运动，dom也跟着路径运动(利用实时获取坐标位置的方法，改变transform) 1，准备路径 a,自己脑补路径 b,在ps上画好，然后在保存成png-24图片，背景透明，在网站https://www.vectorizer.io/上生成path路径 2，以下是完整代码及注释 <!DO 阅读全文

posted @ 2020-03-31 11:21 dawn888 阅读(1662) 评论(0) 推荐(0)

新时代前端必备神器 Snapjs之弹动效果

摘要：有人说不会 SVG 的前端开发者不叫开发者，而叫爱好者。前端不光是 Angularjs 了，这时候再不学 SVG 就晚了！（如果你只会 jQuery 就当我没说。。。）这里我就给大家分享一个前几天在别处看到的一个高大上的 SVG 效果，左边菜单弹出来会动动弹的说，链接点这里。当时我就震惊了，今天抽阅读全文

posted @ 2020-03-31 11:19 dawn888 阅读(800) 评论(0) 推荐(0)

threejs 鼠标移动控制模型旋转

摘要： <!doctype html> <html> <head> <meta charset="utf-8"> <title>threejs鼠标移动控制模型旋转</title> </head> <body> <script src="js/threejs/three.js"></script> <!--< 阅读全文

posted @ 2020-03-31 10:24 dawn888 阅读(6644) 评论(1) 推荐(0)

玩转SVG线条动画

摘要：在上一节的《SVG线条动画实现原理》一文中，了解了SVG中线动画是怎么做的。在这篇文章中，了解了怎么借助Sketch这样的制作软件绘制SVG的路径，然后借助于SVG的stroke-dasharray和stroke-dashoffset值设置为路径的长度（最好是大于其长度，可以通过.getTotalL 阅读全文

posted @ 2020-03-31 10:03 dawn888 阅读(1074) 评论(0) 推荐(0)

CSS也能计算：calc

摘要：举个例子ul li适配屏幕，如果加个border:1px，不用border-content得情况下,每个li多加了2px： <ul><li></li><li></li><li></li><li></li></ul> <style> ul{ width:100% list-style:none} ul 阅读全文

posted @ 2020-03-29 09:55 dawn888 阅读(165) 评论(0) 推荐(0)