10.1常用代码
常用调用
{{ app('section').id('46697').title }} 标题
{{ app('section').id('46697').content.img }} 图片
{{ app('section').id('46697').content.summary }} 描述
{{ app('section').id('46697').content.content | raw }} 内容
{{ h1 | raw }} 热门关键词 |truncate(60,'...') 限制字符 {{ url_index}} 首页链接
{{ copyright.companyname | raw }} 公司名称 {{ copyright.icpcode | raw }} 备案号
{{ url_search }} 搜索引用 tel:{{ config('phone') }} 电话
技术支持
{{ 'general.technology' | t }} <a href="{{ config('support_url') }}" target='_blank'>{{ config('support') }}</a>
技术支持图片
{% if config('support_img') %}
<a href="{{ config('support_url') }}" target='_blank'><img src="{{ config('support_img') }}"></a>
{% endif %}
时间
{{ value.timeline|date("Y-m-d H:I:s") }}
F-月份的完整的文本表示(January[-月份]到December[十二月份])
m-月份的数字表示(从01到12)
M-月份的短文本表示(用三个字母表示)
n-月份的数字表示，不带前导零(1 到12)
功能导航
<div class="x-seo">
{% if config('version') == 1 %}
<a href="{{ url_article }}">{{ 'general.article' | t }}</a> |
<a href="{{ url_index }}region/">{{ 'general.region' | t }}</a> |
{% endif %}
<a href="{{ url_sitemap }}">{{ 'general.site_map' | t }}</a> |
<a href="{{ url_index }}rss.xml">RSS</a> |
<a href="{{ url_index }}sitemap.xml">XML</a>
{% if count is not empty %}
| <a href="{{ url_index }}dm/" class="feedback" target="_blank" rel="nofollow">
{% if count > 0 %}{{ 'general.you_have' | t }}<span class="text-danger">{{ count }}</span>
{{ 'general.inquiry_info' | t }}{% else %}{{ 'general.no_inquiry_info' | t }}{% endif %}</a>
{% endif %}
</div>
主要从事于
{% if config('version') == 1 %}
{{ copyright.pro | raw }}{{ copyright.str_href | raw }}{{ copyright.advisory | raw }}
{% endif %}
企业分站
{% if config('version') == 1 %}
{% if volist_region is not empty %}
<div class="x-region">
{{ 'general.main_area' | t }}：
{% for value in volist_region %}
<a href="{{ value.url }}">{{ value.name }}</a>
{% endfor %}
</div>
{% endif %}
{% endif %}
常用判断
{% if count is not empty %} 内页判断不展示 {% endif %}
{% if config('version') == 1 %} 福星站判断不展示 {% endif %}
{% if key < 4 %} 条件 {% elseif %} 条件 {% else %} 条件 {% endif %}
{{ key + 1 }} 变量+1 {% if key % 2 ==0 %} 余数
{% if loop.index0 < 8 %} {% endif %}
判断图文 如果有显示图片 如果没有则为空
{% if value.img[0] is not empty %}
<i style="background: url({{ value.img[0] }}) no-repeat"></i>
{% else %}
{% endif %}
链接有无
{% if value.url is not empty %} {% endif %}
产品之类 id判断
{% if first_cid == 1 %} 111 {% endif %}
单页面
{% if page.id ==96 %}
{{ page.content | raw }}
{% elseif page.id ==99 %}
{{ page.content | raw }}
{% else %}
{{ page.content | raw }}
{% endif %}
常用循环调用
广告图
{% for key,value in app('section').id('46697') %}
<li>
<a href="{{ value.url }} " >
<div class="img"><img src="{{ value.img }}" alt="{{ value.name }}"></div>
<div class="bbwz">
<h2> {{ value.name }} </h2>
<h3>{{ value.summary| raw }}</h3>
</div>
</a>
</li>
{% endfor %}
图文
{% for key,value in app('section').id('20066') %}
<li>
<a href="{{ value.url }} " >
<div class="img"><img src="{{ value.img[0] }}" alt="{{ value.name }}"> </div>
<h2>{{ value.name }}</h2>
<h3>{{ value.fname }}</h3>
<h4>{{ value.summary| raw }}</h4>
<dd>{{ value.text1 }}</dd>
<dt>{{ value.text2 }}</dt>
<dl>{{ value.text3 }}</dl>
</a>
</li>
{% endfor %}
模块
{% for key,value in app('section').id('47248') %}
<li class="news_list">
<a href="{{ value.url }}"> // 调用链接地址
<img src="{{ app('content').thumb(value.uploadfiles[0],400,400) }}" alt="{{ value.title }}"> // 调用缩略图
<h3>{{ value.title }}</h3> // 调用标题
<h4>{{ value.description }} </h4> // 调用描述
<h5>{{ value.summary|truncate(60,'...') }}</h5> // 调用内容
<p>{{ value.timeline|date("Y-m-d") }} </p> // 调用时间
<span>{{ value.author }}</span> // 调用作者
</a>
</li>
{% endfor %}
默认调用
//第一个参数 调取分类 //第二个参数 调取显示个数 //第三个参数 0（默认），1（推荐），2（置顶） //第四个参数 0（正序），1（倒序）
产品 {% for key,value in products.show(0,6,0,0) %}
案例 {% for key,value in cases.show(0,6,0,0) %}
产品
{% for key,value in products.show(0,6,0,0) %}
<li>
<a href="{{ value.url }}">
<div class="img">
<img src="{{ app('content').thumb(value.uploadfiles[0],800,800) }}" alt="{{ value.title }}">
</div>
<h2> {{ value.title|truncate(20,'...') }} </h2>
<h3> {{ value.description }} </h3>
<h4> {{ value.summary|truncate(60,'...') }} </h4>
<p> {{ value.timeline|date("Y-m-d") }} </p>
<span> {{ value.author }} </span>
</a>
</li>
{% endfor %}
新闻
{% for key,value in news.show(0,6,0,0) %}
<li>
<a href="{{ value.url }}">
<img src="{{ app('content').thumb(value.uploadfiles,800,800) }}" alt="{{ value.title }}">
<h2> {{ value.title|truncate(20,'...') }} </h2>
<h3> {{ value.description }} </h3>
<h4> {{ value.summary|truncate(60,'...') }} </h4>
<p> {{ value.timeline|date("Y-m-d") }} </p>
<span> {{ value.author }} </span> // 调用作者
</a>
</li>
{% endfor %}
一级分类调用
产品 {% for key,value in app('category').lists('product') %}
新闻 {% for key,value in app('category').lists('news') %}
案例 {% for key,value in app('category').lists('case') %}
产品
{% for key,value in app('category').lists('product') %}
<li>
<a href="{{ value.url }}">
<h2>{{ value.cname }}</h2>
<img src="{{ value.img }}" alt="{{ value.cname }}">
<img src="{{ value.banner }}" alt="{{ value.cname }}">
<h3>{{ value.intro }}</h3>
</a>
</li>
{% endfor %}
单页面分类调用
{% for value in app('page').lists(27) %}
<dd><a href="{{ value.url }}">{{ value.title }}</a></dd> //对应链接和导航名称
{% endfor %}
一级导航调用 只调用导航的一级
{% set nav = app('section').id(100004) %}
{% for first in nav %}
<li>
<a href="{{ first.url }}">{{ first.name }}</a>
</li>
{% endfor %}
导航2 可根据调用 foot_nav 表中的样式决定调用内容
{% set nav = app('section').id(44889) %} // 调用对应导航id
{% snippet "foot_nav" data=nav %}
友情链接
{% for value in app('links').lists(1) %}
<a href='{{ value.linkurl }}' target='_blank'> // 调取网站URL
<h3>{{ value.linktitle }}</h3> // 调取网站名称
<img src="{{ value.logoimg }}"> // 调取LOGO图片
<p>{{ value.intro }}</p> // 调取网站描述
</a>
{% endfor %}
动态样式
@keyframes dt3 {
0% { -webkit-transform: scale(1); transform: scale(1);}
100% { opacity: 1; -webkit-transform: scale(1.1); transform: scale(1.1);}
}
.bbdt3nr:before{
animation: dt3 7s infinite linear .65s;
}
animation - 引用动画
dt3 - 引用动画名称
7s - 动画持续时间
infinite - 播放次数 infinite 代表无数次
linear .65s - 线性播放动画 可详细修改动画时动态
animation-delay:2s; 动画开始前等待时间
animation-direction:alternate; 反向播放动画
animation-duration:2s; 动画持续时间
animation-fill-mode: forwards; 动画完成后保持最后一个属性值
animation-iteration-count:3; 动画播放次数 infinite - 无数次
animation-name:mymove; 引用动画的名称
animation-play-state:paused; 暂停动画 running - 播放
Swiper 产品双切
<div class="bb2x clearfix">
<div class="w1400 clearfix">
<div class="bbbt1 wow fadeInRight">
<h2>PRODUCTS</h2>
<h3>产品中心</h3>
</div>
<div class="bb2nr">
<div class="bb2hd wow fadeInUp">
{% for value in app('category').lists('product') %}
<li><a href="{{ value.url }}">{{ value.cname }}</a></li>
{% endfor %}
</div>
<div class="bb2bd wow fadeInUp">
{% for key,value in app('category').lists('product') %}
<div class="tt{{ key }} bbtt">
<div class="bb2cp">
<div class="swiper-wrapper">
{% for val in app('content').lists('product', value.cid, 8) %}
<li class="swiper-slide">
<a href="{{ val.url }}">
<div class="img">
<img src="{{ app('content').thumb(val.uploadfiles[0],800,800) }}"alt="{{ val.title }}" />
</div>
<h2>{{ val.title }}</h2>
</a>
</li>
{% endfor %}
</div>
</div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<script>
var swiper = new Swiper(".tt{{ key }} .bb2cp", {
slidesPerView: 4, //显示个数 'auto'根据slide的宽度自动调整展示数量
spaceBetween: 48, //间距
autoplay:true, //自动播放
loop: true, //循环
//切换按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
})
</script>
{% endfor %}
</div>
</div>
</div>
</div>
<script>
$(".bb2hd li").eq(0).addClass('on');
$(".bb2bd .bbtt").eq(0).addClass('on');
$(".bb2hd li").hover(function(){
var _id = $(this).index();
$(this).addClass('on').siblings().removeClass('on');
$(".bb2bd .bbtt").eq(_id).addClass('on').siblings().removeClass('on');
});
</script>
和上面组合使用
.bb2bd { position: relative; }
.bb2bd .bbtt { position: absolute; left: 0; top: 0; z-index: 9; right: 0;}
.bb2bd .bbtt { opacity: 0; visibility: hidden; transition: all .5s ease; }
.bb2bd .bbtt.on { position: static; opacity: 1; visibility: visible; }
Swiper插件
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- 如果需要滚动条 -->
<div class="swiper-scrollbar"></div>
</div>
<script>
var swiper = new Swiper(".swiper", {
slidesPerView: 3, //显示个数 'auto'根据slide的宽度自动调整展示数量
spaceBetween: 24, //间距
autoplay:true, //自动播放
loop: true, //循环
})
</script>
常用
<script>
var swiper = new Swiper(".swiper", {
slidesPerView: 3, //显示个数 'auto'根据slide的宽度自动调整展示数量
slidesPerGroup : 3, //一次切换个数
spaceBetween: 24, //间距
autoplay:true, //自动播放
loop: true, //循环
centeredSlides: true, //中心模式
centeredSlidesBounds: true, //居中后，还可以配合设置此参数，使得第一个和最后一个Slide 始终贴合边缘。
speed:2000, //切换持续时间
direction : 'horizontal', //横向切换 vertical 竖向切换
createElements: true, //自动生成导航元素，不需要添加HTML
effect : 'fade', //切换方式淡入淡出 'cube' "coverflow" "flip" "cards" "creative"
autoplay:{
delay: 1000, //切换等待时间
},
//命名空间
slideActiveClass : 'my-slide-active', // 可更换swiper-wrapper 例 .bd
slideClass : 'my-slide', // 可更换swiper-slide 例'swiper-wrapper div'
slideVisibleClass : 'my-slide-visible', // 可更换 中心元素名称 例 .on
slideNextClass : 'my-slide-next', // 下一个slide的类名
slidePrevClass : 'my-slide-prev', // 前一个slide的类名。
//网格 多行多列布局
grid: {
fill: 'column', //排列方式 'column'（列） 'row'（行）
rows: 2, //两行
},
//分页器
pagination: {
el: ".swiper-pagination", //分页器名称
clickable: true, //点击圆点时切换
type: 'bullets', //分页器样式 不写为默认的圆点 ‘fraction’分式 ‘progressbar’进度条 ‘custom’自定义
dynamicBullets: true, //当你的slide很多时，开启后，分页器小点的数量会部分隐藏。
dynamicMainBullets: 2, //和隐藏的搭配使用 展示的主指示点的数量
},
//分页器-自定义模式
pagination: {
el: ".swiper-pagination",
clickable: true,
renderBullet: function (index, className) {
return '<span class="' + className + '">' + (index + 1) + "</span>";
},
},
//切换按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
//滚动条
scrollbar: {
el: '.swiper-scrollbar',
hide: true, //滚动条是否自动隐藏。
dragSize: 30, //滚动条宽度 默认'auto': 自动，或者设置num(px)。
},
//小图切大图1
thumbs: {
swiper: {
el: '#thumbs', //小图样式名
spaceBetween: 10, //间距
slidesPerView: 4, //展示个数
watchSlidesVisibility: true, /*避免出现bug*/
},
slideThumbActiveClass: 'my-slide-thumb-active', //对选中元素命名
multipleActiveThumbs: true, //缩略图swiper 拥有复数的active 索引，设置为false则只有一个索引。
autoScrollOffset: 1, //你想缩略图要比主Swiper提前一些显示
}
// effect : 'coverflow', 切换的控制 3d切换
coverflowEffect: {
rotate: 22, //slide做3d旋转时Y轴的旋转角度
stretch: 115, //每个slide之间的拉伸值，越大slide靠得越紧。5.3.6 后可使用%百分比
depth: 110, //slide的位置深度。值越大z轴距离越远，看起来越小。
modifier: 1.02, //depth和rotate和stretch的倍率
slideShadows : false //图片阴影
},
//新版
//响应式模式
breakpoints: {
0: {
slidesPerView: 2,
spaceBetween: 10,
},
992: {
slidesPerView: 4,
spaceBetween: 20,
},
1400: {
slidesPerView: 6,
spaceBetween: 37,
},
},
//老版
//响应式模式
breakpoints: {
992: {
slidesPerView: 1,
},
1400: {
slidesPerView: 2,
spaceBetween: 20,
},
},
});
//小图切大图2
var thumbsSwiper = new Swiper('#thumbs',{ //小图样式名
spaceBetween: 10, //间距
slidesPerView: 4, //展示数量
watchSlidesVisibility: true, /*避免出现bug*/
})
var gallerySwiper = new Swiper('#gallery',{ //大图样式名
spaceBetween: 10, //间距
thumbs: {
swiper: thumbsSwiper,
}
})
mySwiper.pagination.$el.addClass('MyClass'); //获取导航元素 .hd
</script>
//双向控制
<script>
var Swiper1 = new Swiper('#swiper1');
var Swiper2 = new Swiper('#swiper2', {
controller: {
control: Swiper1, //控制Swiper1
by: 'container', //设定'slide', swiper1的1, 2, 3, 4对应控制的swiper2为1, 2, 3, 7。
},
})
Swiper1.controller.control = Swiper2;//Swiper1控制Swiper2，需要在Swiper2初始化后
Swiper2.controller.control = Swiper1;//Swiper2控制Swiper1，需要在Swiper1初始化后
//控制多个
var Swiper3 = new Swiper('#swiper3', {
controller: {
control: [Swiper1, Swiper2],//控制Swiper1和Swiper2
},
})
Swiper3.controller.control = [Swiper1, Swiper2]//控制Swiper1和Swiper2，和上面效果一样
</script>
不常用
<script>
var swiper = new Swiper(".bb3x", {
grabCursor : true, //鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状
virtualTranslate : true, //使Swiper的滑动停止（锁定）
autoHeight: true, //高度随内容变化
watchOverflow: true, //只有1个时 slide，swiper无效
rewind:true, //切换到最后一个是产生一个倒带效果返回到第一个
slidesPerGroupSkip: 4, //分组后 将不计入分组之内 按3个为一组可分为4组（000，000，000，0）。
keyboard : true, //键盘的方向键控制slide切换。
mousewheel: true, //鼠标滚轮控制Swiper切换
freeMode: true, //自由模式
noSwipingClass : 'swiper-slide', //禁止拖拽 标签swiper-slide
//旋转木马
centerInsufficientSlides: true, //当slides的总数小于slidesPerView时，slides居中。
//无限循环
loopAdditionalSlides : 3, //loop下会复制若干个slide, 默认为0例：取值为1，0,1,2 --> 1,2,0,1,2,0,1
loopFillGroupWithBlank: true, //在loop模式下，为分组填充空白slide
loopPreventsSlide: true, //默认true，阻止 缓慢切换效果
//点击
slideToClickedSlide: true, //点击元素居中 和居中搭配使用
//触发条件
touchRatio : 0.5, //触摸变慢 默认为1，按照1:1的触摸比例滑动。设置为0时，完全无法滑动
followFinger : false, //滑动时slide不动，释放鼠标或手指时slide切换
longSwipesRatio : 0.1, //滑动超过10%即可触发切换。
//禁止切换
preventInteractionOnTransition : true, //当你的Swiper在过渡时将无法滑动
//命名空间
slideDuplicateClass : 'fon', //loop模式下被复制的slide的类名。
//自动切换
reverseDirection: true, //开启反向自动轮播。
pauseOnMouseEnter: true, //鼠标置于swiper时暂停自动切换，鼠标离开时恢复自动切换。
//聚焦
zoom : true, //开启缩放功能 双击放大
maxRatio: 5, //全部设置5倍
//分页器
pagination: {
el: ".swiper-pagination",
uniqueNavElements: false, //false: 全部导航元素有效 true: 优先选取全部 container内部元素
bulletElement : 'li', //设定分页器指示器（小点）的HTML标签。
hideOnClick :true, //点击Swiper会隐藏/显示分页器。
bulletClass : 'my-bullet', //给圆点重新样式命名
bulletActiveClass: 'my-bullet-active', //给圆点选中 on 重新样式命名
renderFraction: function (currentClass, totalClass) { //当分页器类型设置为分式时可用。
return '<span class="' + currentClass + '"></span>' + //切换的数量
' of ' + //中间展示的
'<span class="' + totalClass + '"></span>'; //总量
},
},
//切换按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
hideOnClick: true, //点击Swiper会隐藏/显示按钮。
hiddenClass: 'my-button-hidden', //边缘时按钮隐藏时的样式名
},
});
//鼠标移出隐藏按钮，移入显示按钮
mySwiper.el.onmouseover=function(){
mySwiper.navigation.$nextEl.removeClass('hide');
mySwiper.navigation.$prevEl.removeClass('hide');
}
mySwiper.el.onmouseout=function(){
mySwiper.navigation.$nextEl.addClass('hide');
mySwiper.navigation.$prevEl.addClass('hide');
}
mySwiper.scrollbar.$el.css('height','15px'); //赋予滚动条的高度
</script>
js笔记
对列表内容分组
<script>
jQuery(".fx9x .li").each(function(i){
jQuery(".fx9x .li").slice(i*2,i*2+2).wrapAll("<div class='swiper-slide'></div>");
});
</script>
点击向下出现
<script>
$('.ss img').click(function() {
$(this).parent('.ss').find('#formsearch').slideToggle(400);
});
</script>
<div class="tb11">
顶部
</div>
<script>
$(document).ready(function(){
$(function () {
//当点击跳转链接后，回到页面顶部位
$(".tb11").click(function(){
$('body,html').animate({scrollTop:0},400);
return false;
});
});
});
</script>
手机上要左右滑动 -例 产品详情页列表展示不全
<script>
var e = $(".xypg-right-content table");
var len = e.length;
for (var i = 0; i < len; i++) {
$(".xypg-right-content table").eq(i).wrap('<div style="overflow-y:hidden;" class="box" id="box" ></div>')
}
</script>
pc鼠标拖动触发滚动条
<script>
(function () {
var $box = document.getElementById('box')
var left = 0;
var oldY = 0;
var handleMove = function (e) {
handleChangeScroll(e.clientX)
}
var handleChangeScroll = (clientX) => {
var x = left + (oldY - clientX)
if (x < 0) x = 0;
$box.scrollTo(x, 0)
}
$box.addEventListener('mousedown', function (e) {
oldY = e.clientX;
left = $box.scrollLeft;
document.addEventListener('mousemove', handleMove)
});
document.addEventListener('mouseup', function () {
document.removeEventListener('mousemove', handleMove)
})
})()
</script>
判断宽度 替换链接
<script>
if($(window).width()<640){
var _url = window.location.href;
if(_url == '{{ url_index }}about_contact/'){
window.location.href = "{{ url_index }}about_contact/sjlxwm9b5.html";
}
}
</script>
//150%放大展示
<script>
var t = window.devicePixelRatio // 获取下载的缩放 125% -> 1.25 150% -> 1.5
// alert(window.devicePixelRatio);
if (!!window.ActiveXObject || "ActiveXObject" in window) {
if (t != 1) {
// 如果在笔记本中用IE浏览器打开 则弹出提示
alert('您的设备对显示进行放大导致页面显示不完全,请调整后打开/或用其他浏览器')
}
} else {
if (t != 1) { // 如果进行了缩放，也就是不是1
let c = document.querySelector('body')
c.style.zoom = -0.62 * t + 1.58; // 就去修改页面的缩放比例，这个公式我自己算的，不准确，勉强。
}
}
</script>
//判断高度中 id=pro-img 时page-product-detail-effect 获得样式profix 否则取消样式profix
<script>
$(document).ready(function(){
$(window).scroll(function () {
var tempScroll=$(window).scrollTop();
if(tempScroll > $('#pro-img').offset().top){
$(".page-product-detail-effect").addClass("profix");
}else{
$(".page-product-detail-effect").removeClass("profix");
}
});
});
</script>
// js宽度大小显示
<script>
if($(window).width()<992){
<script type="text/javascript">
$(".menu").hover(function(){
$(".f-menu").toggleClass("on1");
$(".menu").toggleClass("on1");
});
</script>
</script>
//鼠标滑动获取差值
<script>
if($(window).width()>992){
$(document).ready(function(){
$(window).scroll(function () {
var h1 = $('#bb2t').offset().top; // #bb2t以上的高度
var h2 = $('#bb2t').height(); // #bb2t高度
var h3 = $(window).scrollTop(); // 滑动过的高度
var h4 = $(window).height(); // 可视区域高度
var h5 = $(window).scrollTop() - $('#bb2t').offset().top; // 滑动过的高度 减去 模块以上的高度 就是 屏幕顶端 滑过模块的距离
var h6 = h2 - h4; // 模块的高度 减去 可视区域的高度 也就是 滑过模块的距离 到模块底部时 的 最大值
if( h5 > 0 ){ // 判断当 h5 大于零时 因为在顶端还没有到模块时 h5是个负值
$(".n1n2z .img").addClass("imgon3"); // 赋予 这个图片 imgon3
$(".imgon3").css("margin-top",h5+250,"px"); // 并让这个值 的目标 赋予 margin-top 的属性 以及 h5+250,"px" 的值 这里的250 就是图片距离顶部的距离
}else{ // 否则
$(".n1n2z .img").removeClass("imgon3"); // 取消 图片 imgon3 的属性
}
if( h5 > h6 ){ // 当 h5 大于 h6 时 也就是当屏幕的底部 出现模块底部时
$(".imgon3").css("margin-top",h6+250,"px"); // 重新赋予 margin-top 的属性 h6+250,"px" 值 因为 h6+250 是个固定值 所以当模块底部出现时 图片偏移的值会固定
}
});
});
}
</script>
// 可视区域顶部 滑动到 id位置 时赋予样式
<script>
$(document).ready(function(){ // 使用 ready() 来使函数在文档加载后是可用的：
$(window).scroll(function () { // 对 window 浏览器窗口 方法 scroll 滚动时 发生 scroll 事件 scroll 类似 鼠标点击 和鼠标经过
var tempScroll=$(window).scrollTop(); // 赋予 tempScroll 为可视区域以上的滑动距离
if(tempScroll > $('#bb2t').offset().top ){ // 这里做了一个判断 当滑动的距离 大于 模块的距离时 $('#bb2t').offset().top 为 id="bb2t" 位置到顶部的距离
$(".n1n2z .img").addClass("imgon"); // 赋予 .n1n2z .img 样式 imgon
}else{ // 否则
$(".n1n2z .img").removeClass("imgon"); // 取消样式 imgon
}
});
});
</script>
// 可视区域底部 滑动出 id位置 时赋予样式
<script>
$(document).ready(function(){
$(window).scroll(function () {
var scrollHeight1 = $('#bb2t').height(); // 赋予 scrollHeight1 为 id="bb2t" 模块的高度
var tempScroll = $(window).scrollTop(); // 赋予 tempScroll 为可视区域以上的滑动距离
var windowHeight = $(window).height(); // 赋予 windowHeight 为可视区域的高度 但不等于屏幕高度
// 判断 当 滑动过的距离 加上 可视区域的高度 也就是可视区域的底部到顶部的距离 大于 id="bb2t"模块以上的高度 加上 id="bb2t"的高度 也就是 id="bb2t"模块的底部到顶部的距离
if( tempScroll + windowHeight > $('#bb2t').offset().top + scrollHeight1){
$(".n1n2z .img").addClass("imgon1"); // 赋予 .n1n2z .img 样式 imgon1
}else{ // 否则
$(".n1n2z .img").removeClass("imgon1"); // 取消样式 imgon1
}
});
});
</script>
渐入效果
@media(min-width: 769px) {
.sun-delay0 {
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.sun-delay1 {
-webkit-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.sun-delay2 {
-webkit-transition-delay: 0.6s;
transition-delay: 0.6s;
}
.sun-delay3 {
-webkit-transition-delay: 0.8s;
transition-delay: 0.8s;
}
.sun-delay4 {
-webkit-transition-delay: 1s;
transition-delay: 1s;
}
.sun-delay5 {
-webkit-transition-delay: 1.2s;
transition-delay: 1.2s;
}
.sun-delay6 {
-webkit-transition-delay: 1.4s;
transition-delay: 1.4s;
}
.sun-delay7 {
-webkit-transition-delay: 1.6s;
transition-delay: 1.6s;
}
.sun-delay8 {
-webkit-transition-delay: 1.8s;
transition-delay: 1.8s;
}
.sun-delay9 {
-webkit-transition-delay: 2s;
transition-delay: 2s;
}
.sun-delay10 {
-webkit-transition-delay: 2.2s;
transition-delay: 2.2s;
}
.sun-ani-left,
.sun-ani-down,
.sun-ani-up,
.sun-ani-right {
opacity: 0;
-webkit-transition-property: all;
transition-property: all;
-webkit-transition-duration: .7s;
transition-duration: .7s;
}
.sun-ani-left {
-webkit-transform: translateX(-100px);
transform: translateX(-100px);
}
.sun-ani-down {
-webkit-transform: translateY(-100px);
transform: translateY(-100px);
}
.sun-ani-up {
-webkit-transform: translateY(-200px);
transform: translateY(200px);
}
.sun-ani-right {
-webkit-transform: translatex(100px);
transform: translatex(100px);
}
.actives .sun-ani-left {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
.active .sun-ani-left {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
.active .sun-ani-down {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
.active .sun-ani-up {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
.active .sun-ani-right {
opacity: 1;
-webkit-transform: translatex(0);
transform: translatex(0);
}
}
