jquery创建css_如何使用jQuery和CSS创建万花筒

最新推荐文章于 2023-03-14 21:42:58 发布
最新推荐文章于 2023-03-14 21:42:58 发布
阅读量188 收藏
点赞数
文章标签： css html js javascript jquery ViewUI
原文链接：https://www.script-tutorials.com/creating-kaleidoscope-using-jquery-and-css/
版权

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文件中进行更改即可)：

kaleidoscope pattern 1
万花筒图案1
kaleidoscope pattern 2
万花筒图案2
现场演示

结论 (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

cuketao5066
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery可拖拽3D万花筒旋转特效
06-24
jQuery可拖拽3D万花筒旋转特效是一款通过jQuery跟CSS3 transform来实现在用户鼠标按下时，万花筒图片可以跟随鼠标进行3D旋转动画。
jquery和CSS3带倒影的3D万花筒旋转动画特效特效代码
03-20
这是一款使用jQuery和CSS3来制作的炫酷的带倒影的3D万花筒旋转动画特效。该3D万花筒特效通过简单的CSS transform和jquery代码来实现在用户鼠标按下时，万花筒图片可以跟随鼠标进行3D旋转动画。 使用方法 在页面底部...
（附源码）springboot万花筒 毕业设计 345600
Q_3461074420的博客
08-28 353
本设计主要实现集人性化、高效率、便捷等优点于一身的万花筒管理系统 ，完成用户管理、站点管理、内容管理、商城管理、订单管理等功能模块。系统通过浏览器与服务器进行通信，实现数据的交互与变更。本系统通过科学的管理方式、便捷的服务提高了工作效率，减少了数据存储上的错误和遗漏。万花筒管理系统 使用Java语言，采用基于 MVVM模式的springboot技术进行开发，数据方面主要采用的是微软的MySQL关系型数据库来作为数据存储媒介，配合前台HTML+CSS 技术完成系统的开发。......
爱奇艺低代码引擎：千变万化、快速搭建的万花筒
zz_jesse的博客
05-15 340
来源 |InfoQ编辑 | 李慧文排版 | LowCode低码时代React Native 是具有高动态化能力的跨平台开发框架，低代码是近几年非常热门的趋势，而爱奇艺早在 2018 年就尝试将二者结合，开发出了万花筒引擎和专题页低代码平台，用于快速搭建爱奇艺 App 中的各类内容展示型页面，赋能不会写代码的内容运营和编辑们，针对热门的综艺和影视剧内容，用很少的人力投...
html5 3D万花筒无限延伸动画js特效
ICode联盟
03-14 150
一款酷炫的html5基于canvas绘制3D万花筒无限延伸动画特效，还有各种颜色的模糊碎片粒子动画伴随。
用css3制作旋转加载动画的几种方法
04-11 385
以WebKit为核心的浏览器，例如Safari和Chrome，对html5有着很好的支持，在移动平台中这两个浏览器对应的就是IOS和Android。最近在开发一个移动平台的web app，那么就有机会利用css3去实现一些很酷的效果，这些效果原来更多的是利用图片来实现。最近的一个改进就是利用css3制作旋转加载动画。以下将分别介绍几种实现的方案。 方案1，图片辅助 传统做法是直接用动...
jquery css3 3D万花筒图片相册展示特效
11-12
jquery css3 3D万花筒图片相册展示特效
jquery和CSS3带倒影的3D万花筒旋转动画特效
12-12
这是一款使用jquery和CSS3来制作的炫酷的带倒影的3D万花筒旋转动画特效。该3D万花筒特效通过简单的CSS transform和jquery代码来实现在用户鼠标按下时，万花筒图片可以跟随鼠标进行3D旋转动画。
jquery和CSS3带倒影的3D万花筒旋转动画特效源码.zip
11-17
jquery和CSS3带倒影的3D万花筒旋转动画特效源码.zip
kaleidoscope:嵌入式，轻巧的360º视频图像查看器
05-14
万花筒 嵌入式，轻量级，无依赖的360º视频/图像查看器 例子 可以在examples/文件夹中找到示例代码。 * * 由于CORS限制，HLS和Dash示例无法在旧版Safari和iOS上运行 用法 获取代码： $ npm install kaleidoscopejs 将脚本添加到您的页面： < script src =" node_modules/kaleidoscopejs/dist/kaleidoscope.min.js " > </ script > 或使用您喜欢的捆绑器导入库。 影片 var viewer = new Kaleidoscope . Video ( { source : 'equirectangular-video.mp4' , containerId : '#target' } ) ; viewer . render ( ) ; 图片 var viewer
3D图片万花筒精彩展示特效jquery
09-12
3D图片万花筒精彩展示特效jquery，一个展现3D效果的特效，对展示图片有非常好的作用，同时也是新手学习的好源码，我在里面都清楚的做了标注。
HTML5 Canvas万花筒动画特效.zip
07-04
HTML5 Canvas万花筒动画特效是一款基于Canvas绘制的酷炫万花筒发散动画特效。
css3图片3D万花筒形状布局代码
09-08
css3图片3D万花筒形状布局代码
js时钟代码
timeless的博客
08-08 697
JavaScript Clock html, body { margin: 0; padding: 0; background: rgba(165,208,104,.75); } #clock { width: 200px; height: 200px; border-radius: 115px; border: 15px solid #
【CSS3+JQuery】实现万花筒旋转效果
qq_37086980的博客
12-23 288
描述:使用css3动画使四个盒子旋转,每隔500ms 随机一个div 改变成随机背景色 rgb(255, 255, 255) 技术点 1.CSS3旋转 2.随机改变颜色 代码实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale
CSS3+jquery实现图片万花筒3D旋转动画特效
柚稚的博客
11-29 1613
代码示意： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS3图片万花筒3D旋转动画特效</title> <script src="js/jquery-1.11.0.min.js" type="text/javascript"><...
JQuery——添加CSS样式
奔跑的程序员
06-25 9604
在原生的JavaScript中，可以用style属性为CSS添加样式var className=document.getElementsByClassName("box");className.style.backgroundColor="red";在jQuery中使用JQ提供的CSS()方法添加样式$(".box").css("backgroundColor","red");          ...
Jquery 添加属性、添加class、添加Css
热门推荐
【程序员不弃】的博客
03-19 4万+
一.设置属性：方式一  jQuery 代码:$("img").attr({ src: "test.jpg", alt: "Test Image" }方式二：jQuery代码--键值对$("img").attr("src","test.jpg");方式三： jQuery 代码--函数式:$("img").attr("title", function()
使用jquery和css设置烟花
最新发布
03-26
不过，以下代码可作为参考，使用CSS和jQuery来实现烟花效果。 HTML代码： ``` <div class="firework"></div> ``` CSS代码： ``` .firework { position: fixed; width: 10px; height: 10px; border-radius: ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值