Home > Web Front-end > JS Tutorial > body text

Jquery implements grid binding template_jquery

WBOY
Release: 2016-05-16 16:17:29
Original
1137 people have browsed it

How can the homepage of the website not have any animation? I have used Flash As3 to switch pictures before, and the effect is very good, but it is troublesome and difficult to change. I have always wanted to make a picture switching effect myself, but I always thought it would be troublesome. I tried it out today and found that it is actually relatively simple. However, there is a small problem. In the incompatible mode of IE8, the style addition of a div with a transparent effect fails. However, I used Google and the IE8 compatibility test was ok.

Anyway, I recorded it for myself, so I won’t say much more. The js is not separated from the page, and no plug-ins are made. A website cannot have a few of these effects, so let’s implement them first. The final effect is still very impressive.

Page JS code

Copy code The code is as follows:



 
复制代码 代码如下:

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">

    图片切换
   
   
   

   

       

           
           
           
           
           
           
           
           
       

       
       

            测试介绍文件了啊

   



 css的实现

复制代码 代码如下:

.picMain
{
    margin: auto;
    overflow: hidden;
    width: 1000px;
    height: 400px;
    position: relative;
}
.picimg
{
    width: 10000px;
    height: 400px;
    background-color: #000000;
    position: absolute;
    top: 0px;
}
.picRemark
{
    position: absolute;
    width: 500px;
    height: 50px;
    bottom: 0px;
    left: 0px;
    color: #FFFFFF;
    text-indent: 2em;
}
.picRemark a
{
    color: #FFFFFF;
    text-decoration: none;
}
.picRemark a:hover
{
    text-decoration: underline;
}
.picaction
{
    position: absolute;
    width: 1000px;
    height: 50px;
    background-color: #000000;
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
    overflow: auto;
    bottom: 0px;
    left: 0px;
    text-align: right;
}
.picaction a
{
    border: 1px solid #C0C0C0;
    width: 30px;
    height: 30px;
    float: right;
    line-height: 30px;
    text-decoration: none;
    text-align: center;
    color: #FFFFFF;
    font-weight: bold;
    margin-top: 10px;
    display: block;
    margin-right: 10px;
}
.pic
{
    width: 1000px;
    height: 400px;
    float: left;
}
.picselect
{
    background-color: #919191;
}
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template