jquery实例以及常用jQuery主要功能实现

1、页面分析、规划（页面的目录划分，结构样式分离：创建样式表，js文件以及ico图标）

2、模块化搭建页面结构，编写布局模块样式，公共样式提取

默认样式重置：

body, h1, h2, h3, h4, h5, p, dl, dd, ul, ol, form, input, textarea, th, td, select { margin:0; padding:0;}
em { font-size:normal;}
li {list-style:none;}
a { text-decoration:none;}
img { border:none; vertical-align:top;}
table { border-collapse:collapse;}
input,textarea { outline:none;}
textarea { resize:none; overflow:auto;}
body { font-size:12px; font-family:"微软雅黑";}

公共样式：

.fl { float:left;}
.fr { float:right;}
.clear { zoom:1;}
.clear:after { content:''; display:block; clear:both;}

/* 渐变过渡 */
.gradient {background:-moz-linear-gradient(top, #FFFFFF, #f8f8f8);background:-webkit-linear-gradient(top, #FFFFFF, #f8f8f8);background:-ms-linear-gradient(top, #FFFFFF, #f8f8f8);background:linear-gradient(top, #FFFFFF, #f8f8f8);-ms-filter:"progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#FFFFFF, endColorstr=#f8f8f8)";+background:#f9f9f9;}/*兼容ie6,7*/
/* 三角形 */
.triangle_up, .triangle_down_red, .triangle_down_gray { position:absolute; width:0; height:0; overflow:hidden; border-left:4px solid transparent; border-right:4px solid transparent; }
.triangle_up { border-bottom:4px solid #ca0309; }
.triangle_down_red { border-top:4px solid #ca0309; }
.triangle_down_gray { border-top:4px solid #c4bdbd; }

3、解决IE兼容问题

图片下的间隙问题：解决方案：img{ vertical-align：top；}

ie6下最小高度问题：19px 解决方案：给盒子加上overflow：hidden；

在IE6,7下元素要通过浮动并在一行，就给这行元素都加浮动

png的问题在IE6不兼容，所以需要

<!--[if IE 6]>
<script src="DD_belatedPNG_0.0.8a.js"></script>
<script>
DD_belatedPNG.fix('.box');
</script>
<![endif]-->

并且引入

<script src="js/jquery-3.2.1.min.js"></script>

主要的功能实现代码：


$(function (){// 切换搜索框(function (){var aLi = $('#menu li');var oText = $('#search').find('.form .text');var arrText = ['例如：南京','例如：上海','例如：万达','例如：苏州','例如：杭州'];var iNow = 0;oText.val(arrText[iNow]);aLi.each(function ( index ){$(this).click(function (){aLi.attr('class', 'gradient');$(this).attr('class', 'active');iNow = index;oText.val(arrText[iNow]);});});oText.focus(function (){if( $(this).val() == arrText[iNow] ) {$(this).val('');}});oText.blur(function (){if( $(this).val() == '' ) {oText.val(arrText[iNow]);}});})();// update文字弹性滑动(function (){var oDiv = $('.update');var oUl = oDiv.find('ul');var iH = 0;var arrData = [{ 'name':'小心', 'time':4, 'title':'xxxccc', 'url':'#' },{ 'name':'心畅', 'time':5, 'title':'mmmmmmm', 'url':'#' },{ 'name':'小萱', 'time':6, 'title':'vvvvvv', 'url':'#' },{ 'name':'小畅', 'time':7, 'title':'vvvv', 'url':'#' },{ 'name':'信心', 'time':8, 'title':'bbbbbbb', 'url':'#' },{ 'name':'心心', 'time':9, 'title':'vvvv', 'url':'http:#' },{ 'name':'欣欣', 'time':10, 'title':'rrr', 'url':'http:#' },{ 'name':'鑫鑫', 'time':11, 'title':'gggggggggggg', 'url':'#' }];var str = '';var oBtnUp = $('#updateUpBtn');var oBtnDown = $('#updateDownBtn');var iNow = 0;var timer = null;for ( var i=0; i<arrData.length; i++ ) {str += '<li><a href="'+ arrData[i].url +'"><strong>'+ arrData[i].name +'</strong> <span>'+ arrData[i].time +'分钟前</span> 写了一篇新文章：'+ arrData[i].title +'…</a></li>';}oUl.html( str );iH = oUl.find('li').height();oBtnUp.click(function (){doMove(-1);});oBtnDown.click(function (){doMove(1);});oDiv.hover(function (){clearInterval( timer );}, autoPlay);function autoPlay() {timer = setInterval(function () {doMove(-1);}, 3500);}autoPlay();function doMove( num ) {iNow += num;if ( Math.abs(iNow) > arrData.length-1 ) {iNow = 0;}if ( iNow > 0 ) {iNow = -(arrData.length-1);}oUl.stop().animate({ 'top': iH*iNow }, 2200, 'elasticOut');}})();// options 选项卡切换(function (){fnTab( $('.tabNav1'), $('.tabCon1'), 'click' );fnTab( $('.tabNav2'), $('.tabCon2'), 'click' );fnTab( $('.tabNav3'), $('.tabCon3'), 'mouseover' );fnTab( $('.tabNav4'), $('.tabCon4'), 'mouseover' );function fnTab( oNav, aCon, sEvent ) {var aElem = oNav.children();aCon.hide().eq(0).show();aElem.each(function (index){$(this).on(sEvent, function (){aElem.removeClass('active').addClass('gradient');$(this).removeClass('gradient').addClass('active');aElem.find('a').attr('class', 'triangle_down_gray');$(this).find('a').attr('class', 'triangle_down_red');aCon.hide().eq( index ).show();});});}})();// 自动播放的焦点图(function (){var oDiv = $('#fade');var aUlLi = oDiv.find('ul li');var aOlLi = oDiv.find('ol li');var oP = oDiv.find('p');var arr = [ '这是第一张图', '这是第二张图', '这是第三张图' ];var iNow = 0;var timer = null;fnFade();aOlLi.click(function (){iNow = $(this).index();fnFade();});oDiv.hover(function (){ clearInterval(timer); }, autoPlay);function autoPlay() {timer = setInterval(function () {iNow++;iNow%=arr.length;fnFade();}, 2000);}autoPlay();function fnFade() {aUlLi.each(function (i){if ( i != iNow ) {aUlLi.eq(i).fadeOut().css('zIndex', 1);aOlLi.eq(i).removeClass('active');} else {aUlLi.eq(i).fadeIn().css('zIndex', 2);aOlLi.eq(i).addClass('active');}});oP.text(arr[iNow]);}})();
});

实现的效果图：

jquery实例以及常用jQuery主要功能实现相关推荐

php jquery 实例教程,php jquery 多文件上传简单实例
这篇文章主要介绍了php jquery 多文件上传简单实例,有需要的朋友可以参考一下代码如下: Upload $(document).ready(function() { var settings ...
从零开始学习jQuery (十) jQueryUI常用功能实战
本系列文章导航从零开始学习jQuery (一) 开天辟地入门篇从零开始学习jQuery (二) 万能的选择器从零开始学习jQuery (三) 管理jQuery包装集从零开始学习jQuery ( ...
Html中Select的增删改查排序，和jQuery中的常用功能
这里主要通过select引出常用的jquery 前台页面 <select class="form-control" id="commonSelect"&g ...
jquery each函数 break和continue功能
jquery each函数 break和continue功能来源: 时间:2013-09-05 20:23:14 阅读数:89346 分享到:3 [导读] jquery each函数 bre ...
很漂亮实用的jQuery实例123个
很漂亮实用的jQuery实例, http://download.csdn.net/detail/haoyoul/4637329 1. 2款jQuery图片自动切换常用广告代码 2. jquery+cs ...
微信转发抽奖+php,jQuery+PHP实现微信转盘抽奖功能的方法
本文实例讲述了jQuery+PHP实现微信转盘抽奖功能的方法.分享给大家供大家参考,具体如下: 本文结合实例将使用jQuery和PHP来实现转盘抽奖程序. 准备工作首先要准备素材,抽奖的界面用到两张 ...
html tab与jQuery,js与jquery分别实现tab标签页功能的方法
本文实例讲述了js与jquery分别实现tab标签页功能的方法.分享给大家供大家参考,具体如下: 首先列出样式和html标签 *{margin: 0;padding: 0;} #myul li {li ...
html5拖动的面板 panel,基于jQuery UI的Bootstrap Panel面板功能增强插件
LobiPanel是一款基于jQuery UI的Bootstrap Panel面板功能增强插件.通过该插件可以为Bootstrap的原生Panel面板增加编辑标题,最大化,最小化,面板拖动关闭面板等功 ...
html 12306页面实现,jQuery模拟12306城市选择框功能简单实现方法示例
本文实例讲述了jQuery模拟12306城市选择框功能简单实现方法.分享给大家供大家参考,具体如下: www.jb51.net jQuery城市选择框 #parent{ width:500px; po ...

jquery实例以及常用jQuery主要功能实现

jquery实例以及常用jQuery主要功能实现相关推荐

最新文章

热门文章