jQuery圖片標注效果，點擊事件觸發(fā)一次添加一個標注并把前面的標注清除了

這段代碼沒什么用，沒有完成你想要的任何效果。

網站制作、成都做網站服務團隊是一支充滿著熱情的團隊，執(zhí)著、敏銳、追求更好，是創(chuàng)新互聯的標準與要求，同時竭誠為客戶提供服務是我們的理念。創(chuàng)新互聯把每個網站當做一個產品來開發(fā)，精雕細琢，追求一名工匠心中的細致，我們更用心！

核心封裝在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業(yè)界/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屬性保存到

“l(fā)argePath”變量中。

然后將標題屬性保存到”largeAlt”變量中

將img

id=”largeImg”的scr屬性用變量

“l(fā)argePath”替代，而alt屬性用變量”largeAlt”替代

將em(在h2中)的內容設置成變量largeAlt的值。

新聞標題：jquery圖片效果,jquery圖片預覽
標題鏈接：http://chinadenli.net/article2/dseoooc.html

成都網站建設公司_創(chuàng)新互聯，為您提供電子商務、靜態(tài)網站、、云服務器、微信公眾號、定制開發(fā)

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯