如何使用jQuery和CSS创建万花筒
Kaleidoscope with jQuery. Today we continue CSS lessons. Let’s remember an ancient toy – a kaleidoscope, I think everyone remembers since the childhood. You reflected ever as it works? All will probably seem that simply, but is far not so. Today I will show as it is possible to make a kaleidoscope with use JS and CSS. Quite probably that the total example will work not in all browsers, but the demo will be pleasant enough to try.
万花筒与jQuery。 今天，我们继续CSS课程。 让我们记住一个古老的玩具–万花筒，我想每个人都记得小时候。 您是否曾经反思过？ 所有人似乎都可能看起来很简单，但事实并非如此。 今天，我将展示使用JS和CSS制作万花筒的可能性。 很有可能整个示例不能在所有浏览器上都可以正常工作，但是该演示足够令人愉快地尝试。
Here are sample and downloadable package:
以下是示例和可下载的软件包：
现场演示
[sociallocker]
[社交储物柜]
打包下载
[/sociallocker]
[/ sociallocker]
Ok, download the example files and lets start coding !
好的，下载示例文件并开始编码！
步骤1. HTML (Step 1. HTML)
As usual, we start with the HTML.
和往常一样，我们从HTML开始。
This is our main page with our kaleidoscope.
这是我们万花筒的主页。
index.html (index.html)
<link rel="stylesheet" href="css/main.css" type="text/css" media="all" />
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/main.js" type="text/javascript"></script>
<div class="example"><div class="kal_main"><div class="kal_cont"><div class="ks s1"><div class="ksc"></div></div><div class="ks s2"><div class="ksc"></div></div><div class="ks s3"><div class="ksc"></div></div><div class="ks s4"><div class="ksc"></div></div><div class="ks s5"><div class="ksc"></div></div><div class="ks s6"><div class="ksc"></div></div><div class="ks s7"><div class="ksc"></div></div><div class="ks s8"><div class="ksc"></div></div><div class="ks s9"><div class="ksc"></div></div><div class="ks s10"><div class="ksc"></div></div><div class="ks s11"><div class="ksc"></div></div><div class="ks s12"><div class="ksc"></div></div></div></div>
</div>
<link rel="stylesheet" href="css/main.css" type="text/css" media="all" />
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/main.js" type="text/javascript"></script>
<div class="example"><div class="kal_main"><div class="kal_cont"><div class="ks s1"><div class="ksc"></div></div><div class="ks s2"><div class="ksc"></div></div><div class="ks s3"><div class="ksc"></div></div><div class="ks s4"><div class="ksc"></div></div><div class="ks s5"><div class="ksc"></div></div><div class="ks s6"><div class="ksc"></div></div><div class="ks s7"><div class="ksc"></div></div><div class="ks s8"><div class="ksc"></div></div><div class="ks s9"><div class="ksc"></div></div><div class="ks s10"><div class="ksc"></div></div><div class="ks s11"><div class="ksc"></div></div><div class="ks s12"><div class="ksc"></div></div></div></div>
</div>
Our kaleidoscope will consist of 12 sectors settling down on a circle. Each sector represents a triangle at with background image, which will shifting by a mouse moving over these sectors. Each sector will represent the following code: <div class="ks s{X}"><div class="ksc"></div></div> where {X} – sector number
我们的万花筒将由12个扇区组成，它们位于一个圆圈内。 每个扇区代表一个带有背景图像的三角形，背景图像将通过鼠标在这些扇区上移动而移动。 每个扇区将代表以下代码：<div class =“ ks s {X}”> <div class =“ ksc”> </ div> </ div>其中{X} –扇区号
步骤2. CSS (Step 2. CSS)
Here are used CSS styles.
这是使用CSS样式。
css / main.css (css/main.css)
body{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0}
.example{background:#FFF;width:500px;height:500px;border:1px #000 solid;margin:20px auto;padding:20px;-moz-border-radius:3px;-webkit-border-radius:3px}
/* common kaleidoscope styles */
.kal_main{overflow:hidden;width:500px;height:500px;margin:auto}
.kal_cont{width:140%;height:140%;left:-20%;top:-20%;position:relative;margin:auto}
.kal_cont .ks{
-webkit-transform-origin:right top;-moz-transform-origin:right top;-o-transform-origin:right top;transform-origin:right top;
width:50%;height:50%;position:absolute;top:50%;left:0;z-index:10;overflow:hidden;
}
.kal_cont .ksc{
height:100%;width:100%;-webkit-transform:rotate(30deg);-moz-transform:rotate(30deg);-o-transform:rotate(30deg);transform:rotate(30deg);position:relative;-webkit-transform-origin:left top;-moz-transform-origin:left top;-o-transform-origin:left top;transform-origin:left top;left:100%;top:0;
background-image:url(../patterns/pic.jpg)
}
/* styles for each sector */
.kal_cont .s1 {-webkit-transform: rotate(-30deg);-moz-transform: rotate(-30deg);-o-transform: rotate(-30deg);transform: rotate(-30deg);
}
.kal_cont .s2 {-webkit-transform: rotate(30deg) matrix(-1,0,0,1,0,0);-moz-transform: rotate(30deg) matrix(-1,0,0,1,0,0);-o-transform: rotate(30deg) matrix(-1,0,0,1,0,0);transform: rotate(30deg) matrix(-1,0,0,1,0,0);
}
.kal_cont .s3 {-webkit-transform: rotate(30deg);-moz-transform: rotate(30deg);-o-transform: rotate(30deg);transform: rotate(30deg);
}
.kal_cont .s4 {-webkit-transform: rotate(90deg) matrix(-1,0,0,1,0,0);-moz-transform: rotate(90deg) matrix(-1,0,0,1,0,0);-o-transform: rotate(90deg) matrix(-1,0,0,1,0,0);transform: rotate(90deg) matrix(-1,0,0,1,0,0);
}
.kal_cont .s5 {-webkit-transform: rotate(90deg);-moz-transform: rotate(90deg);-o-transform: rotate(90deg);transform: rotate(90deg);
}
.kal_cont .s6 {-webkit-transform: rotate(150deg) matrix(-1,0,0,1,0,0);-moz-transform: rotate(150deg) matrix(-1,0,0,1,0,0);-o-transform: rotate(150deg) matrix(-1,0,0,1,0,0);transform: rotate(150deg) matrix(-1,0,0,1,0,0);
}
.kal_cont .s7 {-webkit-transform: rotate(150deg);-moz-transform: rotate(150deg);-o-transform: rotate(150deg);transform: rotate(150deg);
}
.kal_cont .s8 {-webkit-transform: rotate(210deg) matrix(-1,0,0,1,0,0);-moz-transform: rotate(210deg) matrix(-1,0,0,1,0,0);-o-transform: rotate(210deg) matrix(-1,0,0,1,0,0);transform: rotate(210deg) matrix(-1,0,0,1,0,0);
}
.kal_cont .s9 {-webkit-transform: rotate(210deg);-moz-transform: rotate(210deg);-o-transform: rotate(210deg);transform: rotate(210deg);
}
.kal_cont .s10 {-webkit-transform: rotate(270deg) matrix(-1,0,0,1,0,0);-moz-transform: rotate(270deg) matrix(-1,0,0,1,0,0);-o-transform: rotate(270deg) matrix(-1,0,0,1,0,0);transform: rotate(270deg) matrix(-1,0,0,1,0,0);
}
.kal_cont .s11 {-webkit-transform: rotate(270deg);-moz-transform: rotate(270deg);-o-transform: rotate(270deg);transform: rotate(270deg);
}
.kal_cont .s12 {-webkit-transform: rotate(330deg) matrix(-1,0,0,1,0,0);-moz-transform: rotate(330deg) matrix(-1,0,0,1,0,0);-o-transform: rotate(330deg) matrix(-1,0,0,1,0,0);transform: rotate(330deg) matrix(-1,0,0,1,0,0);
}
body{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0}
.example{background:#FFF;width:500px;height:500px;border:1px #000 solid;margin:20px auto;padding:20px;-moz-border-radius:3px;-webkit-border-radius:3px}
/* common kaleidoscope styles */
.kal_main{overflow:hidden;width:500px;height:500px;margin:auto}
.kal_cont{width:140%;height:140%;left:-20%;top:-20%;position:relative;margin:auto}
.kal_cont .ks{
-webkit-transform-origin:right top;-moz-transform-origin:right top;-o-transform-origin:right top;transform-origin:right top;
width:50%;height:50%;position:absolute;top:50%;left:0;z-index:10;overflow:hidden;
}
.kal_cont .ksc{
height:100%;width:100%;-webkit-transform:rotate(30deg);-moz-transform:rotate(30deg);-o-transform:rotate(30deg);transform:rotate(30deg);position:relative;-webkit-transform-origin:left top;-moz-transform-origin:left top;-o-transform-origin:left top;transform-origin:left top;left:100%;top:0;
background-image:url(../patterns/pic.jpg)
}
/* styles for each sector */
.kal_cont .s1 {-webkit-transform: rotate(-30deg);-moz-transform: rotate(-30deg);-o-transform: rotate(-30deg);transform: rotate(-30deg);
}
.kal_cont .s2 {-webkit-transform: rotate(30deg) matrix(-1,0,0,1,0,0);-moz-transform: rotate(30deg) matrix(-1,0,0,1,0,0);-o-transform: rotate(30deg) matrix(-1,0,0,1,0,0);transform: rotate(30deg) matrix(-1,0,0,1,0,0);
}
.kal_cont .s3 {-webkit-transform: rotate(30deg);-moz-transform: rotate(30deg);-o-transform: rotate(30deg);transform: rotate(30deg);
}
.kal_cont .s4 {-webkit-transform: rotate(90deg) matrix(-1,0,0,1,0,0);-moz-transform: rotate(90deg) matrix(-1,0,0,1,0,0);-o-transform: rotate(90deg) matrix(-1,0,0,1,0,0);transform: rotate(90deg) matrix(-1,0,0,1,0,0);
}
.kal_cont .s5 {-webkit-transform: rotate(90deg);-moz-transform: rotate(90deg);-o-transform: rotate(90deg);transform: rotate(90deg);
}
.kal_cont .s6 {-webkit-transform: rotate(150deg) matrix(-1,0,0,1,0,0);-moz-transform: rotate(150deg) matrix(-1,0,0,1,0,0);-o-transform: rotate(150deg) matrix(-1,0,0,1,0,0);transform: rotate(150deg) matrix(-1,0,0,1,0,0);
}
.kal_cont .s7 {-webkit-transform: rotate(150deg);-moz-transform: rotate(150deg);-o-transform: rotate(150deg);transform: rotate(150deg);
}
.kal_cont .s8 {-webkit-transform: rotate(210deg) matrix(-1,0,0,1,0,0);-moz-transform: rotate(210deg) matrix(-1,0,0,1,0,0);-o-transform: rotate(210deg) matrix(-1,0,0,1,0,0);transform: rotate(210deg) matrix(-1,0,0,1,0,0);
}
.kal_cont .s9 {-webkit-transform: rotate(210deg);-moz-transform: rotate(210deg);-o-transform: rotate(210deg);transform: rotate(210deg);
}
.kal_cont .s10 {-webkit-transform: rotate(270deg) matrix(-1,0,0,1,0,0);-moz-transform: rotate(270deg) matrix(-1,0,0,1,0,0);-o-transform: rotate(270deg) matrix(-1,0,0,1,0,0);transform: rotate(270deg) matrix(-1,0,0,1,0,0);
}
.kal_cont .s11 {-webkit-transform: rotate(270deg);-moz-transform: rotate(270deg);-o-transform: rotate(270deg);transform: rotate(270deg);
}
.kal_cont .s12 {-webkit-transform: rotate(330deg) matrix(-1,0,0,1,0,0);-moz-transform: rotate(330deg) matrix(-1,0,0,1,0,0);-o-transform: rotate(330deg) matrix(-1,0,0,1,0,0);transform: rotate(330deg) matrix(-1,0,0,1,0,0);
}
s1 – s12 – sectors. As you can see – each sector have own rotation and used matrix.
s1 – s12 –扇区。 如您所见–每个扇区都有自己的轮换和使用的矩阵。
步骤3. JS (Step 3. JS)
Here are necessary JS files to our project.
这是我们项目的必要JS文件。
js / main.js (js/main.js)
$(document).ready(function() {$(".kal_cont").each(function(i){$(this).mousemove(function(e) {$(this).find(".ksc").each(function(i){$(this).css({backgroundPosition: e.pageX+"px "+e.pageY+"px"});});});});
});
$(document).ready(function() {$(".kal_cont").each(function(i){$(this).mousemove(function(e) {$(this).find(".ksc").each(function(i){$(this).css({backgroundPosition: e.pageX+"px "+e.pageY+"px"});});});});
});
So, now we should teach our sample to move backgrounds of sectors while we moving our mouse. We will change background position. Hope this code pretty easy to understand.
因此，现在我们应该教我们的示例在移动鼠标的同时移动扇区的背景。 我们将更改背景位置。 希望这段代码很容易理解。
js / jquery.min.js (js/jquery.min.js)
This is just jQuery library file. No need to give full code of that file here. It always available in package
这只是jQuery库文件。 无需在此处提供该文件的完整代码。 始终以包装形式提供
步骤4.图片 (Step 4. Images)
Here are our used pattern (I using first image to current demo, but you can play with second pattern too – just change it in CSS file):
这是我们使用的模式(我在当前演示中使用了第一张图像，但您也可以使用第二种模式-只需在CSS文件中进行更改即可)：
现场演示
结论 (Conclusion)
Hope this is interesting article for today, and you play well with it :) Good luck!
希望今天这篇文章很有趣，并祝您玩得愉快:)祝您好运！
翻译自: https://www.script-tutorials.com/creating-kaleidoscope-using-jquery-and-css/
如何使用jQuery和CSS创建万花筒相关推荐
- jquery创建css_如何使用jQuery和CSS创建万花筒
jquery创建css Kaleidoscope with jQuery. Today we continue CSS lessons. Let's remember an ancient toy – ...
- html自定义标签提示,用简单的jquery+CSS创建自定义的a标签title提示tooltip_HTML/Xhtml_网页制作...
简介 用简单的jquery+CSS创建自定义的a标签title提示,用来代替浏览器默认行为.如图: Javascript代码 代码如下: $(function() { $("a[title] ...
- 使用jQuery和Pure.CSS创建一个可编辑的表格
使用开源组件真的可以容易又快速地为网站和app构建强大的前端元素.在本教程中,我会告诉你如何使用PureCSS和jQuery轻松地创建可编辑的表格. 如果想看教程演示的话,请点击这里查看. 开始 你要 ...
- html鼠标点击时的样式,鼠标点击输入框时高亮显示边框颜色【jquery和css实现】...
这里解释如何突出显示表单字段的边框颜色.背景颜色等,如焦点上的HTML输入文本框.输入密码.选择下拉菜单和文本区域,并在失去焦点时使用jquery和css使它们正常. 突出显示焦点上的边框颜色 突出显 ...
- jquery设置video的宽度_jQ效果：jQuery和css自定义video播放控件
下面介绍一下通过jquery和css自定义video播放控件. Html5 Video是现在html5最流行的功能之一,得到了大多数最新版本的浏览器支持.包括IE9,也是如此.不同的浏览器提供了不同的 ...
- jquery关于css,jQuery css操作
jQuery操作css的元素样式 1.访问匹配元素的样式属性 来个小案例: //宽高都是200px,背景颜色红色; 怎么获取div的属性值呢: $("#div").css(&quo ...
- 使用jQuery的.css()和.attr()方法设置元素left属性的注意点
今天在使用jQuery方法".css()"设置"ajax-loader.gif"的位置时出了点小状况,关键代码如下(为了简化,这里假定要给"ajax- ...
- 如何使用纯 CSS 创建翻牌动画
下面的示例向您展示了如何使用纯 CSS 创建翻牌动画. 作者:坚果 公众号:"大前端之旅" 华为云享专家,InfoQ签约作者,阿里云专家博主,51CTO博客首席体验官,开源项目GV ...
- [css] 用css创建一个三角形，并简述原理
[css] 用css创建一个三角形,并简述原理 width: 0;height: 0;margin: 100px auto;border-top: 50px solid transparent;bor ...
最新文章
- 基于K-gram的winnowing特征提取剽窃查重检测技术（概念篇）
- 《WCF揭秘》：欢迎大家来找我的茬！
- char 转为 int 类型
- WebAPi添加常用扩展方法及思维发散
- 原生android 全面屏,谷歌全面屏手机曝光！谷歌pixel2，安卓8.0+骁龙836！
- Android代码抄袭Java曝猛料 新证据出现
- 不超过20位的小数正则_意甲身价最贵的20位球星，国米多达7人超过尤文，夺冠成硬任务...
- 加载jsp页面报#{} is not allowed in template text
- oracle 查看白名单,oracle配置访问白名单教程
- 希望博客园可以开个邮件列表
- 【RLchina第二讲】 Foundations of Reinforcement Learning
- 在 ReactNative 的 App 中，集成 Bugly 你会遇到的一些坑
- MobileNetV3——论文翻译
- 精讲精练之图像分割经典算法——分水岭算法
- sgu-244 Height, Bisector and Median
- 现在开一间网吧还能挣钱么？
- Mac功夫:OS X 的300多个技巧和小窍门
- Prompt Engineering 入门（一）
- Zotero文献管理软件使用指南——进阶篇
- python wifi模块