亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

Javascript 鼠標(biāo)移動上去小三角形滑塊緩慢跟隨效果

 更新時間:2013年04月26日 14:41:40   作者:  
一個tab選項卡,當(dāng)鼠標(biāo)移動上去時紅色滑塊跟隨,在布局過程中經(jīng)常會使用到,本文提供了詳細(xì)的實現(xiàn)代碼,感興趣的朋友可以參考下
先來一張截圖。
 
鼠標(biāo)移動到對應(yīng)的分類,下面的紅色小三角形就會自動跟隨,緩慢的跟隨。
不管有多少個都可以。
javascript code:
復(fù)制代碼 代碼如下:

function changeCoord(id, left) {
$$(id).style.left = left;
}
function $$(id) {
return document.getElementById(id);
}
function $$$(id) {
return document.getElementsByClassName(id)[0];
}
function indexOf(arry, obj) {
for (var i = 0; i < arry.length; i++) {
if (obj == arry[i]) {
return i;
}
};
}
window.onload = function() {
//給頁面上所有的滑塊注冊事件
//products-box-center 父容器對象

var obj = document.getElementsByClassName('products-box-center');
for(var i=0;i<obj.length;i++){
try{
var base=obj[i].getElementsByClassName('products-box-center-title')[0]; //取得每一項標(biāo)題
var elems=base.getElementsByClassName('products-items-title');
for(var j=0;j<elems.length;j++){
var elem=elems[j];
elem.onmousemove=function(){
//獲得當(dāng)前對象的父容器的父容器
var baseElem=this.parentElement.parentElement;
var baseIndex=indexOf(obj,baseElem)+1;

//獲得當(dāng)前對象的坐標(biāo)
var left = this.offsetLeft;

//獲得對應(yīng)的滑塊對象
var slider=$$('products-triangle-'+baseIndex);

//改變滑塊的坐標(biāo)
slider.style.left = left + "px";
//改變當(dāng)前對象和其他對象的顏色
this.style.color = "red";
//獲取當(dāng)前父容器下面的所有元素
var notes=this.parentElement.getElementsByClassName('products-items-title');
for(var k=0;k<notes.length;k++){
if(this!=notes[k])
notes[k].style.color="#666";
}

};
}

}
catch(e){
alert(e);
}
};
}

html code:
復(fù)制代碼 代碼如下:

<div class="products-box-center">
<div class="products-box-center-title">
<div class="products-items-title products-focus-text"><h3>最新商品</h3></div>
<div class="products-items-title"><h3>筆記本</h3></div>
<div class="products-items-title"><h3>數(shù)碼影音</h3></div>
<div class="products-items-title"><h3>配件</h3></div>
<div class="products-items-title"><h3>辦公打印</h3></div>
<div class="products-bottom-triangle" id="products-triangle-${index.count}"><b class="triangle"></b></div>
</div>

<div class="products-box-panel">

<div class="products-item">

<ul>
<c:forEach begin="1" end="10">
<li>
<a href="#"><img src="img/pc.jpg"/></a>
<div class="p-name">
<a href="#">LG IPS237L-BN 23英寸IPS顯示器</a>
</div>

<div class="p-price">
<span>¥1299.00</span>
</div>

</li>
</c:forEach>
</ul>
</div>

</div>

</div>

上面的html是部分,可以用el表達(dá)式循環(huán)下,多搞幾個。。。
一個上午才做好。

相關(guān)文章

  • JS代碼判斷IE6,IE7,IE8,IE9的函數(shù)代碼

    JS代碼判斷IE6,IE7,IE8,IE9的函數(shù)代碼

    JS代碼判斷瀏覽器版本,支持IE6,IE7,IE8,IE9!做網(wǎng)頁有時候會用到JS檢測IE的版本,下面是檢測Microsoft Internet Explorer版本的三種代碼
    2013-08-08
  • JS獲得瀏覽器版本和操作系統(tǒng)版本的例子

    JS獲得瀏覽器版本和操作系統(tǒng)版本的例子

    通過分析各類瀏覽器的userAgent信息,不難得出分辨各類瀏覽器及其版本的正則表達(dá)式。而且,對瀏覽器類型的判斷和版本的判斷完全可以合為一體地進行。
    2014-05-05
  • javascript 動態(tài)創(chuàng)建表格的2種方法總結(jié)

    javascript 動態(tài)創(chuàng)建表格的2種方法總結(jié)

    本文給大家總結(jié)了2種使用javascript動態(tài)創(chuàng)建表格的方法,非常簡單實用,小伙伴們自己對比下看看哪種更適合你呢,一般本人是使用第一種的。
    2015-03-03
  • 微信小程序?qū)崿F(xiàn)多張圖片上傳功能

    微信小程序?qū)崿F(xiàn)多張圖片上傳功能

    這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)多張圖片上傳功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-11-11
  • js date 格式化

    js date 格式化

    本文將以yyyy-MM-dd HH:mm:ss為例介紹js date 格式化的相關(guān)知識。具有很好的參考價值,下面跟著小編一起來看下吧
    2017-02-02
  • JS文字球狀放大效果代碼分享

    JS文字球狀放大效果代碼分享

    這篇文章主要展示了JS文字球狀放大效果,和放大鏡放大文字一樣,很神奇的代碼,感興趣的小伙伴們可以參考一下
    2015-08-08
  • JavaScript面向?qū)ο缶幊虒崿F(xiàn)模擬

    JavaScript面向?qū)ο缶幊虒崿F(xiàn)模擬

    面向?qū)ο缶幊?Object Oriented Programming)將現(xiàn)實世界中的復(fù)雜關(guān)系抽象成一個個對象,通過對象之間的分工合作對現(xiàn)實世界進行模擬
    2022-10-10
  • javascript中setTimeout使用指南

    javascript中setTimeout使用指南

    本文給大家通過3個方法向大家展示了javascript中的setTimeout的使用,非常的簡單,有需要的小伙伴可以參考下。
    2015-07-07
  • JS中定位 position 的使用實例代碼

    JS中定位 position 的使用實例代碼

    本文通過實例代碼給大家介紹了JS中定位 position 的使用,非常不錯,具有參考借鑒價值,需要的朋友參考下吧
    2017-08-08
  • 判斷橫屏豎屏(三種)

    判斷橫屏豎屏(三種)

    本文主要介紹了通過HTML,CSS,JS三種判斷橫屏豎屏的方法。具有很好的參考價值,下面跟著小編一起來看下吧
    2017-02-02

最新評論