1. 程式人生 > >jq實現點選容器實現2張圖片切換(改變src路徑)

jq實現點選容器實現2張圖片切換(改變src路徑)

實現點選一個容器實現圖片切換的方法有很多,本篇為使用jquery實現點選圖片,實現在2張圖片來回切換。思路為:

1.點選某個容器觸發事件,事件對要處理的目標進行判斷。

2.判斷如果當前某處的圖片的src等於要切換的圖片的src,則讓src等於第二張圖片的路徑。

3.如果當前判斷的圖片與第一張圖片的src不同,則讓做判斷的圖片等於第一張圖片。

  程式碼如下:

	$('.createbox').click(function(){
			
			if($(this).find('img').attr('src')=='../../images/chose.png'){
				$(this).find('img').attr('src','../../images/chosed.png');
			}else{
				$(this).find('img').attr('src','../../images/chose.png');
			}

			
	});


相關推薦

jq實現容器實現2圖片切換改變src路徑

實現點選一個容器實現圖片切換的方法有很多,本篇為使用jquery實現點選圖片,實現在2張圖片來回切換。思路為: 1.點選某個容器觸發事件,事件對要處理的目標進行判斷。 2.判斷如果當前某處的圖片的src等於要切換的圖片的src,則讓src等於第二張圖片的路徑。 3.如果當前

JQ 實現連結滾動到指定位置。非直接跳轉

平時我們做網頁時都會使用<a>來建立連結,再用href屬性來定位,使我們點選時網頁能夠到達我們所希望到達的位置。但是如果直接點選的話,網頁會瞬間跳轉(閃現)到指定位置。但一些情況下這樣的效果並不理想,無法進行平滑的過渡。這時候使用jQuery,可以達到我們所需的效

後臺動態新增超連結實現檔案實現下載

protected void Page_Load(object sender, EventArgs e) { string path = "~/Document/Introduction/團隊管理制度

安卓通過實現按鈕實現執行緒停止與開啟

public class MainActivity extends Activity implements android.view.View.OnClickListener { Button bt1, bt2; Thread thread; protected void onCreate(Bun

實現評論頁面的五星評價和圖片選擇可拖動

先上圖: https://github.com/simonFong/CommentDemo 想用的直接到github下載就可以了,星星控制元件和新增圖片的控制元件在imageadd的lib裡 使用方法: 1.下載lib,匯入自己的工程 2.星星控制元件 直接在自己的佈局檔案裡新增

echarts常用方法,legend狀態支持兩圖片切換

art style option gda gic 選中 list selected === 在UI設計的時候,可能我們在使用echarts時,legend是用圖片渲染的,未選中的legend是用置灰的圖片展示的。即彩色圖片,置灰圖片交互切換。 主要代碼如下: //圖

jq實現載入更多分頁功能

頁面上實現類似於下拉載入更多的功能,這種是點選載入更多 。 大致思路是: 首先Ajax獲取到下一頁內容,返回json格式資料,如果是跨域請求可以用jsonp返回,通過jq的append()到某個元素後面 此時分頁的page+1,可以在“載入更多”按鈕上把總頁數和當前

JQ實現返回頂部有動畫過渡

$(function(){ //當滾動條的位置處於距頂部100畫素以下時,跳轉連結出現,否則消失 $(function () { $(window).scroll(function(){ if ($(window).sc

【Javascript學習筆記】【DOM實戰— —jQ實現任意位置關閉某處的效果常用於模態框後面的遮罩層

【Javascript學習筆記】 目錄 目錄 原理 效果 程式碼 實戰程式碼 快捷連結 點選任意位置關閉某處 而且點選對應處並不會hide掉自己 原理

vue和jq實現任意地方關閉彈窗

       有時候 開發中會遇到這樣一個需求 點選任意地方關閉彈窗    1.先用jq實現效果        // 點選任意地方關閉遮罩層 除了指定區域        $('#最大的父容器區域').bind('click', function(e) { var e = e

JSP 簡單入門教學2: 按鈕實現兩數相加加法運算的 兩種 實現方法

我們要實現頁面效果:瞭解過html的都知道,提交資料用的是form表單,表單中的內容是被髮送出去的內容。大部分開發都是這樣的,先畫ui後考慮功能,所以我們先用程式碼表示出這個介面:<form ac

Kettle實現從mysql中取2表數據關聯的數據,並寫入到mongodb中

表數 ima 關聯 數據庫連接 查詢 ket 分享圖片 表數據 數據庫名 1 建立轉換,並設置DB連接到mysql 選中DB連接:連接類型選擇MySQL,輸入主機名稱,數據庫名稱,端口號,用戶名,密碼 輸入連接名稱,點擊確定。(可以先點擊測試,測試一下是否連接成功) 如

小程式實現 加入購物車 紅拋物線飄入

1:實現效果;   2:index.wxss //只寫紅點樣式 .good_box { width: 30rpx; height: 30rpx; position: fixed; border-radius: 50%; overflow: hidden

簡單的側滑實現(button按鈕)

第一步: 首先,自己上網上下載一個SlidingMenuLibrary依賴包,將依賴包匯入studio中, 讓自己的專案依賴一下匯入的依賴包,具體流程就不寫了! activity_main佈局檔案: <?xml version="1.0" encoding="utf-8"?>

JS實現按鈕,下載檔案

今天在實現下載功能時,後臺介面測試完成後,前臺在呼叫時發現,因為系統是基於token的,又不想把token顯示在url中,後來找到了一篇文章,講解了如何通過構造form表單提交請求後端介面,實現檔案下載,原文地址:https://www.cnblogs.com/hamsterPP/p/6763458.html

EasyUI Datagrid 分頁的情況下實現表頭的小三角圖示對資料庫中所有資料重新排序

說明一下: 當點選 datagrid 表頭某一列的小三角圖示時,easyui 本身是有排序的,但是在當我們對 datagrid 進行了分頁的情況下,點選排序只是對當前頁的資料進行排序,而需求需要我對資料庫裡面的所有資料進行排序,這樣的話只能從後臺先排好序再返回了。 看了一下文件,發

jquery實現按鈕返回到頁面頂部效果

有的時候我們需要實現點選按鈕回到頁面頂部的效果,下面就是我的實現 首先HTML程式碼如下 <div class="QZ-up" style="display: none;"></div> 當滾動條高度大於120px的時候出現按鈕如下

android:多次效果實現

public class MainActivity extends AppCompatActivity{ private final static int COUNTS = 5;//點選次數 private final static long VALIDTIME = 1300;/

android仿微信、QQ等聊天介面,實現輸入框彈出軟鍵盤、其他區域收起軟鍵盤,預設滑動至最低端

如圖所示,點選輸入框及選擇圖片和傳送按鈕時軟鍵盤顯示且不消失,點選其他區域,則隱藏軟鍵盤。 主要程式碼如下: override fun dispatchTouchEvent(ev: MotionEvent?): Boolean { if (ev!!.getAction() ==

loading動畫的效能優化-摒棄Canvas,擁抱CSS3-實現特效

click-colorful 專案中有個活動頁載入時有個loading動畫,效果如上圖,連續綻放小球,問題就是太卡,經常出現一堆小球抱團卡住,遂進行優化 注意:(僅在頁面載入時卡頓,載入完畢,點選的時候不卡頓) 檢視程式碼發現改動畫時借用的animejs 官網中的效果,通過can