前端实际问题 | 凝的网站

type

status

date

slug

summary

element.style 样式问题解决方法

这是我引入外部js/css包里人家定义好的，他的这种样式会把自己的样式给覆盖掉。

需要在自己定义的样式后面加上！important控制来优先使用自己的样式。

换一个类似功能的标签。

就是既然不在css中，那最大可能，或者说一定？就在引入的js包中了，可以在js包中仔细检查然后找到后修改属性值。

我的中创网站模板用了bootstrap 和Jquery插件 slider revolution(滑块旋转革命)用于展示图片滑动切换效果

Slider Revolution是一款基于jQuery的插件，使用它时需要先载入jQuery库文件，以及Slider Revolution依赖的css和js文件。

1234	<link rel="stylesheet" type="text/css" href="css/style.css" /><script src="http://www.youhutong.com/static/js/jquery.js"></script><script type="text/javascript" src="jquery.themepunch.plugins.min.js"></script><script type="text/javascript" src="jquery.themepunch.revolution.min.js"></script>

内容切换的主体html结构如下，由class='tp-banner'元素包含多个<li>标签，<li>中放置切换的内容，包括主要图片、文字、按钮信息。这些信息配上各自的data-属性，是为了让Slider Revolution识别。

HTML:

<ul>

<div class="caption sfb"

data-x="693"

data-y="75"

data-speed="700"

data-start="0"

data-easing="easeOutBack">

</div>

<div class="tp-caption slider-text-title sft str" style="font-size:24px"

data-x="20"

data-y="150"

data-speed="300"

data-start="800"

data-easing="easeOutCubic"

data-end="6000"

data-endspeed="500">

小川编程

</div>

<div class="tp-caption slider-text-description sft str"

data-x="20"

data-y="200"

data-start="1000"

data-easing="easeOutBack"

data-end="4500"

data-endspeed="500">

PHP案例教程|源码免费下载学习!

</div>

<div class="tp-caption slider-text-description sft str"

data-x="20"

data-y="280"

data-start="1500"

data-easing="easeOutBack"

data-end="5000"

data-endspeed="500">

</div>

</li>

<div class="tp-caption lfr stb stl"

data-x="751"

data-y="200"

data-speed="1000"

data-start="1000"

data-easing="easeOutExpo"

data-end="6000"

data-endspeed="500">

</div>

<div class="tp-caption slider-text-title sft str" style="font-size:24px;color:#fff;"

data-x="20"

data-y="150"

data-speed="300"

data-start="800"

data-easing="easeOutCubic"

data-end="6000"

data-endspeed="500">

小川编程网

</div>

<div class="tp-caption slider-text-description sft str" style="color:#fff;"

data-x="20"

data-y="200"

data-start="1000"

data-easing="easeOutBack"

data-end="4500"

data-endspeed="500">

PHP免费自学教程，就在小川编程！

</div>

<div class="tp-caption slider-text-description sft str"

data-x="20"

data-y="280"

data-start="1500"

data-easing="easeOutBack"

data-end="5000"

data-endspeed="500">

</div>

</li>

</ul>

</div>

HTML结构布置好后，就可以调用Slider Revolution插件了，贴上以上代码后，打开浏览器就可以看到切换效果了。Revolution插件调用

12345678910111213

选项设置与说明

Slider Revolution提供了很多参数选项设置：

delay: 滑动内容停留时间。默认9000毫秒

startheight: 滑动内容高度，默认490像素。

startwidth: 滑动内容宽度，默认890像素。

navigationType: 显示翻页图标，默认“bullet”（圆点），如果设置为“none”则不显示。。

navigationArrows: 显示翻页箭头，默认nexttobullets，即鼠标滑向时显示左右翻页箭头，如果设置为none则不显示。

touchenabled: 是否允许触摸滑动，默认on即允许，如果设置为off则不允许。

onHoverStop: 是否开启鼠标滑向时暂停，on：开启，off：关闭。

fullWidth: 是否开启全屏展示图片内容，on：开启，off：关闭。

对于每个<li>标签可以设置各种效果：

data-transition: 内容滑动效果，可以设置以下值：boxslide，boxfade，slotzoom-horizontal，slotslide-horizontal，slotfade-horizontal，slotzoom-vertical，slotslide-vertical，slotfade-vertical，curtain-1，curtain-2，curtain-3，slideleft，slideright，slideup，slidedown，fade

data-slotamount: 切换时被分成的方形块数。

data-link: 图片链接

data-delay: 设置当前滑块内容的停留时间

二.css文字下划线能设置距离

text-underline-offset这个css可以设置距离文字的距离，百分比，

还有一个注意点就是一定要和text-decoration:underline一起使用，否则不起作用

三.移动端媒体查询

在css里面media

对于每个li里面的元素，可以设置以下选项来实现各种效果。

动画样式，class属性: class属性值代表不同的动画样式：sft - Short from Top sfb - Short from Bottom，sfr - Short from Right，sfl - Short from Left，lft - Long from Top，lfb - Long from Bottom，lfr - Long from Right，lfl - Long from Left，fade - fading

data-x: 当前元素相对li的横向位移

data-y : 当前元素相对li的纵向位移

data-speed: 动画时间，毫秒

data-start after: 当前元素等待几秒后再显示

data-easing: 缓冲动画，有easeOutBack...多种动画效果，可参照jQuery Easing 动画效果扩展，动画特效