JavaScript小效果

最新推荐文章于 2022-07-23 14:28:19 发布
最新推荐文章于 2022-07-23 14:28:19 发布
阅读量417 收藏 3
点赞数
分类专栏： JavaScript常用功能或效果
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37412958/article/details/78779823
版权

在学习一些JavaScript效果，做一些实现效果笔记，顺便整理一下思路。

LightBox效果实现：

 

[html] view plain copy

  1. <span style="font-size:18px;"><!DOCTYPE html>  
  2. <meta charset="utf-8">  
  3. <html>  
  4. <head>  
  5.     <title>Lightbox效果</title>  
  6.     <style type="text/css">  
  7.     .black_overlay{  
  8.         display: none;  
  9.         position: absolute;  
  10.         top: 0%;left: 0%;  
  11.         width: 100%;  
  12.         height: 100%;  
  13.         background-color: black;  
  14.         z-index: 1001;  
  15.         opacity: .70;  
  16.     }  
  17.     .white_content{  
  18.         display: none;  
  19.         position: absolute;  
  20.         top: 30%;  
  21.         left: 30%;  
  22.         width: 40%;  
  23.         height: 40%;  
  24.         padding: 16px;  
  25.         border: 16px solid orange;  
  26.         background-color: white;  
  27.         z-index: 1002;  
  28.         overflow: auto;  
  29.     }  
  30. </style>  
  31. </head>  
  32. <body>  
  33. <a href="javascript:void(0)"   
  34.     onclick="document.getElementById('light').style.display='block';  
  35.     document.getElementById('fade').style.display='block'">请单击这里</a>  
  36.   
  37. <div id="light" class="white_content">  
  38.     这里是lightbox的弹出框的内容  
  39. <a href="javascript:void(0)"   
  40.     onclick="document.getElementById('light').style.display='none';  
  41.     document.getElementById('fade').style.display='none'">关闭</a>  
  42. </div>  
  43. <div id="fade" class="black_overlay"></div>  
  44. </body>  
  45. </html></span>  

这个效果我用在了登录注册时，点击按钮跳出登录注册框，把登录注册代码剔除body标签放到显示弹出框内容的地方就可以了。当然，lightbox效果还有很多用途，这个就看需要了。

 

图片随鼠标移动放大效果

 

[html] view plain copy

  1. <span style="font-size:18px;"><!DOCTYPE html>  
  2. <meta charset="utf-8">  
  3. <html>  
  4. <head>  
  5.     <title>图片随鼠标移动放大效果</title>  
  6.     <style type="text/css">  
  7.         #demo img{  
  8.         width: 90px;  
  9.         height: 90px;  
  10.         border: 5px solid #f4f4f4;  
  11.     }  
  12.     #enlarge_img{  
  13.         position: absolute;  
  14.         display: none;  
  15.         z-index: 999;  
  16.         border: 5px solid #f4f4f4;  
  17.     }  
  18.     </style>  
  19. </head>  
  20. <body>  
  21.     <div id="demo">  
  22.         <img src="images/01.jpg" />  
  23.         <img src="images/02.jpg" />  
  24.         <img src="images/03.jpg" />  
  25.     </div>  
  26.     <div id="enlarge_img"></div>  
  27. </body>  
  28.     <script type="text/javascript">  
  29.         var demo=document.getElementById("demo");  
  30.         var gg=demo.getElementsByTagName("img");  
  31.         var ei=document.getElementById("enlarge_img");  
  32.         for(i=0;i<gg.length;i++){  
  33.             var ts=gg[i];  
  34.             ts.onmousemove=function(event){  
  35.                 event=event||window.event;  
  36.                 ei.style.display="block";  
  37.                 ei.innerHTML='<img src="'+this.src+'" />';  
  38.                 ei.style.top=document.body.scrollTop+event.clientY+10+"px";  
  39.                 ei.style.left=document.body.scrollLeft+event.clientX+10+"px";  
  40.             }  
  41.             ts.onmouseout=function(){  
  42.                 ei.innerHTML="";  
  43.                 ei.style.display="none";  
  44.             }  
  45.             ts.onclick=function(){  
  46.                 window.open(this.src);  
  47.             }  
  48.         }  
  49.     </script>  
  50. </html></span>  

 

这个一般用于网页上的图片查看图片细节

图片轮显效果

 

[html] view plain copy

  1. <span style="font-size:18px;"><!DOCTYPE html>  
  2. <meta charset="utf-8">  
  3. <html>  
  4. <head>  
  5.     <title>制作简单的图片轮显效果</title>  
  6.     <script>  
  7.         var n=1;  
  8.         function changePic(m){  
  9.             return n=m;  
  10.         }  
  11.         function change(){  
  12.             var myImg=document.getElementById("s1")  
  13.             myImg.src="images/0"+n+".jpg";  
  14.             if(n<5)n++;  
  15.             else n=1;  
  16.         }  
  17.     </script>  
  18. </head>  
  19.   
  20. <body onload="setInterval(change,2000);">  
  21. <img src="images/01.jpg" width="200" id="s1" />  
  22. <div>  
  23.     <a href="#" onclick="changePic(1)">第一幅图</a>  
  24.     <a href="#" onclick="changePic(2)">第二幅图</a>  
  25.     <a href="#" onclick="changePic(3)">第三幅图</a>  
  26.     <a href="#" onclick="changePic(4)">第四幅图</a>  
  27.     <a href="#" onclick="changePic(5)">第五幅图</a>  
  28. </div>  
  29. </body>  
  30. </html></span>  
Alvin_扣扣953821815
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript小效果
liaojuajun的博客
09-28 309
1.获得和设置行内样式 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{ padding:0; margin: 0; } #btn{ margin: ...
javascript效果javascript效果
05-30
javascript效果javascript效果javascript效果javascript效果
javascript特效
04-25
一些简单常用的js特效，JS特效就是网页中实现的特殊效果或者特殊的功能的一种技术，是用网页脚本(javascript)来编写制作动态特殊效果，比如图片切换，渐变等等，它为网页活跃了网页的气氛，有时候会起到一定的亲切力。
JS实现图片翻书效果
chenbinqq164的专栏
12-08 3047
http://www.w3.org/1999/xhtml">JS实现图片翻书效果-懒人图库#center { LEFT: 50%; POSITION: absolute; TOP: 50%}#DHTMLBOOK { BACKGROUND: #000; LEFT: -210px; VISIBILITY: hidden; WIDTH: 420px; POSITION: relative; TOP: -
JavaScript小效果的实现（笔记）
weixin_34061555的博客
02-06 182
在学习一些JavaScript效果，做一些实现效果笔记，顺便整理一下思路。 LightBox效果实现： <!DOCTYPE html> <meta charset="utf-8"> <html> <head> <title>Lightbox效果</title> <sty...
JavaScript实现效果
Mr顺
12-13 1489
JavaScript实现效果动态文字三级联动时间倒计时 动态文字 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <input type="button" value="跑起来" onclick="dong();"> <inpu
js小效果
tarajk05的专栏
12-19 271
#main{ width: 300px; height: 400px; border: 2px solid gray; margin:0 auto; border-radius: 5px; padding: 10px; } #send{ width: 300px; height: 50px; border: 2px
网站设计常用技巧
lryain的专栏
06-27 784
 1.   oncontextmenu="window.event.returnValue=false"   将彻底屏蔽鼠标右键     no   可用于Table         2.     取消选取、防止复制         3.   onpaste="return   false"   不准粘贴         4.   oncopy="return   false;"   oncut=
javascript 四 简单效果案例
wwwfdfsf的博客
07-23 547
代码】javascript四简单效果案例。
[JS代码]做网页的一些技巧
ChneChen的Blog
06-20 1232
(http://blog.csdn.net/feng19821209/archive/2005/04/16/349756.aspx)Q: 实现双击自动滚屏. A: 将以下代码添加到需要自动滚屏的页面上 var currentpos, timer; function initialize(){ timer = setInterval("scrollwindow()", 1); } func
javascript学习-原生javascript的小特效（简单的运动效果）
weixin_30266829的博客
10-18 180
前些日子看了个视频所以就模仿它的技术来为大家做出几个简单的JS小特效 一：运动特效（主要是通过改变元素的left,right,height,width,opacity来达到运动的效果） 我们今天做一个利用计时器来创建一个匀速运动的效果，代码很简单。 1:首先我们先写出HTML的结构 <div id="div1"> <span id="share">shar...
JavaScript实现简单的弹窗效果
11-20
本文实例为大家分享了JavaScript实现弹窗效果的具体代码，供大家参考，具体内容如下 使用css动画效果实现弹窗缓慢弹出和收回。 使用JavaScript实现定时弹出定时收回。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>简单弹窗</title> <style> * { margin: 0; padding: 0; } .pop { width: 400px; height: 300px; posi
javascript经典效果
10-05
刚刚从网上下载下来的 ，这些是网友整理的 javascript经典效果，比较像我这样的新手 ^_^
小效果
weixin_30871293的博客
01-13 71
1 全选：<input type="button" id="All" value="全选" /><br /> 2 不选<input type="button" id="uncheck" value="不选" /><br /> 3 反选<input type="button" id="othercheck" value="反选" /&g...
javascript一些效果
做最不无聊的IT人
02-18 141
软件序列号式的输入框：   &lt;script for="T" event="onkeyup"&gt; if(value.length==3)document.all[event.srcElement.sourceIndex+1].select(); &lt;/script&gt; &lt;input name="T" size="5" maxlength="3"&a
js小效果-简易计算器
weixin_30346033的博客
11-15 54
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <script> window.onload=function(){ var oTxt1=document....
javascript常用小例子
01-10 167
1．让文字不停地滚动    　　＜MARQUEE＞滚动文字＜/MARQUEE＞    2．记录并显示网页的最后修改时间    　　＜script language=Javascript＞  　　document.write("最后更新时间: " + document.lastModified + "")  　　＜/script＞    3．关闭当前窗口    　　＜a...
关于css的小效果
xiabenshu的博客
04-27 115
实现一个双下划线字体 element.style { border-bottom: solid 1px gray; border-top: solid 1px gray; width: 13rem; /* margin: auto; */ margin-left: auto; margin-right: auto; padding: 0.5r...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值