查看: 15|回复: 1

【技术帖】css+js控制图片围绕中心旋转。

[复制链接]
summer 发表于 2018-6-8 10:38:19 | 显示全部楼层 |阅读模式
今天我来讲一个网站制作过程中遇到的问题,我需要做一个效果,效果用圆圈来表示:开始是一个圆如下:

点击图片后图片周围出现一圈小圆,围绕中心旋转出现如下

再点击中间图标全部回归到开始的样式。
代码可以参考:[983]
下载这个代码运行即可!
接下来是对这个代码的分析,同学们做效果的时候可能需要的并不是这个样式,仅仅是需要这个效果而已,那么问题来了,如果遇到不同尺寸的图片如何解决这个问题呢?还会这样如我们所想象的显示吗?
那么接下来,就来试验一下吧!
在页面中将需要修改的图片替换原来代码中只是通过样式开控制的颜色块,在样式中把各种尺寸都调节好,其实就是调width和height,这不需要赘述了吧?

summer在制作过程中就遇到的最大的问题就是,中心图片的尺寸,和周围图片的效果都做出来了,就是不围绕中心旋转这是怎么回事呢?
或者围绕旋转了,可是周围图标的初始位置不对。
最后找到了问题的源头,就是下面这句代码:
  1. .palette .palette_item_wrapper {  -webkit-transform: translateX(100px);
  2.           transform: translateX(100px);}
复制代码
里面的这个100px; 就是控制周围图片一开始固定位置的。同学们可以根据自己的需要进行修改位置!
控制周围图片扩散直径的代码:
  1. <blockquote>.palette .palette_color {
复制代码
这几个参数也是可以修改的,根据需求调整!
最后给大家上传我修改后的样式进行参考一下
[992]
欢迎大家批评指教!




回复

使用道具 举报

xiaomayi 发表于 2018-6-13 15:54:10 | 显示全部楼层
感谢分享!
回复

使用道具 举报

您需要登录后才可以回文 登录 | 立即注册 手机动态码快速登录

本版优币规则

快速回复 返回顶部 返回列表