JavaScript小效果

浅浅的花香味﹌ 2022-06-02 22:52 115阅读 0赞

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

LightBox效果实现：

\[html\] [view plain][] [copy][view plain]

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][view plain]

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][view plain]

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****>**

[view plain]: http://blog.csdn.net/weixin_36380516/article/details/54894599#