自定義滾動條配合滑鼠滾輪demo

来源:http://www.cnblogs.com/wangxiaoshuai0401/archive/2016/10/27/6005356.html
-Advertisement-
Play Games

<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"/> <link href="css/reset.css" rel="stylesheet" type="text/css"> <style type="text/c ...


<!DOCTYPE html>

<html>

<head>

    <title></title>

    <meta charset="utf-8"/>

    <link href="css/reset.css" rel="stylesheet" type="text/css">

 

    <style type="text/css">

 

        body

        {

            font-size: 14px;

            font-family: Microsoft YaHei, Tahoma, Geneva, sans-serif;

            background: #111;

        }

 

        #content ul

        {

            width: 960px;

            margin: 150px auto;

            padding: 60px 0;

        }

 

        #content ul li

        {

            margin-right: 20px;

            width: 225px;

            height: 180px;

            float: left;

        }

 

        #content ul li:last-child

        {

            margin-right: 0;

        }

 

        #content ul li a

        {

            position: relative;

            display: block;

            width: 100%;

            height: 100%;

            /*舞臺(動畫元素的父容器)perspective*/

            -webkit-perspective: 800px;

            -moz-perspective: 800px;

 

        }

 

        #content ul li a > div

        {

            position: absolute;

            left: 0;

            height: 0;

            width: 100%;

            height: 100%;

            color: #fff;

            /*動畫元素transform-style*/

            -webkit-transform-style: preserve-3d;

            -moz-transform-style: preserve-3d;

            -webkit-transition: .8s ease-in-out ;

            -moz-transition:  .8s ease-in-out ;

            /*動畫元素背後設置為hidden*/

            -webkit-backface-visibility: hidden;

            -moz-backface-visibility: hidden;

        }

 

        #content ul li a div:first-child

        {

            /*

            繞y軸旋轉

            */

            -webkit-transform: rotateY(0);

            -moz-transform: rotateY(0);

            z-index: 2;

        }

 

        #content ul li a div:last-child

        {

            background: url("images/bg.jpg") no-repeat 0 0;

            -webkit-transform: rotateY(180deg);

            -moz-transform: rotateY(180deg);

            z-index: 1;

        }

 

        #content ul li a:hover div:first-child

        {

            -webkit-transform: rotateY(-180deg);

            -moz-transform: rotateY(-180deg);

        }

 

        #content ul li a:hover div:last-child

        {

            -webkit-transform: rotateY(0);

            -moz-transform: rotateY(0);

        }

 

        #content ul li a div h3

        {

            margin: 0 auto 15px;

            padding: 15px 0;

            width: 200px;

            height: 16px;

            line-height: 16px;

            font-size: 14px;

            text-align: center;

            border-bottom: 1px #fff dashed;

        }

 

        #content ul li a div p

        {

            padding: 0 10px;

            font-size: 12px;

            text-indent: 2em;

            line-height: 18px;

        }

 

 

    </style>

</head>

<body>

 

 

<div id="content">

    <ul>

        <li>

            <a href="#" target="_blank">

                <div><img alt="" src="images/1.jpg"/></div>

                <div>

                    <h3>漩渦鳴人</h3>

 

                    <p>日本漫畫家岸本齊史作品《火影忍者》中男主角。因為身上封印著邪惡的九尾妖狐,無父無母的他受盡了村人的冷眼與歧視,他下定決心要成為第六代火影,讓所有人都認同他的存在。</p>

                </div>

            </a>

        </li>

        <li>

            <a href="#" target="_blank">

                <div>

                    <img alt="" src="images/2.jpg"/>

                </div>

                <div>

                    <h3>日向雛田</h3>

 

                    <p>

                        日本漫畫家岸本齊史作品《火影忍者》中的3號女主角。木葉忍者村的女忍者,木葉名門日向一族宗家族長的長女。喜歡漩渦鳴人,原本是個性格柔弱的女孩,但是在鳴人的影響下逐漸變得堅強,並逐漸成長為一名優秀的忍者。</p>

                </div>

            </a>

        </li>

        <li>

            <a href="#" target="_blank">

                <div><img alt="" src="images/3.jpg"/></div>

                <div>

                    <h3>蒙奇·D·路飛</h3>

 

                    <p>蒙奇·D·路飛 是日本人氣動漫 《海賊王》中的主人公。是日本人氣動漫 《海賊王》中的主人公。草帽海賊團船長,夢想是找到傳說中的寶藏 —— ONE PIECE,成為海賊王。</p>

                </div>

            </a>

        </li>

        <li>

            <a href="#" target="_blank">

                <div>

                    <img alt="" src="images/4.jpg"/>

                </div>

                <div>

                    <h3>盒子先生</h3>

 

                    <p>

                        Danbo是一隻用廢紙盒DIY出來的可愛玩偶,圓圓的眼睛和三角形的嘴巴,時刻露出無辜的表情,讓人看到就心軟,Danbo是個純真善良的小家伙,在它單純的幻想世界里,總是透露出最純真可愛的動人氣息。</p>

                </div>

            </a>

        </li>

    </ul>

</div>

 

 

</body>

</html>


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • ORA-00001: 違反唯一約束條件 (.) ORA-00017: 請求會話以設置跟蹤事件 ORA-00018: 超出最大會話數 ORA-00019: 超出最大會話許可數 ORA-00020: 超出最大進程數 () ORA-00021: 會話附屬於其它某些進程;無法轉換會話 ORA-00022:  ...
  • Hadoop集群搭建(一)(上篇中講到了Linux虛擬機的安裝) 一、安裝所需插件(以hadoop2.6.4為例,如果需要可以到官方網站進行下載:http://hadoop.apache.org) hadoop2.6.4插件、已經裝好的虛擬機(CentOS,這個百度一下自行安裝)、虛擬機安裝後將其克 ...
  • 配置Spark standalone HA 主機:node1,node2,node3 master: node1,node2 slave:node2,node3 修改配置文件: node1,node3: spark-env.sh node2: spark-env.sh node2與node1的差別僅 ...
  • 使用sqlserver和IIS開發.net B/S程式時,數據量逐漸增多,用戶也逐漸增多,那麼伺服器的穩定性就需要維護了。資料庫如何占用更小記憶體,無用的日誌如何瞬間清空? ...
  • 一、MYSQL約束 1.預設值約束,當欄位沒有插入值的時候,mysql自動給該欄位分配預設值。 預設值的欄位允許為空。 對預設值欄位也可以插入null。 2.非空約束 2.1非空欄位必須賦值(錯誤顯示) 2.2不能插入null(錯誤顯示) 3.唯一約束 下麵語句執行發生錯誤 錯誤提示 4.主鍵約束( ...
  • JQuery官方網站 http://jquery.com/ 1、JQuery概念 A、Jquery是一個優秀的Javascript框架。它是輕量級的js庫 ,它相容CSS3,還相容各種瀏覽器,jQuery2.0及後續版本將不再支持IE6/7/8瀏覽器。jQuery使用戶能更方便地處理HTML doc ...
  • 為什麼是隨筆 好好算下來,學習web前端已有半個月了,這半個月來主要學習的是HTML和CSS部分,期間有困惑,也有解決困惑時的快感,所以想把這段時間感受到的一些東西記下來,因為內容比較雜,所以乾脆叫隨筆吧。這裡面不會說前端的相關基礎知識,只是說一些自己對前端的一些認識。 html是用來控制頁面結構的 ...
  • 常用的定位可分為以下四種: 1.static: 元素的定位預設值。元素出現在正常的文檔流中。top, left, right, bottom,z-index聲明無效,言意上對於static的元素是沒有任何效果。 2.relative: 相對定位。通過top, left, right, bottom相 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...