1. 程式人生 > >jquery背景漸變切換banner

jquery背景漸變切換banner

<script type="text/javascript">
$(document).ready(function(){
	var $tab_li = $('#tab ul li');
	$tab_li.hover(function(){
		$(this).addClass('selected').siblings().removeClass('selected');
		var index = $tab_li.index(this);
		$('div.tab_box > div').eq(index).show().siblings().hide();
	});	
});
</script><script type="text/javascript">
$(function(){
	$(".screenbg ul li").each(function(){
		$(this).css("opacity","0");
	});
	$(".screenbg ul li:first").css("opacity","1");
	var index = 0;
	var t;
	var li = $(".screenbg ul li");	
	var number = li.size();
	function change(index){
		li.css("visibility","visible");
		li.eq(index).siblings().animate({opacity:0},3000);
		li.eq(index).animate({opacity:1},3000);
	}
	function show(){
		index = index + 1;
		if(index<=number-1){
			change(index);
		}else{
			index = 0;
			change(index);
		}
	}
	t = setInterval(show,8000);
	//根據視窗寬度生成圖片寬度
	var width = $(window).width();
	$(".screenbg ul img").css("width",width+"px");
});
</script>
<div class="screenbg">
  <ul>
    <li><a href="javascript:;"><img src="images/0.jpg"></a></li>
    <li><a href="javascript:;"><img src="images/1.jpg"></a></li>
    <li><a href="javascript:;"><img src="images/2.jpg"></a></li>
  </ul>
</div>

相關推薦

jquery背景漸變切換banner

<script type="text/javascript"> $(document).ready(function(){ var $tab_li = $('#tab ul li'); $tab_li.hover(function(){ $(this).a

Android:圖片背景漸變切換與圖層疊加的實現

本例要實現的目的: 1.圖片背景漸變的切換,例如漸變的從紅色切換成綠色。 2.程式碼中進行圖層疊加,即把多個Drawable疊加在一起顯示在一個元件之上。 效果圖: 程式碼很簡單: (1)佈局檔案: <RelativeLayout xmlns:android="

jquery視差圖片切換

wid nim utf-8 border val body 視差 切換 htm <!DOCTYPE html> <html> <head> <meta charset="UTF-8">

Tesseract處理背景漸變的圖片

漸變圖 () filepath png ocr識別 背景漸變 處理 lose 圖片 在Tesseract處理背景漸變圖片不太理想的情況下, 可以利用Pillow庫, 創建一個閾值過濾器來去掉漸變的背景色, 只把文字留下來, 從而讓圖片更清晰, 便於Tesseract讀取:

CSS設置DIV背景色漸變顯示--針對不同瀏覽器,背景漸變的兼容問問題

fff 兼容 火狐 kit 瀏覽器 bsp 谷歌 safari 背景色漸變 針對不同瀏覽器,背景漸變的兼容問問題! background: -ms-linear-gradient(top, #fff, #0000ff); /* IE 10 */ backgr

web前端小案例-css3制作瀏覽器背景漸變

JavaScript 前端 css3 案例 知識點:rgb全色循環算法,HEX與RGB顏色轉換算法、CSS3顏色漸變,CSS3漸變色兼容ie方法,定時器與循環,函數封裝,數組應用等。 css代碼: <style> *{margin:0;padding:0;}

CSS-背景-漸變-文本格式化

修飾 ani wid 角度 顏色 下劃線 邊框 blue 練習 1.背景 1.背景色 屬性:background-color 取值:合法的顏色值 註意:背景顏色和背景圖片默認都從邊框位置處開始填充 2.背景圖片 屬性:background-image 取

使用jQuery進行tab切換

val 經典 img code foo tdi ML AS bsp HTML: <div class="food"> <div class="tabsdiv"> <ul> <li c

css3之背景漸變

線上性漸變過程中,顏色沿著一條直線過渡:從左側到右側、從右側到左側、從頂部到底部、從底部到頂部或著沿任何任意軸。 語法格式: background:-webkit-linear-gradient(漸變的起始位置, 起始顏色, 結束顏色); background:-webkit-l

jquery中點選切換的實現

專案中經常會遇到一種情況,就是點選切換,比如點選按鈕,div樣式為1,再點選一下按鈕,div樣式為2,再點選一下按鈕,div樣式為1。需要自定義jQuery方法toggle。 // toggle方法 $.fn.toggle = function( fn, fn2 ) {

jQuery帶tab切換搜尋框樣式程式碼

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> * { margin: 0; padding: 0; list-style: none; } .

CSS3j背景漸變,字型顏色漸變,以及相容IE寫法

一、背景漸變 #grad {   background: linear-gradient(red, blue);  } 漸變路徑預設是從上到下,也可以指定路徑: 從左到右 #grad { background: linear-gradient(to right, red , blu

css3(border/background/瀏覽器私有化字首/背景/漸變/過渡)

一.邊框 1.邊框圓角 border-radius 2.邊框陰影 box-shadow 3.邊框圖片 border-inage-source:url("") border-image-repeat:設定背景圖的平鋪方式,streth(拉伸)round(圖片自動調整縮放比例) border

【UI視覺】100行程式碼實現微信底部漸變切換效果!!!

1、我們先來看一下要實現的效果 2、我們看到當進行切換頁面的時候,關聯的兩個Tab將會產生過渡效果,接下來我們用最簡單的程式碼去實現 3、思路:在Tab上放置一張為選中時的圖片,再將已經選中的圖片覆蓋在未選中的圖片上,我們來控制選中圖片的透明度來實現漸變。 4、佈局方面:這是單個T

前端基礎學習筆記 背景 漸變 倒影 遮罩

背景 background-size: X Y;改變背景圖片的大小 具體的值px  百分比  相對於元素框  cover 保持寬高比不變,等比例放大縮小,圖片四條邊軸都鋪滿盒子  contain  同上,上面的區別是水平或

HTML-CSS3日曆表背景顏色切換程式碼

生活中,都是有時間規律,今天說發的是HTML_CSS3的日曆,沒點選一次切換,就會換背景顏色,同時日曆也會換,可以在自己做專案的時候用一用! 具體的檔案存放是: 首先CSS樣式: body{ margin:0; color:#444; background-c

web前端學習(五)(9)-- jQuery標簽切換

使用 內容 鼠標事件 load 如何 數據 加載 掌握 學習 本部分內容後面補 1、標簽切換布局實現   掌握如何通過使用邊框技巧完成實例效果 2、標簽切換具體實現   使用 jQuery 完成動態效果,包含添加事件,對鼠標事件做處理,添加延時功能,提供更好的用戶體

Android 繪製上下,左右方向顏色背景漸變 shape

<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"> <gradient

jquery 圖片左右切換,一長條的顯示,點選左右移動。

菜鳥啊,想了一天才寫出來,唉。 ps: 生活無樂趣,程式碼更加無樂趣! .hdjs{display:inline-block; width:100%; margin-top:4px; position: relative; height:101px; background: url(".

jquery的tab切換

.tab{ display: flex; justify-content: center; } .tab li{ list-style: none; width: 150px; height: 50px;