Jquery 实现grid绑定模板_jquery

企鹅博客
企鹅博客
企鹅博客
25193
文章
0
评论
2020年8月28日20:19:36 评论 27 views

网站首页没有一点动画怎么可以,我以前用过Flash As3做过图片切换,效果非常不错,可是麻烦,改变起来麻烦。一直都想自己做个图片切换效果,总认为比较麻烦,今天自己实践了一下,其实还比较简单。不过有个小问题,IE8不兼容模式下 设置有透明效果的div 样式添加失效了,但是我用谷歌,IE8兼容测试都ok。

反正是给自己记录的,也不多话了,js没有与页面分离,也没有做出插件。一个网站要不了几个这种效果,先实现了再说吧。最后的效果还是很高大上的。

页面+JS代码

复制代码 代码如下:




复制代码 代码如下:

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

http://www.w3.org/1999/xhtml">

图片切换






Jquery 实现grid绑定模板_jquery


Jquery 实现grid绑定模板_jquery


Jquery 实现grid绑定模板_jquery


Jquery 实现grid绑定模板_jquery


Jquery 实现grid绑定模板_jquery


Jquery 实现grid绑定模板_jquery


Jquery 实现grid绑定模板_jquery


Jquery 实现grid绑定模板_jquery


测试介绍文件了啊

css的实现

复制代码 代码如下:

.picMain

{

margin: auto;

overflow: hidden;

width: 1000px;

height: 400px;

position: relative;

}

.picimg

{

width: 10000px;

height: 400px;

background-color: #000000;

position: absolute;

top: 0px;

}

.picRemark

{

position: absolute;

width: 500px;

height: 50px;

bottom: 0px;

left: 0px;

color: #FFFFFF;

text-indent: 2em;

}

.picRemark a

{

color: #FFFFFF;

text-decoration: none;

}

.picRemark a:hover

{

text-decoration: underline;

}

.picaction

{

position: absolute;

width: 1000px;

height: 50px;

background-color: #000000;

filter: alpha(opacity=50);

-moz-opacity: 0.5;

opacity: 0.5;

overflow: auto;

bottom: 0px;

left: 0px;

text-align: right;

}

.picaction a

{

border: 1px solid #C0C0C0;

width: 30px;

height: 30px;

float: right;

line-height: 30px;

text-decoration: none;

text-align: center;

color: #FFFFFF;

font-weight: bold;

margin-top: 10px;

display: block;

margin-right: 10px;

}

.pic

{

width: 1000px;

height: 400px;

float: left;

}

.picselect

{

background-color: #919191;

}

继续阅读
企鹅博客
  • 本文由 发表于 2020年8月28日20:19:36
  • 转载请务必保留本文链接:https://www.qieseo.com/415382.html
使用js提交表单form js教程

使用js提交表单form

首先我们先用html创建一个表单 Name: Email: <--一般情况下,这里是使用submit--> 在这个表单中,我们没用使用submit,我们准备使用js来提交这个表单。首先介绍...
js下载以及修改文件名的实例教程 js教程

js下载以及修改文件名的实例教程

这篇文章主要为大家详细介绍了js下载文件并修改文件名的代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 用js下载文件,使用<a>标签,添加download属性即可。 var a =...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: