jQuery菜鸟学习实例
来源:互联网 发布:灯光特效软件 编辑:程序博客网 时间:2024/05/15 23:50
引用的<script src="http://code.jquery.com/jquery-latest.js"></script>
例子<一>:实现字体变大或变小
1、主体部分:
<body>
<a href="#" id="larger">Larger</a></br>
<a href="#" id="smaller">Smaller</a>
<p>when click Larger font change Big and click Smaller font change small;when click Larger font change Big and click Smaller font change small;</p>
</body>
2、jQ代码:
<script type="text/javascript">
$(function(){
$('a').click(function(){
var os = $('p').css('font-size'); //获取的是16px
var num = parseFloat(os,10); //通过parseFloat 解析得到数字部分
var uom = os.slice(-2); //得到单位 px
$('p').css('font-size',num/1.4+uom);
if(this.id=='larger'){
$('p').css('font-size',num*1.4+uom);
}
});
});
</script>
3、效果图:
例子<二>:实现图片切换的效果
1、主体部分:
<body>
<div class="wrap">
<img src="back.jpg" alt="image" />
<img src="front.jpg" class="front" alt="image" />
</div>
<div class="wrap">
<img src="back.jpg" alt="image" />
<img src="front.jpg" class="front" alt="image" />
</div>
<div class="wrap">
<img src="back.jpg" alt="image" />
<img src="front.jpg" class="front" alt="image" />
</div>
</body>
2、jQ代码:
<script type="text/javascript">
$(function(){
$('.wrap').hover(function(){
$('.front',this).stop().animate({top:"300px"},700); //top 也可以修改为left,right等等
},function(){
$(this).children('.front').stop().animate({top:"0px"},400);
});
});
</script>
3、CSS代码
<style type="text/css">
#container{
width:850px;
text-align:center;
margin:auto;
}
.wrap{
width: 250px;
height: 140px;
position: relative;
overflow: hidden;
float: left;
}
img{
position:absolute;
top:0;
left:0;
}
</style>
4、效果图
例子<三>:实现添加与移出数据效果
1、主体部分:
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<a href="#" id="add">Add List Item</a><br>
<a href="#" id="remove">Remove List Item</a>
</body>
2、jQ代码:
<script type="text/javascript">
$(function(){
var i = $('li').size()+1;
$('a#add').click(function(){
$('<li>'+i+'</li>').appendTo('ul');
i++;
});
$('a#remove').click(function(){
$('li:last').remove();
if (i != 0){
i--;
}
});
});
</script>
3、效果图:
例子<四>:实现图片或文字变化的效果
1、主体部分:
<body>
<div id="box">CHANGE</div>
</body>
2、jQ代码:
<script type="text/javascript">$(function(){
$('#box').click(function(){
$(this).animate({"left":"300px"},4000);// first effect
$(this).animate({"width":"50px"},4000);//and so second effect
});
});
</script>
3、CSS代码:
<style type="text/css">
#box{
background:red;
width:300px;
height:300px;
position:relative;
}
</style>
4、效果图:
- jQuery菜鸟学习实例
- 菜鸟学习jQuery
- java菜鸟学习---servlet 小实例
- JQuery+JSON+java学习实例
- w3school学习9-jQuery 实例
- JQuery 学习总结及实例
- JQuery 学习总结及实例
- JQuery 学习总结及实例
- JQuery 学习总结及实例
- JQuery 学习总结及实例
- JQuery 学习总结及实例
- jQuery学习第七课(jquery表单实例)
- jQuery学习教程一: jQuery语法实例
- Java菜鸟学习笔记--语法篇(五):位运算实例
- Python菜鸟学习手册14----标准库+代码实例
- JAVA菜鸟入门篇 - File类实例学习 (30)
- 菜鸟学习日记:Jquery validation插件的使用(一)
- 菜鸟学习日记:Jquery获取select选中的值
- 以最省内存的方式读取本地资源的图片
- (转载)字符编解码的故事(ASCII,ANSI,Unicode,Utf-8区别)
- 关于request.querystring()的理解
- Extjs4中grid 隐藏列,同时删除header表头下拉勾选项
- Git 若干问题及解答
- jQuery菜鸟学习实例
- Loadrunner中添加检查点
- hdu4451-Dressing
- SqlServer四个排名函数(row_number、rank、dense_rank和ntile)的比较
- linux socket()调用与arp报文发送
- AndroidStudio初体验:解决Execution failed for task ':TestAndroid:compileDebug'.
- 能够兼容ViewPager的ScrollView
- 约瑟夫问题
- 根据不同环境加载不同js文件