2016/10/24 笔记总结
1.css3 动画：通过设置图片的opacity 来到hover时的动画：
.nr_mod_service_hp_bottom_ts .inner .item .pic a .d_img { filter: alpha(opacity=100); opacity: 1; transition: 0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s; -ms-transition: 0.3s; -o-transition: 0.3s; }
.nr_mod_service_hp_bottom_ts .inner .item .pic a:hover .d_img { filter: alpha(opacity=0); opacity: 0; }
.nr_mod_service_hp_bottom_ts .inner .item .pic a .h_img { left: -30px; position: absolute; top: 0; filter: alpha(opacity=0); opacity: 0; transition: 0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s; -ms-transition: 0.3s;
-o-transition: 0.3s; }
.nr_mod_service_hp_bottom_ts .inner .item .pic a:hover .h_img { left: 0; filter: alpha(opacity=100); opacity: 1; }
.nr_mod_service_hp_bottom_ts .inner .item .pic a .hover_arrow { height: 52px; left: 36px; position: absolute; top: 76px; width: 32px; opacity: 0; transition: 0.5s; -webkit-transition: 0.5s; -moz-transition: 0.5s; -ms-transition: 0.5s;
-o-transition: 0.5s; transition-timing-function: ease; -webkit-transition-timing-function: ease; -moz-transition-timing-function: ease; -ms-transition-timing-function: ease; -o-transition-timing-function: ease; }
.nr_mod_service_hp_bottom_ts .inner .item .pic a:hover .hover_arrow { left: 86px; opacity: 1; }
2.返回顶部代码：
function gotoTop2(min_height) { $("#gotoTop2").click(function () {$('html,body').animate({ scrollTop: 0 }, 700);}) //获取页面的最小高度，无传入值则默认为300像素
min_height ? min_height = min_height : min_height = 300; //为窗口的scroll事件绑定处理函数 $(window).scroll(function () { //获取窗口的滚动条的垂直位置 var s = $(window).scrollTop(); //当窗口的滚动条的垂直位置大于页面的最小高度时，让返回顶部元素渐现，否则渐隐 if (s > min_height) { $("#gotoTop2").fadeIn(100); } else { $("#gotoTop2").fadeOut(200); }; }); }; gotoTop2();
scrollTop([val])----------------------css
概述
获取匹配元素相对滚动条顶部的偏移。
此方法对可见和隐藏元素均有效。
参数
val String, Number
设定垂直滚动条值
scroll([[data],fn])---------------------------事件
概述
当用户滚动指定的元素时，会发生 scroll 事件。
scroll 事件适用于所有可滚动的元素和 window 对象（浏览器窗口）。
参数
fn Function
在每一个匹配元素的scroll事件中绑定的处理函数。
[data],fn String,Function
data:scroll([Data], fn) 可传入data供函数fn处理。
fn:在每一个匹配元素的scroll事件中绑定的处理函数。
3. tab jquery简单实现tab选项卡效果
4.banner
1.通过li的淡入淡出实现
<div class="banner_wrap" id="ban-ie"> <div id="banner0"> <div id="bannerin"> <ul> <li id="firstimg"><a href="/1.html" target="_blank"><img class="sliderimg" src="/images/01.jpg" alt="颚式破碎机 30年精心打造" border='0' /></a></li> <li><a href="/6.html" target="_blank"><img class="sliderimg" src="/images/02.jpg" alt="圆锥破 亚洲最大生产基地" border='0' /></a></li> <li><a href="/8.html" target="_blank"><img class="sliderimg" src="/images/03.jpg" alt="移动式破碎站 灵动高效、性能可靠" border='0' /></a></li> <li><a href="/14.html" target="_blank"><img class="sliderimg" src="/images/04.jpg" alt="雷蒙磨粉机 高科技磨辊祝您实现高产能效益" border='0' /></a></li> <li><a href="/capacity.html" target="_blank"><img class="sliderimg" src="/images/05.jpg" alt="红星机器车间 高端矿机专家与领导者" border='0' /></a></li> </ul> </div> <div id="scrollin"> <span class="on"></span> <span class=""></span> <span class=""></span> <span class=""></span> <span class=""></span> </div> <div class="fadein" id="arrowin"> <ul> <li class="arrow_left"> <a href="javascript:void(0)" class="fn-left"></a> </li> <li class="arrow_right"> <a href="javascript:void(0)" class="fn-right"></a> </li> </ul> </div> </div> </div>
var index, picTimer, len, width; window.onload = window.onresize = function () { index = 0; len = $("#bannerin li").length; width = document.body.clientWidth || window.innerWidth; if (width > 1660) { width = 1660; }; var scrollWidth = $("#scrollin").width(); var height = parseInt(width * 450 / 1660); $("#banner").css('height', height); $("#bannerin").css('height', height); $("#bannerin li").width(width); $("#bannerin ul").width(width * len); $("#scrollin").css('left', parseInt((width - scrollWidth) / 1.99)); $("#arrowin li").css('height', height); $("#arrowin a").css('top', parseInt((height - 120) / 2)); }; $("#scrollin span").mouseenter(function () { index = $("#scrollin span").index(this); showPics(index, width); }); picTimer = setInterval(_scroll, 4000); $("#bannerin img").hover(function () { $("#arrowin").addClass('fadein'); clearInterval(picTimer); }, function () { $("#arrowin").removeClass('fadein'); picTimer = setInterval(_scroll, 4000); }); $("#arrowin li").hover(function () { $("#arrowin").addClass('fadein'); $("#arrowin a").css('opacity', '1'); } , function () { $("#arrowin a").css('opacity', '0'); $("#arrowin").removeClass('fadein'); } ); $("#arrowin a").click(function () { clearInterval(picTimer); if ($(this).is('.fn-left')) { index--; } else { index++; }; if (index == len) { index = 0; }; if (index == -1) { index = len - 1; }; showPics(index, width); picTimer = setInterval(_scroll, 4000); }); function showPics(index, width) { var nowLeft = -index * width; $("#scrollin span").stop(true, true).removeClass('on').eq(index).addClass('on'); $("#bannerin ul").stop(true, true).animate({ "left": nowLeft }, 1000, 'easeInOutQuint'); } function _scroll() { showPics(index, width); index++; if (index == len) { index = 0; }; }
2.通过ul的left实现
<div id="banner"> <div id="banner_point"> <ul> <li class="on" val="1"></li> <li val="2"></li> <li val="3"></li> <li val="4"></li> </ul> </div> <!--标题--> <div id="banner_list"> <a style="display: inline;" href="http://www.hxjq.com.cn/product1.html"> <img src="images/newbanner1.jpg" border="0" /></a><a class="Bnone" style="display: none;" href="http://www.hxjq.com.cn/9.html"><img src="images/newbanner2.jpg" border="0" /></a><a class="Bnone" style="display: none;" href="http://www.hxjq.com.cn/7.html"><img src="images/newbanner3.jpg" border="0" /></a><a class="Bnone" style="display: none;" href="http://www.hxjq.com.cn/18.html"><img src="images/newbanner5.jpg" border="0" /></a> </div> </div>
var t = n = 0, count; jQuery(document).ready(function () { count = jQuery("#banner_list a").length; //jQuery("#banner_list a:not(:first-child)").hide(); jQuery("#banner_info").html(jQuery("#banner_list a:first-child").find("img").attr('alt')); jQuery("#banner_info").click(function(){window.open(jQuery("#banner_list a:first-child").attr('href'), "_blank")}); jQuery("#banner li").click(function() { var i = jQuery(this).attr("val") - 1;//获取Li元素内的值，即1，2，3，4 n = i; if (i >= count) return; jQuery("#banner_info").html(jQuery("#banner_list a").eq(i).find("img").attr('alt')); jQuery("#banner_info").unbind().click(function(){window.open(jQuery("#banner_list a").eq(i).attr('href'), "_blank")}) jQuery("#banner_list a").filter(":visible").fadeOut(50).parent().children().eq(i).fadeIn(800); document.getElementById("banner").style.background=""; jQuery(this).toggleClass("on"); jQuery(this).siblings().removeAttr("class"); }); t = setInterval("showAuto()", 5000); jQuery("#banner").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 5000);}); }) function showAuto(){ n = n >=(count - 1) ? 0 : ++n; jQuery("#banner li").eq(n).trigger('click'); } //点弹层 jQuery("#banner_point ul li").hover(function(){ jQuery(this).addClass("cur"); },function(){ jQuery(this).removeClass("cur"); }); //测量高度 //var h = jQuery("#banner_list a:first").height(); //jQuery("#banner").height(h); //2016年8月2日11:49:05添加为了banner绽放时高度自动 $(window).resize(function () { $.setApDiv(); }); jQuery.extend({ setApDiv: function () { var bodywidth=document.body.clientWidth; if(bodywidth>1600) { bodywidth=1600; } var heightimg = bodywidth*383/1600; $("#banner").height(heightimg); //alert(heightimg); } }); document.onload =$.setApDiv();//打开就先执行一次，此方法应在在这条语句之前就被定义。 //2016年8月2日11:49:05添加为了banner绽放时高度自动 //banner左下三按钮 jQuery(function(){ jQuery(".bcl").hover(function(){ jQuery(this).toggleClass("bHover"); },function(){ jQuery(this).removeClass("bHover"); }); }) //三按钮内菜单展开收缩 jQuery(document).ready( function() { jQuery(".stepTitle").click(function(){ jQuery(this).next("ul").slideToggle("fast") .siblings(".stepContent:visible").slideUp("fast"); jQuery(this).toggleClass("active"); jQuery(this).siblings(".active").removeClass("active"); jQuery(this).parent().parent().find(".BtnC_rightContent img").attr("src",jQuery(this).find("a").attr("title")); }); }); jQuery(function(){ jQuery(".stepContent li").click(function(){ jQuery(".stepContent li").removeClass("active"); jQuery(this).addClass("active"); }); });
