jquery 背景跟随滑动_jQuery的超酷背景图像滑动效果

最新推荐文章于 2022-11-25 19:36:17 发布

cuketao5066

最新推荐文章于 2022-11-25 19:36:17 发布

阅读量232

点赞数

文章标签： html css css3 js less ViewUI

原文链接：https://www.script-tutorials.com/cool-background-image-sliding-effect-with-jquery/

版权

jquery 背景跟随滑动

Cool Background Image Sliding effect with jQuery. Today I am going to show you how to create sliding image cell effect. This is will something like small photo gallery. I prepared 3 demos for you with different effects. Please pay attention that our demo will work in browsers that support used CSS3 properties.

带有jQuery的超酷背景图像滑动效果。今天，我将向您展示如何创建滑动图像单元效果。这就像小型照相馆。我为您准备了3个具有不同效果的演示。请注意，我们的演示将在支持二手CSS3属性的浏览器中运行。

现场演示

[sociallocker]

[社交储物柜]

下载结果

[/sociallocker]

[/ sociallocker]

Ok, download the example files and lets start coding !

好的，下载示例文件并开始编码！

步骤1. HTML (Step 1. HTML)

Here are full html code of our result. For our demonstration I use 5 photos – same amount of ‘navigation’ elements you can see here too.

这是我们结果的完整html代码。在我们的演示中，我使用了5张照片-同样可以在此处看到的“导航”元素数量。

index.html (index.html)


<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <title>Cool Background Image Sliding effect with jQuery | Script Tutorials</title>
        <link href="css/main.css" rel="stylesheet" type="text/css" />
        <!--[if lt IE 9]>
          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script src="js/main.js"></script>
    </head>
    <body>
        <div class="container" id="container">
            <ul class="nav">
                <li id="m1">Pic 1</li>
                <li id="m2">Pic 2</li>
                <li id="m3">Pic 3</li>
                <li id="m4">Pic 4</li>
                <li id="m5">Pic 5</li>
            </ul>
            <ul class="grid">
                <li id="g1">
                    <div class="d1"></div>
                    <div class="d2"></div>
                    <div class="d3"></div>
                    <div class="d4"></div>
                    <div class="d5"></div>
                </li>
                <li id="g2">
                    <div class="d1"&

最低0.47元/天解锁文章

cuketao5066

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery 背景跟随滑动_jQuery的超酷背景图像滑动效果

jquery 背景跟随滑动Cool Background Image Sliding effect with jQuery. Today I am going to show you how to create sliding image cell effect. This is will something like small photo gallery. I prepared 3 demos...
复制链接

扫一扫