Native JS to achieve blinds special effects
|
This article shares a blinds special effect implemented with native JS, the effect is as follows:
The code implementation is as follows, you are welcome to copy and paste.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Native JS to achieve blinds special effects</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
#box {
width: 562px;
padding: 10px 24px 20px;
background: #EACFCF;
overflow: hidden;
margin: 20px auto 0;
}
.left {
width: 266px;
float: left;
}
.right {
width: 266px;
float: right;
}
#box h2 {
height: 38px;
border-bottom: 1px solid #D2A1A1;
padding-left: 20px;
}
#box h2 strong {
float: left;
line-height: 38px;
color: #885050;
font-weight: normal;
}
#box h2 a {
float: right;
width: 52px;
height: 14px;
font-size: 12px;
text-indent: 10px;
color: #fff;
line-height: 12px;
font-weight: normal;
margin-top: 10px;
}
#box li {
height: 30px;
position: relative;
border-bottom: 1px dashed #D1A1A1;
}
#box li div,
#box lip {
height: 30px;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
#box lip {
background: #fff;
opacity: 0;
filter:alpha(opacity=0);
}
#box li div a,
#box li div span {
line-height: 30px;
font-size: 12px;
height: 30px;
}
#box li div a {
float: left;
padding-left: 20px;
color: #7F5454;
width: 172px;
overflow: hidden;
}
#box li div span {
padding-right: 10px;
float: right;
color: #CF9494;
}
</style>
<script type="text/javascript">
window.onload = function () {
var oBox = document.getElementById("box");
var aLi = document.getElementsByTagName('li');
var i = 0;
for (i = 0; i < aLi.length; i++) {
var oP = aLi[i].getElementsByTagName('p')[0];
oP.iAlpha = 0;
oP.time = null;
aLi[i].onmouseover = function () {
var oP = this.getElementsByTagName('p')[0];
oP.time ? clearInterval(oP.time) : "";
oP.style.opacity = 1;
oP.style.filter = "alpha(opacity=100)";
oP.iAlpha = 100;
}
aLi[i].onmouseout = function () {
starmove(this.getElementsByTagName('p')[0]);
};
}
};
function starmove(obj) {
obj.time ? clearInterval(obj.time) : "";
obj.time = setInterval(function () { domove(obj); }, 14);
}
function domove(obj) {
var iSpeed = 5;
if (obj.iAlpha <= iSpeed) {
clearInterval(obj.time);
obj.iAlpha = 0;
obj.time = null;
} else {
obj.iAlpha -= iSpeed;
}
obj.style.opacity = obj.iAlpha / 100;
obj.style.filter = "alpha(opacity=" + obj.iAlpha + ")";
}
</script>
</head>
<body>
<div id="box">
<div class="left">
<h2>
<strong>Latest News</strong>
<a>more</a>
</h2>
<ul>
<li>
<p></p>
<div>
<a>Course FAQs</a>
<span>20110329</span>
</div>
</li>
<li>
<p></p>
<div>
<a>JS course completion criteria</a>
<span>20110327</span>
</div>
</li>
<li>
<p></p>
<div>
<a>Web effects collection (updated daily)</a>
<span>20110322</span>
</div>
</li>
<li>
<p></p>
<div>
<a>Class Location</a>
<span>20110319</span>
</div>
</li>
<li>
<p></p>
<div>
<a>CSS course latest start time</a>
<span>20110319</span>
</div>
</li>
<li>
<p></p>
<div>
<a>Latest JavaScript course start time</a>
<span>20110319</span>
</div>
</li>
<li>
<p></p>
<div>
<a>Zero-basic web design course</a>
<span>20110319</span>
</div>
</li>
</ul>
</div>
<div class="right">
<h2>
<strong>What's new</strong>
<a>more</a>
</h2>
<ul>
<li>
<p></p>
<div>
<a>3D spherical tag cloud effect implemented by JavaScript</a>
<span>20110329</span>
</div>
</li>
<li>
<p></p>
<div>
<a>Live Recording of Saturday's JavaScript Meetup</a>
<span>20110327</span>
</div>
</li>
<li>
<p></p>
<div>
<a>Ali front-end interview questions</a>
<span>20110319</span>
</div>
</li>
<li>
<p></p>
<div>
<a>Brief Analysis of the Implementation Principles of Google Maps Front-end (Part 1)</a>
<span>20110319</span>
</div>
</li>
<li>
<p></p>
<div>
<a>Windows Calculator (Simplified Version) Homework Exercise</a>
<span>20110319</span>
</div>
</li>
<li>
<p></p>
<div>
<a>Accordion easing effect</a>
<span>20110319</span>
</div>
</li>
<li>
<p></p>
<div>
<a>3D spherical tag cloud effect implemented by JavaScript</a>
<span>20110319</span>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
<<: HTML table markup tutorial (5): light border color attribute BORDERCOLORLIGHT
>>: Detailed explanation of how to query fields containing '%' in MySQL like (ESCAPE usage)
Recommend
Detailed tutorial on how to compile and install mysql8.0.29 in CentOS8 deployment LNMP environment
1. Prerequisites Since I have installed it severa...
Use h1, h2, and h3 tags appropriately
In the process of making web pages, it is inevita...
HTML table tag tutorial (33): cell vertical alignment attribute VALIGN
In the vertical direction, you can set the cell a...
Detailed explanation of the implementation steps of MySQL dual-machine hot standby and load balancing
The MySQL database does not have an incremental b...
jQuery realizes the sliding effect of drop-down menu
When we make a web page, sometimes we want to hav...
MySQL 8.0.15 installation and configuration graphic tutorial
This article records the installation and configu...
Learn how to write neat and standard HTML tags
Good HTML code is the foundation of a beautiful w...
CSS3 uses scale() and rotate() to achieve zooming and rotation
1. scale() method Zoom refers to "reducing&q...
Pure CSS to achieve candle melting (water droplets) sample code
Achieve results Implementation ideas The melting ...
Example of how to use CSS3 to layout elements around a center point
This article introduces an example of how CSS3 ca...
How to correctly create MySQL indexes
Indexing is similar to building bibliographic ind...
Dockerfile text file usage example analysis
Dockerfile is a text file used to build an image....
Solve the problem of garbled Chinese characters in Mysql5.7
When using MySQL 5.7, you will find that garbled ...
Detailed explanation of MySQL delayed replication library method
Simply put, delayed replication is to set a fixed...
Solution to the ineffective margin of div nested in HTML
Here's a solution to the problem where margin...