原文:jquery+css實現簡單的評分功能

今天研究了下簡單的評分功能,參考了下 http: www.lanxyou.info star rating new method ,感覺比較簡單易用,之后自己做了下優化處理。 先看下效果圖: 原理:橙色星寬度 父容器寬度 分值 功能:鼠標懸浮時,其左側星星點亮 鼠標滑過時,其左側星星點亮 鼠標點擊時,其左側星星點亮 鼠標移開后,默認記憶上次點擊的橙色星寬度 所需圖片: 實現源碼: ...

2013-01-29 15:56 13 1973 推薦指數:

查看詳情

jQuery+CSS實現的圖片滾動效果

本例實現了一系列圖片滾動的效果,適合用在需要展示圖片庫或合作伙伴友情鏈接圖片之類的網站首頁。可以控制圖片滾動的速度、自動/手動滾動圖片、支持鼠標懸停等。 XHTML XHTML由一組圖片構成的無序列表ul,給ul一個id屬性 ...

Wed Feb 08 18:38:00 CST 2012 1 23533
Jquery+css實現圖片無縫滾動輪播

Today,在XX學院的教學視頻中,偶爾看到了Jquery+css實現圖片無縫滾動輪播視頻教程,雖然以前已寫過類似的,但是我感覺他學的比較精簡。為了方便以后做項目時直接拷貝,特地寫出來,順便和大家分享一下 最終實現界面如下: 頁面加載時,自動輪播,輪播鼠標懸停在整個banner容器 ...

Sun Mar 20 01:59:00 CST 2016 1 27185
【源碼分享】jquery+css實現側邊導航欄

jquery+css實現側邊導航欄     最近做項目的時候,突然想用一個側邊導航欄,網上找了幾個插件,有的太丑而且不太符合我的預期。與其修改別人的代碼,不如自己來寫一個了。廢話不多說先上圖,感興趣的請繼續看下去 ...

Mon Jun 12 06:53:00 CST 2017 7 4442
jquery+css實現下拉列表(更新)

一、概述 和select下拉列表相比,jquery+css實現的下拉列表具有更好的靈活性,第二部分的代碼為下拉列表的實現。 二、代碼 下拉列表效果如下: 下拉列表的選項為動態追加,使用on方法,采用事件委派機制,響應選項的單擊事件。 經過測試,以下代碼在Firefox 55.0 ...

Sun Sep 10 18:35:00 CST 2017 0 1719
Javascript 實現簡單的星級評分功能

  使用 javascript 實現簡單的星級評分功能,思路很簡單,封裝一個能進行重復調用函數:   當鼠標移入后,遍歷評分div里的子div,然后前兩個子div改變背景為灰色,后面全部為橙色,然后改變對應的評分內容;   當鼠標移出后,使用for循環把子div背景顏色和評分內容恢復初始化狀態 ...

Sat Sep 22 17:12:00 CST 2018 0 722
Jquery+CSS Input file 文本框輕美化

HTML原生的input file 上傳按鈕有多(無)不(力)漂(吐)亮(槽)我就不多說了。大家幾乎在項目中都會有遇到圖片、等文件需要上傳的地方,好看的文件上傳按鈕會使人身心愉悅(我瞎說的)。好了不多廢話了,今天就教大家使用Jquery配合CSS寫出一個美化文件上傳按鈕效果的教程。 效果如下圖 ...

Tue Feb 21 02:20:00 CST 2017 2 4303
基於 bootstrap 字體圖標,用純CSS實現星級評分功能

需要用到的圖標 實現原理 關鍵屬性是 text-overflow: clip;,表示直接截斷文本。我們經常用這個屬性的另一個值 text-overflow: ellipsis; 來做省略表示。 先平鋪5個空心的圖標 再層疊5個實心圖標,控制實心圖標的寬度來達到截斷效果,結合 ...

Tue Jan 09 08:52:00 CST 2018 0 2139
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM