当前位置： >
> 用jQuery+css3来实现的图片分割效果
用jQuery+css3来实现的图片分割效果
脚本大小：50KB
软件语言：简体中文
脚本类型：
脚本授权：免费软件
更新时间：
脚本类别：CSS特效
相关链接： &&
应用平台：
网友评分：
内容介绍热点排行下载地址相关内容
这是一款完全用css写成的翻页（分页）样式，模拟了digg，yahoo，等各样式效果。
继上次的50个css按扭(button)之后，现在抽了点时间弄了20个导航(navigation)，本来也想用50个的，太时间有限只就弄20个了，老规矩要PSD档的在群留下email,或给我发em&
50个css做的button弄完了，说了早上给大家下载的，中午有事情在忙，所以现在才弄完，图片和CSS已经打包好了，大家可以下载，因为时间关系，有些button没有做成可伸CSS完成一个漂亮的登录框效果，而且还是仿Windows XP的样式，只不过是经典风格的XP，包含完整的资源文件，你下载后直接把相关文件拷贝就可用啦，先看看效果图在上边，是不转载白鹿本人写的CSS中常用的 reset.css文件，用于重置html默认样式，前几天正好在论坛上看到有些CSS新手请教如何写reset.css才是最好的，其实没有最好，只能说最适合自己一款非常实用的css3特效，实现了超好看的搜索框和按钮样式此动画由以下四个特性：图片切换的时间可控性；图片切换的效果可以自我控制；自定义开始结束位置一款基于CSS3和HTML5的自定义聊天窗口，这里要声明的是它并不能完成聊天的功能，只是提供了聊天窗口的UIWIN 8 metro风最大的特点就是扁平化，扁平化设计,今天给大家推荐的这款js网页特效代码，就是如此效果Animated Buttons 是一款来自国外的CSS网页按钮集，内含7套风格漂亮的CSS按钮样式包，示例截图只是其中一款风格的截图，另有6款也是非常漂亮的按钮，想欣赏全部风格的就下
用jQuery+css3来实现的图片分割效果
CopyRight &
JB51.Net , All Rights Reserved> 旋转切换图片的jQuery+CSS3图片幻灯特效
旋转切换图片的jQuery+CSS3图片幻灯特效
用jQuery和CSS3创建的旋转式，单击左右箭头按钮时，图片做出360度的旋转过场，切换出下一张图片，很有意思。
jQuery Nivo Slider是一款基于jQuery的图片轮换特效，没有过多复杂的功能，简单实用。
Powerful jQuery with Image Zoomer：用CSS+jQuery实现的图片放大镜特效，类似于网上商城的产品特写图片特效，如凡客诚品。代码应用简...
Photo Zoom Out Effect with jQuery是一款很有意思的jQuery特效，支持鼠标移过放大当前图片。
Apple-like Retina Effect With jQuery，用jQuery与CSS创建的模拟iPhone界面放大镜的效果，很好玩的效果。
来自家乐福网站的三屏跑马灯促销产品图片效果，基于jQuery库，使用简单，效果不错。
能模拟相机拍照的jQuery特效代码，刷新网页随机切换背景图片，用鼠标可以对图片的局部进行拍照，很好玩。
点击新浪微博缩略图的时候会快速的置换一张大图，并且鼠标会显示放大或者缩小的指针，这种简约的效果非常适合插在内容区域单幅图片显示，放...
基于jquery的图片特效，可以对列表进行分类排序，点击按钮实时无刷新切换图片排列方式，可显示为全部或单个类别。
带有缩略图预览的jquery图片特效，有左右箭头可控制图片翻页，翻页效果很流畅，颇似flash的滑动效果。
Photobooth是一款基于jQuery and CSS3，PHP的WEB应用，可以让用户通过摄影头拍下自己的头像，实时上传到网站上去。
来自凡客诚品网的商品推荐代码，基于jquery框架，图片可滑动收缩，减少了网页的空间占用，适合在购物网站上做商品推荐功能。
以旋转动图显示大图的jQuery图片特效，缩略小图无需点击，直接响应鼠标事件，当移到缩略小图上方时自动以旋转图片的形式展示出大图。
基于jQuery的一款图片显示特效，鼠标移到图片上方，会自动缩小并显示出图片的摘要信息，特效比较简单，适合应用在一些展示产品的网页，有效...
基于jquery的一款很有趣的图片特效，能以左右滑动的方式模拟360度全景图片，还可以控制图片滑动的方向，或停止滑动。支持IE6、firefox等浏览器。
超强悍的一款全能jQuery特效，支持幻灯、相册、滚动、TAB选项卡等多种特效，只需改变少量代码就能变身为不同的网页特效，一段代码，全站适...
熟悉CSS的人都知道这是采用滤镜做出来的，但让人吃惊的是它是划过的图片变亮而其它变暗。这让我有点思考不出，按我的想法，应该是一开始是...
效果超酷可媲美flash的jquery滑动式图片特效代码，响应式设计支持全屏显示，支持键盘箭头键操作，有多种效果独特的过场切换特效，很有新颖...
基于jquery的一款图片滚动特效代码，可根据屏幕宽度自动调整图片滚动框的尺寸，很适合用在自适应的流体布局网页设计中。代码简单易用，可以...
基于jQuery的图片特效代码，支持视频和图片混合自动播放的图片特效，带有自动播放功能和缩略小图预览导航，支持图片简要文字描述等。
这是一个带变焦风格的jquery图像悬停特效，当鼠标在图像上面悬停时，图像会自动放大，并有一个单击放大的图标，如果跟lightbox灯箱效果结合...
jQuery幻灯
jQuery相册
jQuery幻灯
jQuery幻灯
jQuery幻灯&!DOCTYPE html&
&meta charset="UTF-8"&
&title&&/title&
&style type="text/css"&
*{margin:0; padding:0;}
#container{width:605 height:284 border:1 position: margin:100 overflow:}
.box {height:284width:605 list-style: position: top:0; left:0;}
li { width:605 height:284 float: cursor: pointer}
.nav {width:100%; height:20 padding:5px 0; position: bottom:0; background:}
.nav div {width:20 height:20 border-radius:10 background: margin-left:10 float: cursor:}
.nav div.active {background:}
.prev, .next {width:50 height:50 position: top:0; bottom:0; margin:auto 0; background: cursor: font:50px/50px "宋体"; color: text-align: opacity: 0.4;}
.next {right:0}
&script src="js/jquery-1.12.3.js"&&/script&
&script type="text/javascript" src="js/move3.js"&&/script&
&script type="text/javascript"&
$(function(){
var oDiv = $("#container");
var oUl = $(".box", oDiv);
var aLi = $("li", oUl);
var oNav = $(".nav", oDiv);
var aNav = $("div", oNav);
var oPrev = $(".prev", oDiv);
var oNext = $(".next", oDiv);
var len = aLi.
var iNow = 1;
var oFirst = aLi.first().clone();
var oLast = aLi.last().clone();
oUl.append(oFirst);
aLi.first().before(oLast);
oUl.width(aLi.first().outerWidth()*len);
oUl.css("left", -aLi.first().outerWidth());
autoPlay();
function autoPlay() {
clearInterval(oDiv.timer);
oDiv.timer = setInterval(function() {
if(iNow==len) {
oUl.css("left", -aLi.first().outerWidth());
oPrev.click(function() {
if(iNow==-1) {
oUl.css("left", -(len-2)*aLi.first().outerWidth());
iNow = len-3;
oNext.click(function() {
if(iNow==len) {
oUl.css("left", -aLi.first().outerWidth());
oDiv.mouseover(function() {
clearInterval(oDiv.timer);
oDiv.mouseout(function() {
autoPlay();
aNav.click(function() {
iNow = $(this).index() + 1;
function tab() {
aNav.removeClass();
var navIndex = 0;
if(iNow==0) {
navIndex = len-3;
} else if(iNow==len-1) {
navIndex = 0;
navIndex = iNow-1;
aNav.eq(navIndex).addClass('active');
oUl.stop().animate({left: -iNow*aLi.first().outerWidth()})
&div id="container"&
&li&&img src="img/ad1.jpg" height="284" width="605"&&/li&
&li&&img src="img/ad2.jpg" height="284" width="605"&&/li&
&li&&img src="img/ad3.jpg" height="284" width="605"&&/li&
&li&&img src="img/ad4.jpg" height="284" width="605"&&/li&
&li&&img src="img/ad5.jpg" height="284" width="605"&&/li&
&li&&img src="img/ad6.jpg" height="284" width="605"&&/li&
&div&&/div&
&div&&/div&
&div&&/div&
&div&&/div&
&div&&/div&
&div&&/div&
&div&&&/div&
&div&&&/div&
你还没有登录，请先登录或注册慕课网帐号
网上很多插件的
你还没有登录，请先登录或注册慕课网帐号
人如果没有梦想，那和咸鱼有什么区别
留个邮箱发给你
你还没有登录，请先登录或注册慕课网帐号
20892人关注
Copyright (C)
All Rights Reserved | 京ICP备 号-2jQuery实现图片渐入渐出切换展示效果
作者：斯迈欧
字体：[ ] 类型：转载 时间：
这篇文章主要介绍了jQuery实现图片渐入渐出切换展示效果,需要的朋友可以参考下
在这之前我们先看看我们要做的效果是什么样的：
我们要图片在过“一定时间”后自动切换，在右下角处有小方块似数字1,2,3,4，这些数字是根据图片的个数自动出现的，当鼠标经过的时候数字颜色有一定的变化；
下面我们来看看具体怎么实现。
第一步：先写简单的html页面
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&
&script type="text/javascript" src="../js/jquery.js" &&/script&
&script type="text/javascript" src="scrollPic.js" &&/script&
&link rel="stylesheet" href="scrollPic.css"&
&div class="pic-slider-io"&
&li&&img src="images/1.jpg" /&&/li&
&li&&img src="images/2.jpg" /&&/li&
&li&&img src="images/3.jpg" /&&/li&
&li&&img src="images/4.jpg" /&&/li&
页面代码解析：首先建立scrollPic.html,scrollPic.js,scrollPic.css。二话不说先把要的三个基本的文件建好；然后把它引入到html中在head头部，其中注意
&src="../js/jquery.js"
这个代码的意思，“../”表示跳出上级目录，然后在js文件夹下查找jquery.js文件；
在html页面中，我们在body中添加一个class为'pic-slider-io'的div，在div中有一个ul，li下面有四张图片，注意：图片事先设置好命名，为1.jpg,2.jpg......方便在编写scrollPic.js；
先看看这个时候什么都没做的页面样式：
可以看到图片是一原来的大小平铺在页面上的，一默认ul li的方式展现在页面上的；
现在我们要把它放在左下角；
第二步：编写css样式来控制它
首先控制div的展现：
.pic-slider-io{
height : 200
//设置div的高为200px；
width : 800　　//设置div的宽为800px；
float : 　　//float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
position :　　//position 属性规定元素的定位类型.这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定　　　　　　　　　　　　　　　　//位元素会相对于它在正常流中的默认位置偏移。relative 生成相对定位的元素，相对于其正常位置进行定位。
overflow : //overflow 属性规定当内容溢出元素框时发生的事情.hidden 内容会被修剪，并且其余内容是不可见的。
看一下页面样式：
看到所有图片都在一起去了，图片的本身大于div的宽高，所以overflow：hidden这个就把其他溢出的就不显示了，不过这肯定不是我们想要的，不急继续；
然后，我们现在控制ul的样式：
.pic-slider-io ul{
margin : 0 //设置上下左右的外边距都为0；
padding : 0//设置上下左右的内边距都为0；
注意：margin,padding的设置是：上，右，下，左；如margin ： 2px,4px,5px,8分别对应的是上，右，下，左；
height :　　//自适应高度，浏览器自动计算
width : 100%;　　//宽度为100%
list-style-type : 　　　　//把li的点去掉
float :　　
display :　　//此元素将显示为块级元素，此元素前后会带有换行符
position ://生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
z-index : 98;//z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
这个时候图片就不显示了，页面看到的是把左上角那个点去掉了；
再次，我们控制li的样式：
.pic-slider-io ul li {
width: 100%;
padding: 0
z-index:1; //这个li层就比ul那个叠层更高
这个样式的设置主要是把li的叠层高于ul 就相当于浮在ul上面；
最后，我们来看看img的样式：
.pic-slider-io ul li img{
width: 100%;
z-index:1;//设置图片和li在同一层上，这个应该没问题吧
现在我们来看看页面成什么样了：
看到，经过样式设置，整个图片都显示出来了；
第三步：编写scrollPic.js
在编写js的时候，我们要添加右下方的图片数字显示，我们事先把要添加的css写好如下：
.pic-page-btn {//这是在父div中的子div样式，用于显示在右下角的数字承载模块
height: 30
bottom: 20
z-index: 99; //他的叠层比父级div还要高，把这个按钮样式放在图片之上
.pic-page-btn span{ //这个是设置子div的数字样式
height: 30
background-color: #999;
line-height: 30
text-align:
color: #FFF;
margin-right: 10
.pic-page-btn .current {//这是将要设置鼠标滑过改变其背景颜色
background-color: #1D5D76;
下面，我们来看看js的编写，在这里不是视频，就不一步一步的讲了，我把各个解释都注释在js代码中了
$(function(){
$.scrollPic = function (options){ //定义了一个scrollPic函数，有一个传参，用于调用；
/************************开始整个默认插件参数讲解*******************************/
//整个defaults以花括号包含的是默认的参数，调用此插件的只需要修改ele，Time，autoscroll即可；
var defaults={
ele: '.pic-slider-io',
//pic-slider-io是一个class，css中定义了其样式；
Time : '2000',
//Time是定义了滑动的时间；
autoscroll : true
//autoscroll设为true表示自动切换图片；
/************************结束整个默认插件参数讲解*******************************/
//$.extend({},defaults, option)有{}主要是为了创建一个新对象，保留对象的默认值。
var opts = $.extend({}, defaults, options);
//$(opts.ele)可以理解为取这个执行，与$('.class1').click();类似表示，然后理解为赋值给PicObject；
//或者这样理解,$(opts.ele)就是$('.pic-slider-io')，只不过（.pic-slider-io是个class作为参数，所以要(opts.ele)来表示）；
var PicObject = $(opts.ele);
//PicObject.find('ul')，这个可以理解成$(opts.ele).find('ul'),因为opts.ele其实就是取得的一个class，
//相当于$('.pic-slider-io').find('ul');然后赋值给scrollList，所以整个就用scrollList来表示他；
var scrollList = PicObject.find('ul');
//同理scrollList.find('li')可以表示为$('.pic-slider-io').find('ul').find('li');所以这个是一层一层来查找的如果你看到html就会更加清晰；
var listLi = scrollList.find('li');
//图片的命名是1.jpg,2.jpg,这样的，index是用来表示图片的名字的初始化赋值为0；
var index = 0;
//这是定义一个picTimer(自动切换函数)的函数；
//一个li中包含一个图片，所以这是查找有多少个图片，赋值给len；
var len = PicObject.find('li').
/*****************开始自动切换函数************************/
function picTimer(){
showPic(index);//调用showPic(index)函数(在下面)
if(index == len){//如果index的值等于len，就表示从第一张图片到最后一张图片切换完了，然后是index赋值为0重新开始
/*****************结束自动切换函数************************/
//setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
//setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭
//此判断为如果autoscroll为true，则不停的调用picTimer函数，以Time的速度调用
if(opts.autoscroll){
var time = setInterval(picTimer,opts.Time);
/*****************开始动画函数************************/
function showPic(index){//定义动画函数
//listLi是找到第一个li，然后隐藏他，listLi在var listLi = scrollList.find('li');已经介绍了
listLi.hide();
//fadeIn() 方法使用淡入效果来显示被选元素，假如该元素是隐藏的。siblings()方法是遍历。
listLi.eq(index).fadeIn(500).siblings().hide();
//找到paging对应的css样式，如果与当前的index一致，则添加class为current的css样式，否则就移除。
PicObject.find(paging).eq(index).addClass('current').siblings().removeClass('current');
/*****************结束动画函数************************/
//这是在class为pic-slider-io的div中添加一个class为pic-page-btn的子div。
//主要是设置右下角数字的承载
PicObject.append('&div class="pic-page-btn"&&/div&');
//在这个class为pic-page-btn的子div中添加图片张数对应的数字个数，1,2,3，，，，，
//从这可以看出来，数字不是自己一个个添得，是根据li的个数，也就是图片的个数自动生成的
for( i=1;i&=i++){
PicObject.find('.pic-page-btn').append('&span&'+i+'&/span&');
//这个就是和上面讲listLi一样的
var paging = PicObject.find('.pic-page-btn span');
//为相应的右下角的数字改变其背景颜色
paging.eq(index).addClass('current');
在这我们差不多完成了图片的切换，
然后我们在html中先调用默认的看一看：
调用方式：
&script type="text/javascript"&
$(function(){
$.scrollPic();
看一下界面显示：
看箭头所示，说明可以自动切换了图片；
可是我们还有当鼠标在右下角1,2,3,4上滑过的时候，可以切换图片，所以我们就在js中加个事件就可以了：
//鼠标经过1、2、3、4的效果
PicObject.find(paging).mouseover(function(){
index = PicObject.find(paging).index($(this));
showPic(index); //调用showPic(index)函数。
//鼠标经过1、2、3、4的效果
//清除计时器
//当鼠标悬浮在1,2,3,4上面的时候，就相当于要切换图片了
//所以我们就要清除计时器，重新来过了
PicObject.hover(function(){
clearInterval(time);//这个是相对于setInterva()的；
},function(){
if(opts.autoscroll){
time = setInterval(picTimer,opts.Time);
clearInterval(time);
把这段代码加如到js中，加到什么位置就不要说了吧！加到
&paging.eq(index).addClass('current');
后面就可以了；
这样整个这个图片切换的一个插件就算完成了；
如果需要调用函数，可以修改ele,Timer,autoscroll.
看一下带参数使用插件：
&script type="text/javascript"&
$(function(){
$.scrollPic({
ele: '.pic-slider-io',
//插件应用div
Time:'3000',
//自动切换时间
autoscroll:true,
//设置是否自动渐变
好了，整个插件的讲述就算是完成了，希望大家可以从中学到知识，如有不足，还望谅解！（最后说一句，在整个js的编写时，最好在$(function(){});的最前面加个分号，防止与其他js冲突）
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具jquery怎么让页面所有图片各自加载完毕再显示出来？
如果我页面上有很多图片，一些列表页，加载过程挺难看
我想用jquery实现每一张图片都是加载完毕后再出现，
请问是不是先把$("img")都设置display：none？接下去呢？ 新手问题，麻烦大家指点一下怎么写。。谢谢
jquery.lazyload 图片延迟加载。 不知道是不是你想要的。&
jquery.scrollLoading 这玩意儿貌似更合理些。
先可以放一张很小的loading图片上去，等图片加载完成再替换掉。
图片有个onload事件。
然后呢相同图片浏览器是只加载一次的，第二次都是用的缓存。
可以用插件，也可以自己搞！
--- 共有 1 条评论 ---
谢谢你~请问onload的方式具体怎么写?
$("img").css("display","none");
$("img").onload(function() {
$("img").css("display","block");
});?????汗，js小白求指教。。