摘要: 在上一篇博文中使用了js实现了时钟的案例,在这篇博文中将介绍使用JqueryRotate插件简化时钟代码以及为时钟进行添加声音 使用JqueryRotate插件简化时钟 插件jqueryrotate优点 它可以实现旋转效果。jqueryrotate 支持所有主流浏览器,甚至包括 IE6,所以在兼容方 阅读全文
posted @ 2019-08-30 23:51 perfect* 阅读(783) 评论(0) 推荐(0)
摘要: 在上一篇博文中实现了秒针的转动,接下来需要进行实现分针的布局和旋转角度计算和时针的布局和旋转角度计算 时钟案例-分针的布局和旋转角度计算 实现的效果图: 实现该效果的css代码与HTML代码: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset=" 阅读全文
posted @ 2019-08-30 22:29 perfect* 阅读(495) 评论(0) 推荐(0)
摘要: 时钟案例-显示表盘 需要使用到的素材: 显示表盘的最终效果: 使用到的css: 使用到的HTML: 其中: 表示铺满整个div 时钟案例-秒针的布局 需要按f12细微的调节其位置,记得复制调整好的位置哦! 最终实现的效果: 实现该效果的css以及HTML: 时钟案例-秒针调整旋转原点-编写定时器秒针 阅读全文
posted @ 2019-08-30 17:47 perfect* 阅读(554) 评论(0) 推荐(0)
摘要: CSS实现网页元素的旋转 方式一:css方式 针对一个DOM,使用css并不能让其一直循环旋转,css只能使其旋转一定的角度: 因此使用js的代码实现一直旋转: 使用的js的代码如下,通过使用一个变量,每一秒转动10度: html 其中:使用了启动定时函数,第一个参数为调用的函数,第二个参数为间隔的 阅读全文
posted @ 2019-08-30 11:14 perfect* 阅读(759) 评论(0) 推荐(0)
$(function() { $('#cnblogs_post_body img').each(function() { let imgSrc = $(this).attr('src'); let year = parseInt(imgSrc.substr(imgSrc.indexOf('g')+1,4)); if(year >= 2022){ imgSrc += `?watermark/2/text/amlndWl5YW4=/font/5a6L5L2T/fontsize/15/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast`; $(this).attr('src', imgSrc) } }) })