javascript显示倒影图片

最新推荐文章于 2021-06-03 08:59:08 发布
最新推荐文章于 2021-06-03 08:59:08 发布
阅读量1k 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript generator div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sz_bdqn/article/details/2779086
版权
 设计思路
  • 使用垂直翻转滤镜(即flipV)使图片产生倒影效果；
  • 使用wave滤镜使倒影产生静态波纹效果；
  • 再通过定时器不断改变波纹的偏移量phase，使倒影产生动态波纹，有如水波在不断变化。
    1. <HTML>
    3. <HEAD>
    4. <META name="GENERATOR" content="Microsoft FrontPage 5.0">
    5. <META name="ProgId" content="FrontPage.Editor.Document">
    6. <TITLE>指针式时钟</TITLE>
    7. </HEAD>
    9. <BODY οnlοad="clock()">
    11. <SCRIPT LANGUAGE="JavaScript">
    12. var S = '......';   S = S.split('');//构成秒针的圆点
    13. var M = '.....';    M = M.split('');//构成分针的圆点
    14. var H = '....';     H = H.split('');//构成时针的圆点
    15. var Ybase = 8;  //构成秒、分和时针的圆点之间的间隔距离(Y轴)
    16. var Xbase = 8;  //构成秒、分和时针的圆点之间的间隔距离(X轴)
    17. var dots = 12;  //钟盘上的小时刻度数,通常为12,即1,2,3,...,12
    18. for (var i = 0; i < dots; i++)
    19. {//将小时刻度值(即1,2,3,...,12)分别放入各自的<DIV>块中,且其id属性相同,即dot_Digits
    20.     document.write('<DIV id="dot_Digits" style="position:absolute;width:30px;height:30px;font-size:10px;color:black;text-align:center;padding-top:10px">'+(i+1)+'</DIV>');
    21. }
    22. for (i = 0; i < S.length; i++)
    23. {//将构成秒针的圆点分别放入各自的<DIV>块中,且其id属性相同,即s_dots
    24.     document.write('<DIV id=s_dots style="position:absolute;width:2px;height:2px;font-size:2px;background:red"></DIV>');
    25. }
    26. for (i = 0; i < M.length; i++) 
    27. {//将构成分针的圆点分别放入各自的<DIV>块中,且其id属性相同,即m_dots
    28.     document.write('<DIV id=m_dots style="position:absolute;width:2px;height:2px;font-size:2px;background:black"></DIV>');
    29. }
    30. for (i = 0; i < H.length; i++)
    31. {//将构成时针的圆点分别放入各自的<DIV>块中,且其id属性相同,即h_dots
    32.     document.write('<DIV id=h_dots style="position:absolute;width:2px;height:2px;font-size:2px;background:black"></DIV>');
    33. }
    35. function clock()
    36. {//显示指针式时钟
    37.     var time = new Date ();
    38.     var secs = time.getSeconds();
    39.     var mins = time.getMinutes();
    40.     var hrs = time.getHours();
    41.     var Ypos = document.body.scrollTop +80;  //把时钟中心设置为距可视区顶边 80 pixel
    42.     var Xpos = document.body.scrollLeft +100;//把时钟中心设置为距可视区左边界 100 pixel
    43.     for (var i=0; i < dots; ++i)
    44.     {//根据新的时钟中心和各个小时刻度值的角度值,设置其新坐标
    45.         dot_Digits[i].style.pixelTop = Ypos -15 + 44 * Math.sin(-Math.PI/2+2*Math.PI*(i+1)/12);
    46.         dot_Digits[i].style.pixelLeft = Xpos -15 + 44 * Math.cos(-Math.PI/2+2*Math.PI*(i+1)/12);
    47.     }
    48.     var sec = -Math.PI/2 + 2*Math.PI * secs/60;  //秒针角度
    49.     for (i=0; i < S.length; i++)
    50.     {//根据新的时钟中心和秒针角度,设置秒针上各个圆点的坐标值
    51.         s_dots[i].style.pixelTop = Ypos + i * Ybase * Math.sin(sec);
    52.         s_dots[i].style.pixelLeft = Xpos + i * Xbase * Math.cos(sec);
    53.     }
    54.     var min = -Math.PI/2 + 2*Math.PI * mins/60;  //分针角度
    55.     for (i=0; i < M.length; i++)
    56.     {//根据新的时钟中心和分针角度,设置分针上各个圆点的坐标值
    57.         m_dots[i].style.pixelTop = Ypos + i * Ybase * Math.sin(min);
    58.         m_dots[i].style.pixelLeft = Xpos + i * Xbase * Math.cos(min);
    59.     }
    60.     var hr = -Math.PI/2 + 2*Math.PI * (hrs+mins/60)/12;  //时针角度
    61.     for (i=0; i < H.length; i++)
    62.     {//根据新的时钟中心和时针角度,设置时针上各个圆点的坐标值
    63.         h_dots[i].style.pixelTop = Ypos + i * Ybase*Math.sin(hr);
    64.         h_dots[i].style.pixelLeft = Xpos + i * Xbase*Math.cos(hr);
    65.     }
    66.     setTimeout('clock()', 50);//定时
    67. }
    68. </SCRIPT>
    70. </BODY>
    72. </HTML>
sz_bdqn
关注
专栏目录
用javaScript实现钟表功能
wangjianq_bobo的博客
10-27 1045
用JavaScript实现简单的钟表功能，效果如下： 注：本代码只在Chrome浏览器中运行过，没有在IE浏览器中做过检测，给读者带来的不便敬请谅解。 var body_ = document.getElementsByTagName("body"); body_[0].style.background = 'black
js显示当前时间及其时钟显示
Luo_lung的博客
11-29 2590
1.弹窗显示，当前时间和日期： main.js var box=new Date(); alert("当前日期"+box.getFullYear()+"/"+box.getMonth()+"/"+box.getDay()); alert("现在时间"+box.getHours()+":"+box.getMinutes()+":"+box.getSeconds());
js做的带三个指针的时钟。
10-28
自己用js做的时钟，根据系统时间，分针、秒针、时针自动移动。使用了raphael.js库，使用这个库可以很容易地做出强大的矢量图形和动画。
javascript显示一个时钟
sz_bdqn的专栏
08-06 2822
 "GENERATOR" content="Microsoft FrontPage 5.0">"ProgId" content="FrontPage.Editor.Document">指针式时钟"clock()">"JavaScript">var S = ......;   S = S.split();//构成秒针的圆点 var 
HTML3d倒影效果,带图片倒影的jQuery响应式3D旋转木马插件
weixin_39953673的博客
06-03 187
mk-3Dcarousel是一款带图片倒影效果的响应式3D旋转木马jQuery插件。该旋转木马使用简单，可以生成非常漂亮的图片倒影效果，可以在所有最新版本的现代浏览器中正常工作。该旋转木马插件在小屏幕中会以另一种不同的风格进行图片展示。使用方法使用该3D旋转木马插件需要引入jQuery、mk-3Dcarousel.js和mk-3Dcarousel.css文件。HTML结构mk-3Dcarousel...
JS实现显示带倒影的图片横排居中放大展示特效实例【测试可用】
10-21
在本实例中，我们主要探讨如何使用JavaScript（JS）实现一个功能丰富的图片展示特效，包括带倒影的图片横排居中放大展示、点击图片切换以及通过左右按钮滑动切换的功能。这个特效对于网页设计和用户体验提升有显著...
图片倒影 js
08-27
通过js 写的图片倒影效果，只要引用reflection.js然后把img的class改成reflect就可以调用。十分简单，而且效果很突出。
js图片倒影显示幻灯片切换代码.zip
07-11
在这个“js图片倒影显示幻灯片切换代码”压缩包中，我们主要讨论的是如何利用JavaScript来实现一个具有图片倒影效果的幻灯片切换功能。 首先，幻灯片切换是网页设计中常见的元素，通常用于展示一组图片或内容，并...
JS图片倒影效果
林维杰的专栏
07-02 1522
特点：(由经典论坛flashlizi 翻译)（1）此js支持IE5.5+，Firefox1.5+，Opera9+，Safari等大部分浏览器，对于老版本的浏览器无任何影响。（2）使用简单方便。不需要其他程序的支持，外部调用js文件。然后在需要倒影效果的图片上添加：class="reflect"即可。（3）倒影自动渐变至背景色，效果自然。可支持jpg，gif，png等图片格式。IE还支持gi
javascript图片倒影特效处理
01-13
图片的几个倒影图片处理,都是图片的最基本处理
JavaScript实现一个数字时钟
前端攻城狮进阶之路
08-17 7217
&lt;html&gt; &lt;head&gt; &lt;script type="text/javascript"&gt; function startTime() { var today = new Date() var h = today.getHours() var m = today.g...
给图片添加图片的倒影
流星的博客
01-23 588
/** * reflection.js v1.5 * * Contributors: Cow http://cow.neondragon.net *               Gfx http://www.jroller.com/page/gfx/ *               Sitharus http://www.sitharus.com *               Andreas L
JavaScript 常用方法总结
weixin_30246221的博客
01-14 127
经常使用的 JS 方法，今天记下，以便以后查询 /* 手机类型判断 */ var BrowserInfo = { userAgent: navigator.userAgent.toLowerCase() isAndroid: Boolean(navigator.userAgent.match(/android/ig)), isIphone: Boolean(n...
javascript显示时钟
霸王棍专栏
05-15 2158
Date对象表示日期和时间。有四种定义方式：var t = new Date();var t = new Date(milliseconds);var t = new Date(datestring);一个能转化为日期的字符串。。var t = new Date(year,month,day,hours,minutes,seconds,ms);无标题文档var  timer
js实现时钟
hsn0755的专栏
12-26 606
function startTime(){var today=new Date()var h=today.getHours()var m=today.getMinutes()var s=today.getSeconds()// add a zero in front of numbersm=checkTime(m)s=checkTime(s)document.getElementById(txt
JavaScript实现图片倒影效果 – reflex.js
01-08
JavaScript给图片加倒影效果...原理：通过 canvas 重画图片，显示倒影效果 使用方法很简单： 首先当然要引用这个js： [removed][removed] 然后把初始化类 reflex 添加到对应的 img 标签类名里就可以了。 <im
JS实现图片倒影效果
06-22
js实现任何图片的倒影，无需再用复杂的PS做前期处理图片
用Javascript显示一个电子时钟
CodingIsFun
01-21 2160
<!DOCTYPE html> <html> <head> <style type="text/css" media="screen"> body { background: black; } #txt { position: absolute; top: 50%; left: 50%; transf...
Javascript（二）javascript时钟实现
热门推荐
一枝韩独秀的博客
08-05 1万+
时钟实现 实现这个时钟时间需要解决以下三个问题： 获得当前时间，并格式化 如何可以在页面中显示时间 让时间动起来 1、获得当前时间，并格式化 要获得当前时间，可以使用JavaSctipt的Date对象，默认构造函数会返回当前时间。存储日期为自 1970 年 1 月 1 日 00:00:00以来的毫秒数。 setXxx 这些方法用于设置时间和日期值 getXxx 这些方法用于获取时间和...
动态实现树形菜单（使用dtree控件）
sz_bdqn的专栏
02-26 1万+
动态生成树型菜单数据库脚本：use mastergoif exists (select * from sysdatabases where name = tree) drop database treegocreate database treeon(  Name = tree_data,                  --主数据文件的逻辑名称     FileName = 
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值