⑴ 移動端的一個js效果:手滑動向上向下滾動li標簽
試試以下代碼:
<!DOCTYPEhtml>
<html>
<head>
<matacharset="utf-8"/>
<linkrel="stylesheet"href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<scriptsrc="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<scriptsrc="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script>
$(document).on("pageinit","#pageone",function(){
$(document).on("scrollstop",function(){
alert("停止滾動!");
});
});
</script>
</head>
<body>
<divdata-role="page"id="pageone">
<divdata-role="header">
<h1>scrollstop事件</h1>
</div>
<divdata-role="content">
<p><b>提示:</b>如果未出現滾動條,請嘗試調整窗口尺寸。</p>
<uldata-inset="true">
<lidata-role="list-divider">信息列表</li>
<lidata-role="fieldcontain">大學1</li>
<lidata-role="fieldcontain">大學大學2</li>
<lidata-role="fieldcontain">大學大學3</li>
<lidata-role="fieldcontain">大學大學4</li>
<lidata-role="fieldcontain">信息大學5</li>
<lidata-role="fieldcontain">大學6</li>
<lidata-role="fieldcontain">大學信息7</li>
<lidata-role="fieldcontain">信息大學8</li>
<lidata-role="fieldcontain">信息大學大學9</li>
<lidata-role="fieldcontain">信息大學10</li>
<lidata-role="fieldcontain">信息大學11</li>
<lidata-role="fieldcontain">信息大學12</li>
<lidata-role="fieldcontain">信息大學11</li>
<lidata-role="fieldcontain">信息大學12</li>
<lidata-role="fieldcontain">信息大學11</li>
<lidata-role="fieldcontain">信息大學12</li>
<lidata-role="fieldcontain">信息大學11</li>
<lidata-role="fieldcontain">信息大學12</li>
<lidata-role="fieldcontain">信息大學11</li>
<lidata-role="fieldcontain">信息大學12</li>
<lidata-role="fieldcontain">信息大學11</li>
<lidata-role="fieldcontain">信息大學12</li>
</ul>
</div>
<divdata-role="footer">
<h1>頁腳文本</h1>
</div>
</div>
</body>
</html>
⑵ js控制a標簽樣式
<! html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>test</title>
<style type="text/css">
.m{color:Red;}
.n{color:blue;}
</style>
<script type="text/javascript">
function change(whichLink) {
var box = document.getElementById("box");
var links = box.getElementsByTagName("a");
for (var i = 0; i < links.length; i++) {
links[i].setAttribute("class", "m");
whichLink.setAttribute("class", "n");
}
}
</script>
</head>
<body>
<div id="box">
<a class="m" onclick="change(this);">1</a>
<a class="m" onclick="change(this);">2</a>
<a class="m" onclick="change(this);">3</a>
</div>
</body>
</html>
⑶ 怎麼用js做出自定義菜單對li標簽 右鍵 刪除/變顏色 效果
js裡面沒有直接的右擊事件,可採用onmousedown事件進行判斷實現。如下:
document.getElementById("test").onmousedown=function(e){
if(e.button==2){
//alert("你點了右鍵");
//這樣設計你的顏色樣式...
}elseif(e.button==0){
alert("你點了左鍵");
}elseif(e.button==1){
alert("你點了滾輪");
}
}
2、數據的過濾方法有很多,javaScript 、jQuery裡面的filter函數,鑒於本題,最好採用angularJs實現。總體 參考代碼如下:
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<scriptsrc="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js">
</script>
<scripttype="text/javascript">
window.onload=function(){
//去掉默認的contextmenu事件,否則會和右鍵事件同時出現。
document.oncontextmenu=function(e){
e.preventDefault();
};
document.getElementById("test").onmousedown=function(e){
if(e.button==2){
alert("你點了右鍵");
//這樣設計你的顏色樣式...
}elseif(e.button==0){
alert("你點了左鍵");
}elseif(e.button==1){
alert("你點了滾輪");
}
}
}
</script>
</head>
<body>
<divng-app="myApp"ng-controller="namesCtrl">
<p>輸入過濾:</p>
<p><inputtype="text"ng-model="test"></p>
<ul>
<ling-repeat="xinnames|filter:test|orderBy:'pin'">
{{(x.name|uppercase)+','+x.pin}}
</li>
</ul>
</div>
<script>
angular.mole('myApp',[]).controller('namesCtrl',function($scope){
$scope.names=[
{name:'張三',pin:'zhangsan'},
{name:'王斌',pin:'wangbin'},
{name:'張春橋',pin:'zhangchunqiao'},
{name:'王濱',pin:'wangbin'}
];
});
</script>
<divstyle="width:600px;height:50px;margin:auto;border:1pxsolidpink"id="test">
<p>朝鮮新建農場</p>
</div>
</body>
</html>
⑷ 寫js特效時 移動一個標簽的時候,怎麼讓標簽移動的時候很快而且是很流暢的那種
你將時間設為1,但是因為瀏覽器和電腦的處理的關系,顯示的效果根本不可能是1毫秒一次。
你可以看看,你這個和50毫秒完全沒有區別。
在設置時間的時候完全沒有必要設置的那麼小,你可以增加步長,也就是每次移動的多少。多嘗試幾次就好。步長太大了會生硬。如果說因為移動的距離太長,為了速度不得已的吧步長設置的太大,出現了不連續,這個也很正常,沒有必要追求的那麼完美。純靠js也不能做出來沒有痕跡的移動。
自己做難免會有很多的小毛病。你可以學一下jQuery等其他的 js 庫。裡面都是內置了動畫的效果函數,相比之下用的簡單而且效果很好,還增加了開發速度。
希望能夠幫助你
⑸ 怎麼利用js或jquery實現tab效果類似瀏覽器多窗口多標簽的效果
可以用抄tab的插件,有好多,你自己選擇一下用吧。http://www.cnblogs.com/lhb25/archive/2012/11/26/10-useful-jquery-tab-plugins.html
⑹ QQ上的標簽這樣的效果JS怎麼實現呢
jquery 加幾個綁定事件
1,給下面的增加綁定事件:比如下面的都有一個class屬性:tag
$(".tag").live("click",function(){
//獲取當前標簽的名稱,然後再上面的DIV裡面加入他
//將當前綁定事件解除
$(this).unbind("click").addClass("自定義一個不可點擊的樣式名稱");
});
2.上面的標簽都有一個class屬性:selTag
$(".selTag").live("mouseenter",function(){//標簽增加滑鼠移上去事件
var selTagObj = $(this);
//顯示刪除按鈕,這個可以用樣式來實現,你做一個小圖標讓他的位置浮動動當前的標簽右邊,並且增加點擊事件
$("#delImg").css("left",$(this).offset().left+標簽的寬度減去圖片的寬度).css("top",$(this).offset().top).css("position","absolute").unbind("click").bind("click",function(){
//刪除上面的標簽,同時把下面的標簽置為可添加
selTagObj.remove();
$("對應下面的標簽").removeClass("自定義不可點擊的樣式名稱").bind("click",function(){
把上面的綁定事件在加上,可以寫一個JS方法,兩邊一起調用
});
});
});
⑺ 用JS製作5個a標簽效果,只要前4個有效果,最後一個不要效果
function test() {
$(".test a").lt(4).hover(function () {
$(this).stop().animate({ "margin-top": -26 }, 300);
}, function () {
$(this).stop().animate({ "margin-top": 0 }, 300);
});
}
⑻ 使用js添加標簽
<aonclick='addimg();'>添加圖片</a>
<divclass='addimg'></div>
<script>
vari=0,div=document.getElementsByTagName("div")[0];
functionaddimg(){
varinput=document.createElement("input");//創建input
input.setAttribute("type","file");//設置type屬性回
input.setAttribute("name","a"+(++i));//設置name屬性
div.appendChild(input);//插入到答div內
};
</script>