一路阳光竞价托管一路阳光竞价托管

一路阳光竞价托管 - 一路阳光,愿您的生活充满阳光

专业竞价推广/代运营/竞价托管/微信加粉,从事竞价推广七年,精通百度、搜狗、360、神马 4大搜索平台以及今日头条、广点通等信息流账户的管理操作

SEM文章总数623 竞价托管访问量56620

「富阳网络推广」基于CSS3+jQuery的动态时钟制作过程

「富阳网络推广」基于CSS3+jQuery的动态时钟制作过程

  hi,大家好,我叫toby pitman,chris曾邀请我写一篇关于最近我在论坛上发的一些实验成果,于是当我在webkit blog和saw an article上看一些新的css3动画时,有一个rotate属性深深地吸引了我的眼球,于是就开始着手写这篇文章了。我当时就在思考什么东西可以在网页上旋转呢(貌似gif动画图片可以),于是我有个点子--是的,时钟不就是可以旋转的吗!开始!

  transform:rotate是css3的一个新特性,它可以让你...当然,是实现一些旋转的玩意儿啦。transform也可以让你在网页上实现缩放、倾斜、移动对象。而且上面的这些都可以通过transition属性实现动画效果。

  听起来很熟悉么?是的,当然,和以前一样,我们将依然结合jquery来实现页面上元素的动画效果。因为使用jquery可以方便的操作css从而 得到动画效果。联想一下a:hover效果,你就会对如何实现这个例子产生一些想法。它远没有jquery和mootools那么强大,但已经足够做一些 很酷的东西了。

  首先,我们需要准备一些图片来作为时钟的图形界面。这里我们用一张钟盘图片和三张指针图片,其中运动的指针我们是用photoshop切割出来的600×30的图片,并将其竖直放置。然后利用rotate属性让其绕中心点旋转。当然,指针使用的是透明的png格式图片。

  这个时钟的html标记非常简单,只用了ul列表,每一个列表项(li)分别对应着3根运动指针,并且给其分配相应的id,代码如下:

  这个时钟的html标记非常简单,只用了ul列表,每一个列表项(li)分别对应着3根运动指针,并且给其分配相应的id,代码如下:

  css代码也是非常简单,由于3根运动指针尺寸相同,并且是从同一个位置开始运动,所以我们为了简化代码就将它们的代码写在一起了。为了能让时钟内部的指 针实现绝对定位(absolutely position)我们将ul设成相对定位(relativeposition)。

  你也许会将php中的时间和日期等同起来,刚开始的时候我的第一想法也是利用php,然而后来我发现javascript中也有构造日期和时间的功能函数。只是需要注意的是javascript获取的是本地时间并不是服务器时间。

  首先我将用date()函数获取日期信息并将其赋给一个变量,我们可以通过getseconds(), getminutes()或gethours()获取3根指针的信息,如下代码:

  接下来我将计算每根指针的角度。我们将每一周分成60等分,所以只要360/60就得到每一份是6,这意味着每一秒钟或者每一分钟指针都将前进6度的角度。我们将计算结果保存到另一个变量中去,代码如下:

  对于时针的情况有点不同,因为每一个周期是12等分的,所以每小时时针前进的角度是30度:360/12=30。既然这样如果时针按这个增量运动那就简单 了,可是却不是这么简单的。它要根据分针的值运动一小段距离,比如3:30的话时针会在3和4的中间,然而我们该如何来做呢,请看下面的代码:

  基本上我们需要在hour后面加上分钟数除以2的值,该值在0.5到29.5之间(rotate属性支持浮点小数值)。

  请注意这里我们用了javascript中的setinterval函数,这个函数每秒钟都会执行一次。一些获取时间的变量也在这个函数中,所以每次调用都会自动更新时间值。

本文'「富阳网络推广」基于CSS3+jQuery的动态时钟制作过程'的Tag标签:我们 指针 代码

一路阳光竞价托管网站内容来源:https://www.semliwei.com/seo/455.html

一路阳光竞价托管
上一篇: 「seo培训公司」不要为了优化而优化,否则过度优化
下一篇: 「萍乡网络营销」怎样制作一个成功的营销型网站?