jquery图片效果,jquery图片预览

jQuery图片标注效果，点击事件触发一次添加一个标注并把前面的标注清除了

这段代码没什么用，没有完成你想要的任何效果。

网站制作、成都做网站服务团队是一支充满着热情的团队，执着、敏锐、追求更好，是创新互联的标准与要求，同时竭诚为客户提供服务是我们的理念。创新互联把每个网站当做一个产品来开发，精雕细琢，追求一名工匠心中的细致，我们更用心！

核心封装在easypinShow这个方法，传入的是一个对象，这个对象只是些参数。

“再添加一个图片标注，并把前面的标注清除掉”其实很简单做到，但是修改的是easypinShow这个方法的代码，除非你把easypinShow这个方法的代码放出来。

你这个应该是在网上找别人的插件直接套进去使用，你这些代码其实只是Dome。

基于jquery的滚动鼠标放大缩小图片效果

今天要出个鼠标滚动放大缩小图片的功能，看似很简单，从网上一搜，出现的都是onmousewheel的例子，全部只支持IE浏览器，结果查出火狐有对应的DOMMouseScroll来处理这个功能，代码如下,并加上注意的注释项：

复制代码

代码如下:

$(function(){

$(".body

img").each(function(){

if($.browser.msie){

$(this).bind("mousewheel",function(e){

var

e=e||event,v=e.wheelDelta||e.detail;

if(v0)

resizeImg(this,false);//放大图片呗

else

resizeImg(this,true);//缩小图片喽

window.event.returnValue

=

false;//去掉浏览器默认滚动事件

//e.stopPropagation();

return

false;

})

}else{

$(this).bind("DOMMouseScroll",function(event){

if(event.detail0)

resizeImg(this,false);

else

resizeImg(this,true);

event.preventDefault()//去掉浏览器默认滚动事件

//event.stopPropagation();

})

}

});

function

resizeImg(node,isSmall){

if(!isSmall){

$(node).height($(node).height()*1.2);

}else

{

$(node).height($(node).height()*0.8);

}

}

});

本文的demo请点击这里：滚动鼠标放大缩小图片效果

JQuery 实现下面图片的效果

先建立HTML代码

复制代码代码如下:

html

head

meta http-equiv="Content-Type" content="text/html; charset=GBK"

titleJquery test web page/title

link rel="stylesheet" href="./css/layout.css" type="text/css" /

script src="./js/jquery.js" type="text/javascript"/script

script src="./js/basic.js" type="text/javascript"/script

/head

body

p id="it"IT业界/p

ul id="ul"

li百度/li

li谷歌/li

li网易/li

li腾讯/li

li淘宝/li

/ul

/body

/html

这条代码是包含Jquery库：

复制代码代码如下:

script src="./js/jquery.js" type="text/javascript"/script

这里我们将CSS和JS文件单独放在一个外部文件中。

layout.css文件的代码为：

复制代码代码如下:

@CHARSET "GBK";

body{

font:12px Arial,Verdana;

}

ul{

margin:0px;

padding:0px;

list-style-type:none;

}

#it{

margin:0px;

width:80px;

height:25px;

color:white;

text-align:center;

line-height:25px;

cursor:pointer;

background:black;

border:1px solid white;

}

#ul li{

width:80px;

height:25px;

color:white;

text-align:center;

line-height:25px;

cursor:pointer;

background:black;

border:1px solid white;

}

.highLight{

width:80px;

height:25px;

background:white;

border:1px solid blue;

color:black;

}

CSS代码大家可以根据自己喜欢的样式来设计，这里豆芽重要来解释JS文件。

复制代码代码如下:

$(document).ready(function (){

$('#ul').hide(); //打开页面隐藏下拉列表

$('#it').hover( //鼠标滑过导航栏目时

function(){

$('#ul').show(); //显示下拉列表

$(this).css({'color':'red','background-color':'orange'}); //设置导航栏目样式，醒目

},

function(){

$('#ul').hide(); //鼠标移开后隐藏下拉列表

}

);

$('#ul').hover( //鼠标滑过下拉列表自身也要显示，防止无法点击下拉列表

function(){

$('#ul').show();

},

function(){

$('#ul').hide();

$('#it').css({'color':'white','background-color':'black'}); //鼠标移开下拉列表后，导航栏目的样式也清除

}

);

$('li').hover( //鼠标滑过下拉列表是改变当前栏目样式

function(){

$(this).css({'color':'red','background-color':'orange'});

},

function(){

$(this).css({'color':'white','background-color':'black'});

}

);

});

jQuery过滤选择器怎么制作图片突出效果？

我们经常在一些网站上看到图片突出效果，即若干个图片摆放在一起，当鼠标放到某一张图片上时，以其他图片变暗的方式突显这张图。大致效果如下：

首先布局HTML： 

div class="main"    ul      liimg src="images/1.jpg" width="350px" height="200px" alt=""/li      liimg src="images/6.png" width="350px" height="200px" alt=""/li      liimg src="images/3.jpg" width="350px" height="200px" alt=""/li      liimg src="images/4.jpg" width="350px" height="200px" alt=""/li      liimg src="images/5.jpg" width="350px" height="200px" alt=""/li      liimg src="images/2.jpg" width="350px" height="200px" alt=""/li    /ul  /div

接下来简单调整一下css样式

style      *{padding: 0;margin: 0}      ul,li{list-style: none;}        .main{width:1050px; height: 410px;         margin: 100px auto;         background-color: #000;}        .main li {float: left; }  /style

有没有很简单。

再下一步就是要引入jq和编写jq代码来实现效果了

script src="images/jquery-1.12.4.js"/script

script    $(function(){        $(".mainulli").mouseenter(function(){            $(this).css("opacity","1").siblings().css("opacity","0.3");            $(".main").mouseleave(function(){                $(this).find("li").css("opacity",1);            })        })    });/script

就是这么简单,有没有很意外?主要熟悉使用siblings()和find()两个过滤选择器来实现效果,至于作者的布局好不好看，图片搭配美不美的问题就不要深究了。

jQuery实例教程:jQuery网页图片切换效果

假设你有一组作品，你想不用转跳到另外一个页面就可以显示多个图片，你可以将JPG图片载入到目标元素中去。下面是jQuery图片切换效果示例：

该示例的核心jQuery代码：

$(document).ready(function()

{

$("h2").append('em/em')

$(".thumbs

a").click(function()

{

var

largePath

=

$(this).attr("href");

var

largeAlt

=

$(this).attr("title");

$("#largeImg").attr({

src:

largePath,

alt:

largeAlt

});

$("h2

em").html("

("

+

largeAlt

+

")");

return

false;

});

});

首先给H2添加一个空的em元素。

当点击p中的链接

将链接的href属性保存到

“largePath”变量中。

然后将标题属性保存到”largeAlt”变量中

将img

id=”largeImg”的scr属性用变量

“largePath”替代，而alt属性用变量”largeAlt”替代

将em(在h2中)的内容设置成变量largeAlt的值。